SVG → </>
SVG viewer and code editor
Open an SVG file or paste its code to see it rendered, check its size and edit it with a live preview. Everything stays in your browser.
Runs in your browser · files stay on your device
How to view an SVG file
- Open a file or paste code. Use Open file, drop an SVG on the preview or paste the code into the editor.
- Check the preview. Switch between transparent, light and dark backgrounds to see edges and white shapes.
- Edit the code. The preview updates as you type. Format code tidies the indentation.
- Copy or download. Save the edited SVG or copy the code.
SVG view on any background
Many SVG icons are white or use transparent areas, and they disappear on a white page. The background switch shows the image on a checkerboard, on white and on a dark surface, which is how you spot a white logo, a missing fill or an edge that bleeds.
Below the preview you see the declared width and height, the viewBox, the number of elements and the file size. These values explain most sizing problems: an SVG without width and height takes the size of its container, and a wrong viewBox crops or shrinks the drawing.
SVG viewer online with a code editor
The editor highlights the XML, folds long groups and shows line numbers. When the code has a mistake, such as a tag that is not closed, the viewer shows the parser error instead of a blank image, so you know which line to fix.
The preview is rendered as an image. Scripts inside an SVG do not run, which makes it safe to open files you received from someone else.
Free SVG editor online for quick fixes
Typical edits take a few seconds: change a fill color, remove a fixed width and height to make the icon responsive, delete a hidden layer, or add a <title> for accessibility. For deeper cleanup, run the file through the SVG optimizer.