SVG (Scalable Vector Graphics)

SVG describes images as shapes, paths, text and gradients in XML instead of as a grid of pixels. An SVG image scales to any size without losing sharpness, and its file size depends on the complexity of the drawing, not on its pixel dimensions. It’s the standard format for icons, logos, charts, maps, diagrams and illustrations on the web, and every web browser renders it natively.

Because SVG is XML text, you can write it by hand, generate it from code, style it with CSS, change it with JavaScript in a web page, compress it well with gzip or Brotli, and keep it in version control. Desktop apps (Inkscape, Illustrator, Figma, Affinity) use it as an exchange format for vector artwork.

When to use SVG#

• Use for logos, icons, UI graphics, charts, diagrams, maps and line art: one file looks sharp on every screen size and pixel density.
• Use when you generate graphics from code (charts, badges, QR codes, plots): writing SVG text is simpler than drawing pixels.
• Use when the image must be styled or animated with CSS or scripted in a web page.
• Avoid for photos and images with lots of fine detail: use JPEG, WebP or AVIF. A photo traced into SVG is huge and slow to render.
• Avoid as a print exchange format with exact color requirements (CMYK, spot colors): use PDF.
• Avoid accepting SVG uploads from users unless you sanitize them: an SVG file can contain JavaScript (see Security).

File structure#

An SVG file is an XML document with an <svg> root element in the http://www.w3.org/2000/svg namespace. A complete, minimal file:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <title>Example</title>
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4a90e2"/>
      <stop offset="1" stop-color="#ffffff"/>
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#sky)"/>
  <circle cx="150" cy="40" r="25" fill="orange"/>
  <path d="M0 100 L60 50 L110 90 L150 60 L200 100 Z" fill="#2e8b57"/>
  <text x="10" y="25" font-family="sans-serif" font-size="16">Hello, SVG</text>
</svg>

• The <?xml ...?> declaration is optional. The xmlns attribute is required when the file is used as a standalone image (in <img>, as a file); inline <svg> in HTML doesn’t need it.
• Elements are drawn in document order: later elements paint over earlier ones. There is no z-index.
• Coordinates are user units; the y axis points down, the origin is the top-left corner.

Size and viewBox#

• width and height set the size of the image (in px if there is no unit; mm, cm, in, pt, % also work). 1 in = 96 px.
• viewBox="min-x min-y width height" sets which rectangle of the user coordinate system is visible. The renderer scales it to fit width x height.
• preserveAspectRatio (default xMidYMid meet) controls how the viewBox is aligned and scaled when the aspect ratios differ. none stretches.
• A file with only viewBox and no width/height has no intrinsic size: browsers make it fill the container, and converters fall back to a default or the viewBox size. Set both for files used outside the web.

Elements#

Styling uses presentation attributes (fill="red"), the style attribute (style="fill:red") or CSS in a <style> element. CSS overrides presentation attributes. transform="translate(10 20) rotate(45) scale(2)" applies to any element or group.

Path data#

The d attribute of <path> is a compact list of commands. Uppercase commands use absolute coordinates, lowercase are relative to the current point.

Example: M10 10 h80 v80 h-80 Z draws a 80 x 80 square. Commas and spaces are interchangeable, and a repeated command letter can be omitted.

SVGZ#

An .svgz file is an SVG file compressed with gzip, so it starts with the gzip signature 1F 8B 08. SVG text compresses well (often 50-80% smaller). Web servers usually compress .svg on the fly instead; if you serve .svgz files, send Content-Type: image/svg+xml and Content-Encoding: gzip, or browsers show garbage.

Profiles and versions#

Write href="..." for SVG 2 renderers and xlink:href="..." (with xmlns:xlink="http://www.w3.org/1999/xlink") when older renderers must read the file.

Making SVG files smaller#

• Run the file through SVGO (command line, Node.js) or its web front end SVGOMG. It removes editor metadata, comments and hidden elements, merges paths and rounds coordinates.
• Save as “Plain SVG” or “Optimized SVG” in Inkscape: the default “Inkscape SVG” keeps inkscape: and sodipodi: attributes needed only for editing.
• Reduce coordinate precision: 1-2 decimal places are enough for icons drawn on a 24 x 24 grid.
• Reuse shapes with <symbol> and <use> instead of copying them.
• Don’t embed raster images as base64 data: URLs unless the file must be self-contained.
• Let the web server compress SVG with gzip or Brotli.

Converting SVG#

Rasterize SVG to PNG or convert it to PDF from the command line:

# librsvg
rsvg-convert -w 512 in.svg -o out.png
rsvg-convert -f pdf -o out.pdf in.svg
# resvg
resvg -w 512 in.svg out.png
# Inkscape 1.x
inkscape in.svg --export-type=png --export-width=512 --export-filename=out.png
inkscape in.svg --export-type=pdf --export-filename=out.pdf
# ImageMagick (uses its own renderer or librsvg)
magick -density 192 -background none in.svg out.png

Renderers differ in how much of SVG they support, especially text, filters and CSS. The resvg test suite support table compares browsers and libraries.

Security#

SVG is a document format, not just a picture, and needs care when it comes from untrusted users:

• Scripts: <script> elements, event attributes like onload, javascript: links and <foreignObject> with HTML run JavaScript when the SVG is opened directly in a browser, embedded inline or loaded with <object>/<iframe>. Browsers don’t run scripts in SVG loaded with <img> or as a CSS background image.
• Cross-site scripting: a user-uploaded .svg served from your domain as image/svg+xml runs with your site’s origin. Serve uploads from a separate domain, with Content-Security-Policy: script-src 'none' or Content-Disposition: attachment, or sanitize them (for example with DOMPurify or PHP’s svg-sanitizer).
• XML attacks: DOCTYPE entities enable XML external entity (XXE) file disclosure and “billion laughs” memory exhaustion. Use parsers that don’t resolve external entities (see the OWASP XXE cheat sheet).
• External resources: <image href="file:///...">, <use href="http://..."> and CSS @import can read local files or make network requests during server-side rendering. Most libraries (librsvg, resvg, JSVG, CairoSVG) restrict or disable external loading by default; keep it that way for untrusted input.
• Resource exhaustion: deeply nested <use> references, huge filters and enormous width/height can freeze a renderer. Set limits on output size and rendering time.

Specifications and documentation#

• Scalable Vector Graphics (SVG) 2 (W3C Candidate Recommendation)
• Scalable Vector Graphics (SVG) 1.1 Second Edition (W3C Recommendation, 2011)
• SVG Tiny 1.2 (W3C Recommendation)
• SVG 2 editor’s draft: the latest working text
• image/svg+xml media type registration (IANA)
• MDN SVG reference: elements, attributes and tutorials
• resvg SVG support table: feature support in browsers and libraries
• SVG on Wikipedia

Software that opens SVG files#

Libraries#

Open-source libraries that render, parse and generate SVG. See all SVG libraries for a comparison.

Related formats#

• PDF: vector page format for documents and print; converters turn SVG into PDF and back
• EPS: older PostScript-based vector format for print
• PNG: raster format SVG is most often converted to for places that can’t render SVG
• ICO: Windows icons, often generated from an SVG source at several sizes