SVGSketch Feature

SVG Viewer Online: Render SVG Code and Files

View SVG online: open a file or paste SVG code to see it rendered, play its SMIL animations, read the markup, and export a PNG. Free, nothing is uploaded.

Open an SVG

Quick answer

Open app.svgsketch.com and drop an .svg file on the empty canvas, or copy SVG code and press Ctrl+V. A file opened on an empty drawing becomes the document and the view zooms to fit it. Press Ctrl+Enter for Interactive Preview to play its SMIL animations and click triggers, press F12 to read the markup in the XML Inspector, and export a PNG from the Export panel if you need an image. Nothing is uploaded.

Open a file or paste the code

Drag an .svg file onto the canvas, or use File > Open... (Ctrl+O). On an empty drawing the file becomes the document, with its own width, height and viewBox, and the view zooms to fit it. The same door opens Adobe Illustrator .ai and .eps files and PDFs, page by page; the Illustrator import page and PDF to SVG cover what those carry over.

Have the code instead of a file, from a web page, a code editor or an icon library? Copy the markup and press Ctrl+V on the canvas, or use Edit > Paste SVG Markup… and paste it into the box. The SVG is added to the drawing as shapes you can click on. Markup that is not valid XML is not guessed at: the dialog says what is wrong and, where the parser reports it, the line and column.

Play and inspect SVG animations

An animated SVG opens paused, so you can look at any frame. Press Ctrl+Enter, or choose Window > Interactive Preview, and the file runs the way a browser shows it: SMIL animations play, and animations that begin on a click start when you click the element. Press Escape to return to editing.

To step through the motion instead, open the Animation tab at the bottom of the editor and use Animation > Play/Pause, or drag the playhead to any moment. Every animated property is a track on the animation timeline, with its keyframes laid out in time.

Inspect SVG elements and attributes

Press F12 for the XML Inspector. It shows the document as elements and attributes, and you can change or remove an attribute right there. The Elements panel lists every shape and group, so an element hidden behind another is one click away.

Select a path to read its geometry: the Path Editor panel shows the d attribute as text and as one row per command.

Review import warnings

When a file uses an element the editor does not support, the import finishes with a warning that says how many things were left out, instead of quietly drawing less. An Illustrator or PDF import also keeps a full report under File > Last Import Report...

Scripts inside an SVG are kept in the file and written back out when you export, but they never run in the editor, so opening a file from an unknown source runs none of its code.

Zoom in on the detail

View > Zoom In (Ctrl++) and View > Zoom Out (Ctrl+-) step the zoom, View > Reset Zoom (Ctrl+0) returns to 100%, and View > Zoom to Fit All Objects frames everything in the drawing. The drawing is vectors at every zoom level, so hairlines and small text stay sharp.

Keep a copy as an image

Open the Export panel (Ctrl+Shift+E) and choose PNG, JPEG or WebP to save the SVG as a picture at 1x to 4x or an exact pixel size, free. How to convert SVG to PNG walks through the settings, and the SVG converter page lists every format.

FAQ

Can I view SVG code without saving it as a file?

Yes. Copy the SVG markup and press Ctrl+V on the canvas, or use Edit > Paste SVG Markup… and paste it into the box. The SVG is added to the drawing as shapes.

Does the viewer play SVG animations?

Yes. Press Ctrl+Enter for Interactive Preview and SMIL animations play, including ones that begin on a click. The Animation tab at the bottom of the editor plays, pauses and scrubs the same animations.

Is it safe to open an SVG from the internet?

Scripts inside an SVG never run in the editor; they are kept in the file and written back out when you export. The file is read in your browser and is not uploaded.

Can I see the SVG source code?

Yes. Press F12 to open the XML Inspector, which shows every element and attribute and lets you edit them.

Is the SVG viewer free?

Yes. Opening, viewing and editing SVG files is free with no account, and so is exporting PNG, JPEG and WebP images.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open an SVG