Examples · SVG file format

Save any example as a .svg file and drop it on the explorer to see its picture, structure tree, tables and any problems.

A minimal file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title>Red circle</title>
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

Namespace, view box, accessible title and one shape

With no width and height the picture takes the size of whatever shows it, in the proportions of the view box. The explorer’s Overview says “none given” for the size and shows the title.

A gradient, a clip path and a marker

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1e3c72"/>
      <stop offset="1" stop-color="#8ec5fc"/>
    </linearGradient>
    <clipPath id="round"><circle cx="100" cy="50" r="48"/></clipPath>
    <marker id="dot" markerWidth="4" markerHeight="4" refX="2" refY="2">
      <circle cx="2" cy="2" r="2" fill="white"/>
    </marker>
  </defs>
  <rect width="200" height="100" fill="url(#sky)" clip-path="url(#round)"/>
  <path d="M20 80 Q100 10 180 80" fill="none" stroke="white" stroke-width="2"
        marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)"/>
</svg>

Three kinds of resource, each used by a url(#id) reference

The Resources tab lists the ids sky, round and dot with their details (“2 stops: #1e3c72 → #8ec5fc”), each referenced once, and every reference as resolved. Rename sky in the fill and the problem list names the broken reference.

A filter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80">
  <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feOffset in="blur" dx="4" dy="4" result="shifted"/>
    <feMerge>
      <feMergeNode in="shifted"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <rect x="20" y="15" width="60" height="40" rx="6" fill="#e04e39" filter="url(#shadow)"/>
</svg>

A drop shadow made from a blur, an offset and a merge

The Paths tab’s Filters table shows the chain “GaussianBlur → blur, Offset → shifted, Merge”. The region is wider than the default so the shadow is not cut off.

Text on a path and a reusable symbol

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 120">
  <defs>
    <path id="arc" d="M10 80 A90 70 0 0 1 190 80"/>
    <symbol id="star" viewBox="0 0 10 10">
      <path d="M5 0 6.5 3.5 10 4 7.5 6.5 8 10 5 8 2 10 2.5 6.5 0 4 3.5 3.5z" fill="gold"/>
    </symbol>
  </defs>
  <text font-family="Georgia, serif" font-size="14">
    <textPath xlink:href="#arc" startOffset="50%" text-anchor="middle">Along the arc</textPath>
  </text>
  <use xlink:href="#star" x="20" y="90" width="20" height="20"/>
  <use xlink:href="#star" x="60" y="90" width="12" height="12"/>
</svg>

The path is in defs, so it is not drawn, and the star is defined once and drawn twice

The Fonts table lists Georgia as an installed font the picture depends on and serif as a generic family. The Paths table gives the arc’s commands and its box.

A small animation

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
  <circle cx="10" cy="20" r="8" fill="#3b82f6">
    <animate attributeName="cx" values="10;90;10" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="fill" values="#3b82f6;#ef4444;#3b82f6" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

Two animations of one circle, with no script

The Code tab lists both animations with attribute, values, duration and repeat. They play in the Picture tab, because browsers play SMIL in an image.

A file with problems

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="20" height="20" fill="url(#missing)"/>
  <circle r="-5"/>
  <path d="M 10 10 L 20"/>
  <use href="#a"/><g id="a"><use href="#a"/></g>
</svg>

One of each kind of problem

The explorer lists: a reference to #missing, a negative radius, path data that ends in the middle of a command, and a use inside the element it draws. Each problem is marked on the element it is about.

Not described

This page is a set of examples, not a description of the format.

Reference: the examples were not rendered in every browser; the pictures they should give are described, not shown. The statements of what the explorer shows are from the viewer’s behaviour on similar built files; these exact examples were not run through it.
Viewer: nothing is drawn by the explorer itself; the Picture tab is the browser’s rendering.

.SVG File Format – Examples