SvgX - SVG optimizer and converter: SVGO, data URI, React, Vue, PNG, favicon

From exported SVG to production-ready code

SvgX cleans up SVGs exported from design tools and icon sets, shows you how they render on light and dark backgrounds, and turns them into whatever your project needs: inline SVG, a CSS data URI, a Vue or React component, or a PNG at any resolution. Everything stays in your browser.

How it works

  1. 01

    Add an SVG

    Paste the code, open a file, or drop an .svg anywhere on the page. You can edit the code directly.

  2. 02

    Optimize and check

    SVGO removes editor metadata, comments and redundant precision. Compare the result with the original on transparent, white and black backgrounds.

  3. 03

    Copy or export

    Copy the format you need, download the optimized .svg, export PNG or WebP at 1× to 4× or an exact width, or download a complete favicon set.

Output formats

SVG
Optimized markup, minified or indented, ready to inline or save as a file.
CSS data URI
A background-image declaration. URL-encoded rather than base64, which is shorter for SVG.
Vue
A single-file component with the SVG as its template.
React (JSX)
A function component with attributes converted to JSX names (strokeWidth, className) and props spread onto the svg.
PNG and WebP
Rendered at 1× to 4× or a custom width, on a transparent or white background. WebP is lossless.
Favicon pack
One zip: a multi-size favicon.ico, icon.svg, an Apple touch icon with a solid background, 192 / 512 PNGs, a manifest, and ready-to-paste link tags.

Keyboard shortcuts

  • Open an SVG fileO
  • Paste SVG code (outside the editor)CtrlV
  • Copy the codeC
  • Switch the preview backgroundB

FAQ

What is SVGO?

SVGO (SVG Optimizer) is the most widely used open-source SVG optimizer, also used inside many build tools and icon libraries. It removes editor metadata, comments, empty groups and excess decimal places, and rewrites paths more compactly, without changing how the SVG looks.

What's in the favicon pack?

favicon.ico (16, 32 and 48 px, for older browsers and anything that requests /favicon.ico directly), icon.svg (the tab icon in current browsers), apple-touch-icon.png (180 px, for iOS home screens), icon-192.png and icon-512.png (Android and PWAs, referenced from manifest.webmanifest), and head.html with the link tags. It's the minimal set today's browsers need.

Why does the home screen icon get a background?

iOS shows transparent areas as black, so the Apple touch icon is filled with the background color you pick and given some padding. All other sizes stay transparent.

Is my SVG uploaded?

No. Parsing, optimization and image export all run in your browser.

Is it safe to open an SVG I don’t trust?

Yes. SvgX never inserts your SVG into the page; it is shown as an image, where scripts and event handlers don’t run.

Should I remove width and height?

For icons and illustrations you size with CSS, yes. The viewBox keeps the proportions. Keep them if the SVG is used in an img tag without CSS sizing.

When should I use currentColor?

For one-color icons, so they take the color of the surrounding text, including hover states and dark mode. Multi-color artwork would lose its colors.

Why is my icon black on the black background?

Icons that use currentColor have no color of their own. SvgX previews them in the text color that suits each background; set color in your CSS where you use them.

More tools

ColorX Tailwind & shadcn/ui theme generatorFontX Font pairing and type scale for developersGradientX CSS and Tailwind gradients, blended in OKLCHImageX Compress and convert images to WebP, AVIF and moreCropX Crop to any ratio or size, and redactRunX Paste HTML, React or Vue code and see it run