Use an SVG as a normal image when you only need to display artwork. Use inline SVG or an SVG-to-React transform when React must control the SVG’s attributes or internal shapes. In current Next.js, the correct setup also depends on whether your project uses Turbopack or webpack, and SVG files supplied by users require a stricter security boundary than trusted local assets.
Choose the right SVG representation
| Requirement | Recommended approach | What you configure |
|---|---|---|
| Display a logo, illustration, or diagram without changing its markup | Reference a file from public with an image element or next/image |
No SVG loader |
| Set component props or style paths, fills, and groups from React | Inline SVG or import through an SVG-to-React loader | Bundler rule and loader |
| Accept SVG files from an untrusted source | Validate and sanitize before serving; avoid treating the file as harmless raster data | Trust-boundary and response-header controls |
SVG is vector artwork, so it scales without pixelation. A static asset does not need to become a React component merely because it has an .svg extension.
Display a static SVG from public
1. Add the file
Place diagram.svg at public/images/diagram.svg. Files in public are addressed from the site root, so the browser URL is /images/diagram.svg.
2. Use a normal image
export default function Diagram() {
return (
<img
src="/images/diagram.svg"
alt="System architecture diagram"
width="1200"
height="700"
/>
)
}Use an empty alt value for a purely decorative image. For an informative diagram, describe its purpose rather than repeating a filename. The exact accessibility treatment depends on whether the graphic conveys information or decoration; test the surrounding experience with your accessibility process.
#1 Best Overall
3. Use next/image when its layout features help
import Image from 'next/image'
export default function Diagram() {
return (
<Image
src="/images/diagram.svg"
alt="System architecture diagram"
width={1200}
height={700}
unoptimized
/>
)
}Next.js documents that SVG images are not optimized by default because they are lossless and can contain HTML- and CSS-like capabilities. When the source is known to be SVG, the documentation recommends the unoptimized path; current behavior can also apply this automatically when src ends in .svg. Check the Image documentation for the version installed in your project: Next.js Image documentation.
Import an SVG as a React component
Choose this route when a component needs to pass props such as className, change colors, or control elements inside the SVG. Inline markup is the simplest option for a small icon:
export function CheckIcon({ size = 20, className }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 20 20"
className={className}
aria-hidden="true"
focusable="false"
>
<path d="M4 10.5 8 14l8-8" fill="none" stroke="currentColor" strokeWidth="2" />
</svg>
)
}For larger files, an SVG-to-React transform avoids copying the markup into a component. The current Turbopack configuration documentation lists @svgr/webpack as a supported loader and shows this rule:
module.exports = {
turbopack: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
}Install the loader in the project that owns this configuration:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
npm install --save-dev @svgr/webpackThen an import can be used as a component, subject to your loader’s export settings:
import Logo from './logo.svg'
export default function Header() {
return <Logo className="h-8 w-auto" aria-label="Company home" />
}This configuration is specifically a Turbopack example. Projects using webpack need a webpack rule appropriate to their Next.js version, and projects on older releases may use the earlier experimental.turbo key. The current key is turbopack. Read the version-matched guide before copying configuration: Next.js Turbopack documentation.
Turbopack and webpack: avoid the common configuration trap
- Confirm the Next.js version in
package.json. - Confirm which bundler your development and production commands actually use.
- Use the current
turbopack.rulesshape for Turbopack; do not assume a webpack rule is interpreted unchanged. - Restart the development server after changing
next.config.js. - If a component import fails, inspect the generated module’s export style. Some SVGR setups provide a default component export, while a different loader setup may expose a named export.
SVG security and embedding context
An SVG loaded as an image is not equivalent to opening the file as a document. MDN notes that browsers can disable JavaScript and external resource loading in image contexts, while those restrictions do not apply in the same way when the SVG is viewed directly or embedded through elements such as iframe, object, or embed. Treat document embedding as a different trust boundary: MDN: SVG as an image.
Trusted local artwork
Keep design-controlled files in the repository, review changes, and use ordinary image or component rendering. Do not add image-optimization permissions merely to make a local SVG work.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteExternally supplied SVG
Do not accept arbitrary uploads and serve them as if they were inert PNG files. Validate the file, sanitize it with a policy suitable for your application, and consider serving it from an isolated origin or converting it to a safer raster format.
If you enable SVG serving in the Image Optimization API
Next.js warns about SVG security and recommends a download content disposition plus a restrictive Content Security Policy when dangerouslyAllowSVG is enabled. A configuration must therefore be deliberate rather than a blanket fix for import errors. Follow the current security wording in the Image documentation, since header and configuration details are version-sensitive.
Common failures and fixes
“Unexpected token” or SVG markup parsed as JavaScript
Your bundler has no SVG transform for that import. Use a URL from public, inline the markup, or add the loader rule for the active bundler.
The file displays but cannot be styled from React
An image URL exposes the SVG as an image; CSS outside the file cannot reliably target its internal paths. Import it as a component with SVGR or inline the required markup.
The component import is undefined
Check whether your SVGR configuration exports a default or named component, then align the import. Restart the dev server after changing the loader.
Next Image reports an SVG restriction
Use a known local SVG with the documented unoptimized behavior. Do not turn on dangerouslyAllowSVG for arbitrary content; if serving SVG through optimization is genuinely required, apply the documented content disposition and CSP.
Styles or scripts behave differently in an iframe
You changed embedding context. Image-context browser restrictions do not provide the same assumptions for document embedding; review the origin, sandboxing, CSP, and content you allow.
Performance and maintenance decisions
- For a stable logo or illustration, a public URL has the smallest configuration surface.
- For a frequently reused icon set, component imports centralize props and theming but add bundler configuration.
- Use explicit dimensions or an aspect-ratio strategy to prevent layout shifts.
- Keep SVG markup compact and remove unnecessary editor metadata during asset preparation, while preserving viewBox and required accessibility information.
- Do not expect the Image Optimization API to reduce SVG bytes in the same way it transforms raster formats; SVG is not optimized by default.
Or skip the browser setup
If your goal is to obtain a clean screenshot of a page containing SVGs, ScreenshotNeo can do the capture through one request. Its service accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the complete parameter list and options in the ScreenshotNeo documentation. It supports PNG, JPEG, WebP, and PDF output, full-page captures with lazy images loaded, CSS-selector element captures, device presets and custom viewports, retina scale, custom CSS and JavaScript, clicks, waits, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL-based caching, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Its parameter names are compatible with those used by other screenshot APIs, which can simplify migration.
There is a free allowance of 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
Quick decision checklist
- Need only display? Put the SVG in
publicand use an image URL. - Need React props or internal styling? Inline it or configure SVGR.
- Using Turbopack? Use the current
turbopackrule and version-matched docs. - Handling untrusted files? Sanitize them and choose an embedding context deliberately.
- Enabling SVG optimization? Apply the documented CSP and download disposition recommendations.
Frequently Asked Questions
Can I use an SVG without installing a package?
Yes. Store it under public and reference its root-relative URL, or write the SVG markup directly in a React component.
Should every SVG be converted to a React component?
No. Conversion is useful only when React needs to control component props or elements inside the SVG.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteDoes Turbopack use the same configuration as webpack?
No. Loader syntax and configuration keys depend on the active bundler and Next.js version; the current Turbopack example uses turbopack.rules.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
