Scalable Vector Graphics

SVG (Scalable Vector Graphics) describes a picture as shapes rather than pixels: paths, circles, text, gradients and colours written as XML text. It can be scaled to any size without getting blurry, which is why it dominates logos, icons, illustrations and charts on the web. You get SVG files from designers, from icon libraries, as exports from Illustrator, Figma or Inkscape, from chart and diagram tools, and as cutting files for Cricut, Silhouette or laser cutters. Every current web browser displays SVG.

History and versions

SVG is a standard of the World Wide Web Consortium (W3C). Work started in 1996 and the first public draft appeared in February 1999.

• SVG 1.0 became a W3C Recommendation in September 2001.
• SVG 1.1 followed in January 2003; its Second Edition (August 2011) is still the version most software targets.
• SVG Tiny 1.2 (December 2008) was a profile for mobile phones.
• SVG 2 has been a Candidate Recommendation since October 2018 and is still being finalised. Browsers already support much of it, editors less.

The media type is image/svg+xml. A gzip-compressed SVG uses the extension .svgz.

What an SVG can contain

• Vector shapes (path, rect, circle…) with fills, strokes, gradients, patterns, clipping, masks and filters such as blur or drop shadow.
• Real text in a named font. The font itself is usually not inside the file, so the result depends on fonts installed where it is displayed.
• Raster images, either embedded as base64 data or linked to a separate file.
• CSS styles, animation and JavaScript. Because an SVG can run scripts, many upload forms, e-shops and mail clients reject it for security reasons.
• Size: width, height and viewBox define the canvas. One CSS pixel is 1/96 inch, so 96 user units make one inch.

How to open and edit SVG

• View: drag the file into any browser. On a phone, open it from the Files app in the browser.
• Edit: Inkscape (free, Windows, macOS, Linux), Adobe Illustrator, Affinity Designer, Figma. LibreOffice Draw handles simpler files.
• Office: Word and PowerPoint in Microsoft 365 insert SVG as graphics.
• Thumbnails in Windows File Explorer: not built in. Microsoft's free PowerToys add SVG previews and thumbnails.
• Since SVG is text, any code editor opens it. Useful for fixing a colour or a size by hand.

Common SVG problems

Text in the SVG has a different font

The font named in the file is not installed on the computer, or converter, that renders it, so a substitute is used. Before sending the file, convert text to outlines: in Inkscape Path → Object to Path, in Illustrator Type → Create Outlines.

Images inside the SVG are missing

They were linked to files on the author's disk or on the web instead of being embedded. Ask for a version with embedded images. Our converter has no internet access and cannot load linked files either.

SVG to PNG is blurry or too small

A PNG has a fixed number of pixels. Our converter renders SVG to PNG at 150 dpi, which makes each SVG pixel 1.5625 PNG pixels. Sizes and details are described in SVG to PNG.

Website or e-shop won't accept SVG

Upload a PNG for images on the web, or a PDF when vectors must stay sharp for print.

How to convert PNG or JPG to SVG

This is tracing, not conversion. Our converter traces raster images in black and white only, which suits logos, signatures and line art. For colour artwork use Trace Bitmap in Inkscape with multiple scans.

Converting SVG

• SVG to PDF, EPS and PS: stays vector, for print shops and layout programs.
• SVG to EMF/WMF for older Office versions, SVG to DXF for CAD and laser cutters.
• SVG to PNG (150 dpi, transparency kept).
• SVG to JPG, WebP, GIF or TIFF: rendered at the size defined in the file and saved in the target format. JPG gets a white background and quality 90.
• Animation and scripts do not carry over to any of these formats; the static first state is rendered.

SVG at a glance

Specifications: SVG 2 and SVG 1.1 Second Edition at the W3C; format history in the Library of Congress description.