SVG Viewer
Preview an SVG, read its dimensions, colours and fonts, check it for scripts, and copy it as a data URI, CSS or PNG.
- Live code preview
- Colours & fonts
- Safety check
- PNG & data URI
Details
- Size
- 240 × 240 px
- width / height
- 240 / 240
- viewBox
- 0 0 240 240
- File size
- 691 B
- Elements
- 9
- IDs
- 1
- Embedded images
- 0
Colours (4)
Fonts
Inter, Arial, sans-serif
Elements
- stop ×2
- svg ×1
- defs ×1
- linearGradient ×1
- rect ×1
- circle ×1
- path ×1
- text ×1
Safety check
No scripts, event handlers or external resources found.
The preview is drawn as an image, so scripts never run here.
Embed and export
What is an SVG viewer?
SVG (Scalable Vector Graphics) is an XML text format for icons, logos and illustrations that stay sharp at any size. Double-clicking an .svg often opens it in a code editor or a browser tab with no information about the file. This viewer shows the image and the code side by side, so you can edit the code and watch the preview update. It reports the real rendering size (from width, height and viewBox), the file and gzipped size, which elements and colours it uses and which fonts it needs, and warns about scripts or external resources. When it looks right, copy it as a data URI, Base64, CSS or React component, or save it as a PNG.
How to view an SVG file
- Choose Open File (or drop an .svg or .svgz), or paste SVG code into the editor.
- Zoom, fit and switch the background to check edges and transparency.
- Read the size, colours, fonts and safety check below the preview.
- Copy an embed format or download the SVG or a PNG.
Tips for clean SVGs
- Always keep a viewBox: it lets the SVG scale; width and height alone fix its size.
- Use fill="currentColor" so an icon takes the text colour of its surroundings.
- Remove editor metadata (Inkscape, Illustrator, Sketch) before shipping: tick “Remove comments, metadata and editor data”.
- Text in SVGs depends on installed fonts; convert text to paths for logos.
Why use this SVG viewer
- Everything about the fileReal size from width, height and viewBox (mm, pt and in converted to px), file size and gzipped size, element counts, colours with one-click copy, and fonts.
- Safe preview and safety checkThe SVG is shown as an image, so embedded scripts cannot run, and the safety check flags scripts, event handlers, javascript: links and external resources.
- Ready-to-paste codeCopy a URL-encoded data URI, Base64, a CSS background or recolourable CSS mask, an <img> tag or a React component, or download PNG at 1×, 2× or 4×.
- Nothing leaves your browserSVG files are read and rendered locally, so logos, icons and client artwork are never uploaded.
Common uses
- Icon checks. Confirm an icon’s viewBox and colours before adding it to a design system.
- Downloaded artwork. Check a stock or AI-generated SVG for hidden scripts or tracking links.
- Quick fixes. Change a colour or size in the code and see the result immediately.
- Hand-off. Export PNGs for people who cannot use SVG.
More SVG tools: convert SVG to PNG or SVG to JPG in bulk, make an ICO icon from SVG, or encode any file with the Base64 encoder.
Example: checking a logo
The sample badge is 240 × 240 px with a matching viewBox, 9 elements, 4 colours (two gradient stops, a yellow sun and white) and uses Inter with Arial as a fallback. The safety check finds nothing to worry about.
What to expect from the result
The preview uses your browser’s SVG renderer, so filters and fonts may differ slightly from Illustrator or Inkscape. External images are blocked in image previews, as on real websites.
SVG Viewer questions
How do I open an SVG file?
Choose Open File or drag the .svg onto the page. The image appears next to its code; .svgz (gzip-compressed SVG) files work too.
How do I find the size of an SVG?
The Details panel shows the width and height attributes, the viewBox, and the size the SVG will render at in pixels, converting mm, cm, in and pt units.
Can an SVG contain a virus?
An SVG can contain JavaScript that runs when the file is opened directly in a browser or inlined in a page. This viewer shows SVGs as images, where scripts never run, and the safety check lists any scripts or event handlers it finds.
Can I convert SVG to PNG here?
Yes. Use the PNG 1×, 2× or 4× buttons. For batches and custom widths, use the SVG to PNG converter.
Is my SVG uploaded?
No. The file is opened and rendered in your browser. Nothing is sent to a server.