Most of the time you do not need Figma open. You need to see what is inside an SVG, change a fill color, swap a stroke width, and ship it. A viewer beats a full design tool when the job is reading XML, not drawing vectors. Paste the markup, see the rendered image side by side, edit attributes inline, and export whatever format the next step in your pipeline expects. That is the whole workflow.
SVGs beat PNGs for icons and logos and it is not close. They scale to any resolution without artifacts. They compress to a fraction of the size for simple shapes. They are accessible, since screen readers can pull a title and description right out of the XML. They are themeable with CSS. The only reasons to ship PNG in 2026 are legacy platforms that cannot render SVG and photographs, which are not vector content in the first place.
The single most important attribute to understand is viewBox. It defines the coordinate system the SVG draws into, and it is what makes the file actually scalable. An SVG with width and height but no viewBox will not resize correctly. An SVG with viewBox and no width or height will scale to its container. If you take one thing from this page, take that: viewBox is the source of truth, width and height are hints. Open the viewer, find your viewBox, and confirm the four numbers (min-x, min-y, width, height) actually frame your artwork.
When you copy an SVG into a React component, JSX is going to fight you. HTML attributes like stroke-width and clip-path become strokeWidth and clipPath in camelCase. viewBox stays viewBox (it is one of the rare camelCase attributes already in the spec). Class becomes className. Dashes everywhere become camelCase. The React JSX export handles this conversion, and the React Native JSX export goes further by mapping everything to react-native-svg primitives like Svg, Path, Circle.
A quick reality check on inline versus external. <img src="logo.svg"> is fine for hero images that do not need to be styled. Inline SVG (the actual <svg> tag in your HTML) is required if you want to change colors with CSS, animate paths, or hook into click events on individual shapes. Most design systems eventually move every icon to inline because the flexibility is worth the slightly larger DOM. This tool gives you both paths: paste, edit, then export to whichever style your stack already uses.
Inspect, edit, and export SVG to common formats.
- What can I export to?
- PNG, JPG, data URI, React JSX, and React Native JSX — all from a single SVG paste.
- Does it optimize the SVG?
- Yes. Whitespace, comments, and unnecessary metadata are stripped without altering the visual output.
- Can I tweak colors and dimensions inline?
- Yes — edit fill, stroke, viewBox, and width/height with live preview.
- Why does my SVG look fine in the browser but break in React?
- Almost always a JSX attribute conversion issue. stroke-width must become strokeWidth, clip-path becomes clipPath, fill-rule becomes fillRule. React will warn you in the console for some of these and silently drop others. Run the SVG through the React JSX export to convert everything in one pass.
- What is the difference between width, height, and viewBox?
- viewBox defines the internal coordinate system the paths are drawn into. Width and height tell the browser how much screen space to give the SVG. If viewBox is set, the SVG scales to fit the width and height while preserving the artwork. If only width and height are set, you get a fixed-size SVG that does not scale cleanly.
- Can I animate an SVG with CSS?
- Yes, but only if the SVG is inline in the DOM. CSS cannot reach into an SVG referenced via <img src> or background-image. Inline the SVG, add a class to the element you want to animate, and target it from your stylesheet with transform, opacity, or stroke-dasharray for line-drawing effects.
- Is SVG safe to accept from users?
- Not without sanitization. SVG can contain <script> tags and event handlers like onclick, which makes it a vector for XSS attacks. If you accept SVG uploads, run them through a sanitizer like DOMPurify with SVG mode enabled before you render them on any page that includes user data.
- When should I use PNG instead of SVG?
- Use PNG for photographs, complex gradients with hundreds of stops, and screenshots, anything that is not really vector content. Use SVG for logos, icons, illustrations with flat colors, and anything that needs to render crisply on a Retina display at any size.
- How small can I get an icon SVG?
- A clean single-path icon usually lands between 200 and 500 bytes. Anything over 2KB for a simple icon means there is metadata, empty groups, or redundant precision in the path coordinates. Run it through SVGO (or this tool's optimization pass) and round path coordinates to one decimal place.
- Does the viewer work offline?
- Everything runs client-side in your browser. The SVG never leaves the tab. That matters when you are working with assets under NDA or anything from an unreleased project: there is no server round-trip and no upload to inspect.
SVG is one of the few formats on the modern web that genuinely does the job it was designed for. Treat it like code, not like an image: read the markup, edit the attributes, optimize the output. A viewer that exposes the XML alongside the render is usually all the tooling you need to ship clean vectors.
