SVG in React and Next.js — Complete Implementation Guide
Master SVG in React: import as components, use as image sources, animate with Framer Motion, and optimize for production. Convert your images to SVG first with our free tool.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG in Next.js App Router
In Next.js App Router, the recommended ways to use SVG are: import as a Next.js Image component (simple, lazy-loaded), use inline SVG markup in JSX (for styled/animated SVGs), or configure SVGR for typed SVG component imports. For static logos and icons without animation needs, inline SVG in a Server Component is the simplest zero-config approach.
- Inline SVG in JSX: paste SVG markup directly — zero config, full CSS control
- next/image with SVG: <Image src='/logo.svg' width={100} height={100} />
- SVGR: install @svgr/webpack, configure in next.config.js, import as component
- CSS background SVG: url('/icon.svg') for decorative use
Animating SVG in React with Framer Motion
Framer Motion's motion components work directly on SVG elements. Animate path drawing with pathLength, scale elements with scale, and create elaborate sequences with useAnimation. The motion.path, motion.circle, and motion.g components support all standard Framer Motion animation props — making SVG animation in React as simple as any other Framer Motion animation.
Frequently Asked Questions
How do I import SVG as a React component in Next.js?
In next.config.js, add SVGR webpack configuration. Then import: import Logo from '@/public/logo.svg'. This gives you a <Logo /> component with full props support.
What's the easiest way to use an SVG in Next.js without config?
Paste the SVG markup directly into your JSX. It's a valid React element — add className, onClick, and style props directly to the root <svg> and inner elements.
Can I use next/image with SVG files?
Yes. <Image src='/logo.svg' width={200} height={100} alt='Logo' /> works in Next.js. SVG images in next/image don't require the `unoptimized` prop in Next.js 13+.
How do I animate an SVG path draw-on in React?
With Framer Motion: <motion.path pathLength={0} animate={{ pathLength: 1 }} transition={{ duration: 1 }} />. Add stroke and fill-none to the path for the drawing effect.
Should I use Server Components or Client Components for SVG in Next.js?
Inline SVG markup and <img> SVG work in Server Components. Event handlers (onClick), useEffect animations, and useState interactions require 'use client'.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free