What Is SVG? A Guide to the Vector Format

SVG is an image format made of drawing instructions rather than pixels. When a logo, icon or chart is saved as SVG, the file contains commands like "draw a curve from this point to that point and fill it with this color". That is why SVG stays sharp at any size, is often tiny and can be opened and edited in a text editor. This article covers SVG's place among the W3C standards, the structure of the file, browser and software support, its security risks and how to convert between SVG and PNG or JPG.

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based W3C standard for describing two-dimensional vector graphics. The extension is .svg and the MIME type is image/svg+xml. A gzip-compressed variant uses the .svgz extension.

Raster formats (JPG, PNG, WebP) store a picture as a fixed grid of pixels; enlarge it and the pixels become visible. SVG describes shapes mathematically, and the browser or program redraws them at whatever resolution the screen has. MDN's image format guide calls SVG an ideal choice for images that can be represented as drawing commands, especially when the display size is unknown or varies, and notes it is generally not useful for photographs.

History: SVG 1.0, 1.1 and SVG 2

• 4 September 2001: SVG 1.0 was published as a W3C Recommendation.
• 14 January 2003: SVG 1.1 became a Recommendation. 1.1 split the language into modules, which made subsets such as mobile profiles easier to define.
• 16 August 2011: SVG 1.1 Second Edition was published. It is the stable version browsers build on today.
• SVG 2: According to the W3C publication history, working drafts appeared from 2012 and the first Candidate Recommendation Snapshot was published on 15 September 2016. The latest snapshot is dated 6 October 2026; the document is still at the Candidate Recommendation stage.

SVG 2 builds on 1.1 Second Edition and aims at better integration with HTML and CSS. Some topics such as filters, masking and fonts moved into separate CSS and FX modules. In practice browsers implement parts of SVG 2, so do not assume every feature works everywhere.

Structure of an SVG file

A simple SVG file looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Coordinate system: viewBox, width and height

viewBox defines the drawing's internal coordinate system (0 to 100 here). width and height set how much room the drawing takes on the page. An SVG with a viewBox scales proportionally to any size you give it in CSS. Files without a viewBox can get cropped when resized, one of the most common logo mistakes.

Core elements

• Shapes: rect, circle, ellipse, line, polyline, polygon and path, which can draw anything.
• Text: text and tspan. Text stays selectable and searchable, but if the font is missing on the viewing device a fallback font is used.
• Grouping and reuse: g, defs, symbol, use. Icon sets are often bundled as symbol elements in one file.
• Painting: solid colors, linear and radial gradients, patterns, clipping paths, masks and filters (blur, drop shadow).
• Style and animation: CSS can style SVG; CSS animations and SMIL animation elements add motion.
• Embedded content: image for raster pictures, foreignObject for HTML and script for JavaScript.

Color, transparency, layers and pages

Transparency is native in SVG: anything not drawn is empty, and opacity and fill-opacity define semi-transparency. Layers are represented by g groups; Inkscape and Illustrator store their layers that way. Colors are sRGB by default, and there is no bit depth limit in the usual sense because colors are written as numbers. SVG is not a multi-page document format; for multi-page drawings PDF is a better fit.

Support across browsers, systems and software

According to MDN, Chrome, Edge, Firefox, Opera and Safari all support SVG. You can use it through <img>, as a CSS background-image, inline inside HTML, or with <object> and <iframe>. Vector tools such as Inkscape, Adobe Illustrator, Affinity Designer and Figma read and write SVG, and current versions of Microsoft Office let you insert SVG graphics.

Support is weak elsewhere: many social networks, e-mail clients, messaging apps and upload forms reject SVG or show no preview. Part of the reason is the security risk described below.

Security: treat SVG like a document

SVG is an XML document and can contain a script element, event attributes (such as onload) and external references. MDN's "SVG as an image" page explains that when SVG is used via <img> or a CSS background, browsers disable JavaScript and do not load external resources such as images or stylesheets. Those restrictions do not apply when the file is opened directly or embedded with <iframe>, <object> or <embed>.

The practical consequence: if a site lets users upload SVG files and serves them directly from its own domain, a script embedded in the file can run in that site's context (stored XSS). Typical mitigations:

• Run uploaded SVG through a sanitizer that removes script, event attributes, foreignObject and external links.
• Serve user files from a separate domain, with a strict Content-Security-Policy, or as downloads (Content-Disposition: attachment).
• If you do not need the vector, convert uploaded SVG to PNG on the server and publish only the raster version.

Typical uses

• Logos and brand assets: one file stays sharp from business cards to billboards.
• Interface icons: colorable with CSS and never blurry on high-density screens.
• Charts, maps and diagrams: libraries such as D3.js draw data straight into SVG elements.
• Favicons: current browsers accept SVG favicons through <link rel="icon" type="image/svg+xml">.
• Cutting and printing: laser cutters, vinyl cutters and embroidery machines work with vector paths.

Strengths and weaknesses

Common problems and how to fix them

A site or app will not accept SVG

The easiest fix is a PNG copy. Our SVG to PNG converter renders the drawing into a transparent PNG in your browser, at the pixel width you choose. Your file is not uploaded and never leaves your device.

Text shows up in a different font

SVG does not embed fonts by default; if the viewing system lacks the font, a fallback is used. In an image context external fonts are not loaded either. Convert text to outlines in your design tool, or embed the font.

The SVG is the wrong size or cropped on the page

Without a viewBox, or with fixed width/height, scaling does not behave as expected. Add a viewBox that covers the drawing to the root svg element and set the size in CSS.

The file is larger than expected

Design tools write editor metadata, excessive decimal places and hidden layers into SVG. An optimizer such as SVGO strips them. Gzip or Brotli compression on the server shrinks text-based SVG further.

I need my PNG logo as an SVG

A raster image cannot truly be "converted" to vector; what tools do is tracing: shapes are detected and redrawn as outlines. Our PNG to SVG and JPG to SVG tools trace with 2 to 8 colors. Results are good for simple logos and drawings and rough for photos. With these tools the file is uploaded to our servers over a secure connection, traced there and deleted within 30 minutes at the latest.

Conversion tips

• Know the target size: When rendering SVG to PNG, pick the largest size the image will be shown at, doubled for high-density screens. In our tool the longest side can be up to 4096 pixels; if you leave the width empty, small drawings are scaled so the longest side is 1024 pixels.
• JPG for photo content: If the SVG embeds a photo and you do not need transparency, JPG or WebP is smaller than PNG; you can convert the PNG afterwards in the image converter.
• Favicons: If your logo is an SVG, the favicon generator accepts it and adds icon.svg to the package.
• Clean source for tracing: When creating SVG from PNG, start with a high-resolution, flat-colored, noise-free image.

Frequently Asked Questions

What is the difference between SVG and PNG?

A PNG is a fixed number of pixels and gets blurry when enlarged. An SVG describes shapes and is redrawn sharply at any size. SVG suits logos and icons; PNG or JPG suits photos and screenshots.

Can an SVG file contain a virus?

SVG is not an executable program, but it can embed JavaScript. Scripts do not run when the SVG is shown as an image (<img>), but they can run when the file is opened directly in a browser. Inspect SVG from unknown sources in a viewer, or convert it to PNG, rather than opening it directly.

Can I insert SVG into Word or PowerPoint?

Current versions of Microsoft Office support inserting SVG. For older versions, or if you will share the file with other programs, a PNG copy is safer.

Does converting SVG to PNG lose quality?

PNG is lossless, but the drawing is fixed to a pixel size. Pick a large enough width and you will not notice any loss; enlarging the PNG later will blur it.

Does SVG support animation?

Yes. Motion can come from CSS animations, SMIL animation elements and JavaScript. Converting to PNG gives you a single frame.

Sources

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 publication history
• MDN: SVG as an image
• MDN: Image file type and format guide