Open an .svg file or paste SVG markup and see it rendered instantly. Edit the code with a live preview, zoom in on details, check it on light, dark or checkerboard backgrounds, and download it as SVG or PNG.
Last updated:
100%
Paste SVG code or drop an .svg file here
Drop SVG to open
Advertisement
Advertisement
How to use the SVG Viewer
Open or paste your SVG: click Open SVG file, drop a file onto the preview, or paste markup into the code editor.
Watch the preview update as you type. Syntax errors are shown under the editor with the line number.
Zoom and pan with the zoom buttons or slider; scroll the preview area to move around a zoomed image.
Switch the background to the checkerboard to see transparent areas, or to dark to check light artwork.
Download the edited file as .svg, or export a PNG at 1x, 2x or 4x of its natural size.
How SVG size works: width, height and viewBox
An SVG is a text file that describes shapes in XML. Two separate things control how big it looks. The viewBox attribute sets up the internal drawing grid as four numbers, min-x min-y width height: a shape at x="60" in a viewBox="0 0 120 120" sits exactly in the middle. The width and height attributes set the displayed size on the page. When both are present the grid is stretched to fit, keeping its aspect ratio by default (preserveAspectRatio="xMidYMid meet").
This viewer works out a natural size the same way browsers do: it uses width and height when they exist (converting units like pt, mm or in to CSS pixels), falls back to the viewBox size when they are missing, and uses the browser default of 300 × 150 when there is neither. A percentage width cannot be resolved without a container, so it is treated as missing.
Unit conversions used for SVG dimensions
Unit
Meaning
In CSS pixels
px or no unit
CSS pixel (user unit)
1
pt
Point, 1/72 inch
1.333
pc
Pica, 12 points
16
in
Inch
96
cm
Centimeter
37.795
mm
Millimeter
3.7795
em
Font size (assumed 16px here)
16
Quick fixes for SVGs that look wrong
Nothing shows: make sure the root tag has xmlns="http://www.w3.org/2000/svg" when the file is used as an image. This viewer adds it for the preview, but other programs may not.
Artwork is cut off: some shapes fall outside the viewBox. Widen the viewBox or move the shapes. Design tools sometimes export a viewBox that starts at negative coordinates, which is fine.
Icon will not scale with CSS: keep the viewBox and remove fixed width/height, then size it with CSS.
Fonts look different elsewhere: text uses whatever fonts the viewer has installed. Convert text to outlines in your editor for exact rendering.
Large file: editor metadata, long decimal numbers and hidden layers add weight. Run the file through an SVG optimizer before publishing.
Invalid XML: a bare & in text or an attribute must be written as &, and every tag must be closed (<path … />).
Frequently asked questions
How do I open an SVG file online?
Click Open SVG file and choose the .svg from your device, or drag it onto the preview area. The file is read locally by your browser and never uploaded.
Why does my SVG show up blank?
Common causes are a missing xmlns="http://www.w3.org/2000/svg" attribute, shapes drawn outside the viewBox, white artwork on a white background, or fill set to none. Try the dark or checkerboard background and check the viewBox numbers shown in the info panel.
Does the viewer run JavaScript inside the SVG?
No. The preview is rendered as an image, and browsers never run scripts or load external resources inside SVGs displayed as images. That makes it safe to inspect files from unknown sources.
What is the difference between width/height and viewBox?
The viewBox defines the internal coordinate system (min-x, min-y, width, height) that shapes are drawn in. The width and height attributes set the displayed size. If width and height are missing, the viewBox size is used as the natural size.
Can I convert the SVG to PNG here?
Yes. Choose a scale (1x, 2x or 4x) and click Download PNG. The SVG is drawn on a canvas at that size, with a transparent background unless you pick a solid background color.
Why do external fonts or images not appear in the preview?
SVGs shown as images cannot load external files such as web fonts or linked images. Embed images as data URIs and convert text to paths for a file that looks the same everywhere.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.