SVG tools
Convert, optimize, preview, and edit SVG files — vector in, anything out.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
Most popular
All svg tools
Render an SVG to PNG at any resolution, with transparency kept.
Render an SVG to JPG on a solid background.
Convert an SVG into a React or Vue component, props and all.
Strip editor metadata and round coordinates without changing the drawing.
Paste SVG code and see it render, on any background.
Inline an SVG into CSS or an img tag as a data URI.
Fix an SVG that will not scale or is cropped by its viewBox.
Merge icon files into one sprite sheet of symbols.
Recolour an SVG and change stroke weight without a design app.
Trace a PNG or JPG into vector paths.
Generate a line-drawing animation in CSS or SMIL.
About these tools
SVG sits in an awkward gap. It is an image, so it belongs with the converters — but it is also a text file, an XML document you can open in an editor and change by hand, which is why it behaves nothing like a PNG when something goes wrong. A broken JPG shows artefacts; a broken SVG shows nothing at all, because one unclosed tag makes the whole document fail to parse. These tools are built around that dual nature: some of them treat your file as a picture, some treat it as source code, and a few do both.
That also makes SVG unusually well suited to running in a browser. Reading and rewriting XML is something a browser does natively and instantly, so optimizing, recolouring, converting to a component, or building a sprite sheet needs no server and no waiting — the work happens as you change the settings. Rendering to PNG or JPG uses the same Canvas pipeline as the image tools, and because the source is vector, every export is a fresh render at full sharpness rather than an upscale.
One rule holds across all of them: your file is never injected into this page. It is parsed in an isolated document and previewed inside an image element, where a browser will not run scripts embedded in an SVG or fetch anything it references. Scripts, event handlers, and external links are stripped, and anything removed is listed rather than dropped silently.
FAQ
Why won’t my SVG scale when I set a width in CSS?
Almost always a missing viewBox — without one the drawing has no scalable coordinate space, so it gets clipped rather than resized. The viewBox fixer diagnoses this and repairs it.
Can I convert a PNG or JPG into a real SVG?
You can trace one, which fits vector paths along the boundaries between flat colour regions. It works well on logos, icons, and line art, and badly on photographs — there is no way to make a photo into a sensible vector.
Is it safe to paste SVG code I did not write?
Here, yes. Every tool strips script elements, event handlers, and external references before doing anything, and previews render inside an image element where scripts cannot execute at all.
Do these tools upload my files?
No. Everything runs in your browser — XML parsing, canvas rendering, and tracing alike. Each tool page carries a live network monitor that watches for outbound requests while your file is processed.