SVG
Paste SVG markup and preview the rendered vector image alongside the source.
Tips
- Preview runs in a sandboxed iframe — scripts inside the SVG are disabled.
- Edit the
viewBoxto control how the image scales. - Download saves the SVG with your chosen filename.
Working with SVG markup
SVG (Scalable Vector Graphics) is XML for two-dimensional vector images. It is the format behind almost every icon set on the modern web — small, scalable, stylable with CSS, and easy to edit by hand once you know the elements. This tool gives you a live preview of any SVG you paste or open, with the rendered image on the right and the markup on the left.
What the viewBox actually does
The viewBox="min-x min-y width height" attribute defines the internal coordinate system. Everything inside the SVG is positioned in viewBox units, not pixels, which is why the same SVG scales cleanly from a 16-pixel favicon to a billboard. If your icon appears clipped or shifted, the viewBox is almost always the first thing to inspect.
Common tasks
- Cleaning up exports. Vector editors often include metadata, hidden layers, and editor-specific attributes that bloat the file. Open the SVG, delete the extras, and re-download.
- Recoloring. Search-and-replace
fillattributes or switch tofill="currentColor"so the icon inherits the surrounding text colour. - Sanity-checking generated SVG. Charts and diagrams emitted by tools like Mermaid or D3 are valuable to inspect — small fixes in the markup are often faster than re-running the generator.
Safety
SVG is technically a script-capable document format. The preview here renders the SVG as an inline image, but if you are embedding untrusted SVGs in a production page, sanitise them first — strip <script>, event handlers, and foreignObject.