A free online SVG viewer and SVG editor. Paste code or drop a file to preview it, edit the markup live, change SVG colors, resize, and crop whitespace. Everything runs in your browser, nothing is uploaded.
Done editing? In our test of 14,852 real SVG files the median file got 44% smaller. Compress it with CrushSVG
View, edit, and fix SVG files in one place
An online SVG viewer with the editing tools you reach for most often
View any SVG
See the rendered image next to its code, with zoom, light, dark, and transparent backgrounds, and the width, height, viewBox, and file size at a glance. Hover a shape to find its line in the code.
Edit the code live
A plain SVG code editor: type or paste, and the preview updates as you go. If the XML breaks, you get the line and column, and the last working preview stays on screen.
Recolor, resize, crop
Change SVG colors with a picker for every fill, stroke, and gradient stop. Resize an SVG by changing width and height without touching the viewBox, or crop the SVG to the edges of the drawing.
How to use the SVG viewer
Four steps, no account needed
Load your SVG. Open a file, drag it onto the editor, or paste the code anywhere on the page.
Check the preview. Zoom in, switch the background to see transparent areas, and hover a shape to jump to its code.
Make your changes. Edit the code directly, or use the Colors, Size, and Crop panels below the preview.
Save it. Download the edited SVG or copy the code. Then run it through the CrushSVG optimizer to cut the file size.
Frequently Asked Questions
About viewing and editing SVG files online
Is my SVG uploaded to a server?
No. The SVG viewer and editor run entirely in your browser. Your file is read locally and never sent anywhere, so it is fine to use on private or unreleased artwork.
Is it safe to open an SVG from the internet here?
SVG files can contain scripts. The preview is rendered in a sandboxed frame with scripting turned off, and script tags, event handler attributes like onload, and javascript: links are stripped before rendering. The code panel still shows them so you can inspect and delete them.
How do I change the color of an SVG?
Load the file and use the Colors panel. It lists every color used in fill, stroke, stop-color, and style rules. Pick a new color and every place that color appears is updated in the code. Icons that use currentColor take their color from the page they are placed in, so they do not appear in the list.
How do I resize an SVG without distorting it?
Change the width or height in the Size panel with the ratio lock on. Only the width and height attributes change. The viewBox stays the same, so the drawing scales cleanly instead of being cropped or stretched.
How do I crop the empty space around an SVG?
Click Trim whitespace. It measures the shapes that are actually drawn, including stroke width, and tightens the viewBox to fit them. Add padding if you want a margin. Blur and drop-shadow filters can reach past the measured shapes, so check the preview after trimming.
Why does my SVG show an error?
SVG is XML, so a single unclosed tag or stray character stops it from rendering. The editor shows the line and column of the first error and keeps the last working preview on screen until you fix it.
