SVG Viewer

SVG Viewer and Live Editor

SVG (Scalable Vector Graphics) is an XML-based image format: logos, icons, charts and illustrations are described as shapes, paths and text, so they stay sharp at any size and can be styled with CSS. Because an SVG is just text, it is often shared as code — in a pull request, a design hand-off, an icon library or a support ticket. The SVG Viewer lets you see that code as an image immediately: paste the markup or open an .svg file and the drawing appears next to it.

Features

• Instant preview on a transparent checkerboard, centred and scaled to fit.
• Live editing – change a fill color, a path or the viewBox and watch the result update as you type.
• Open, copy and download – load a file from your computer, copy the cleaned code or save it as a new .svg.
• Safe rendering – <script> elements are stripped and the preview runs in a sandboxed iframe.
• Statistics – character, word and line counts help you spot bloated exports.

Understanding SVG structure

The root element defines the coordinate system with width, height and viewBox. Shapes such as rect, circle and path draw the image, defs holds reusable gradients and clip paths, and g groups elements. Design tools often add metadata, editor namespaces and long decimal numbers; removing them can make an icon several times smaller.

Related tools

Embed the image in CSS or JSON with SVG to Base64 style tools, preview other markup in the HTML Viewer, or encode special characters with the HTML Encoder.