Last Updated: December 30, 2020

A quick SVG guide

SVG is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browsers, (IE 9+, Chrome and Firefox, Opera) all support SVG natively. This is just a quick reference on some common svg elements. Most of these examples are from jenkov's svg tutorial. Check out the svg documentation for more info

g (group)

The SVG <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape.

<svg>        
    <g>
      <circle cx="30" cy="30" r="15" style="stroke:#000; fill:#000"/>
      <rect x="50" y="20" height="50" width="75"
          style="fill: #000"/>
    </g>    
</svg>

rect

An SVG <rect> element represents a rectangle.

<svg>
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#006600; fill: #000"/>
</svg>

circle

The SVG <circle> element is used to draw circles.

<svg>
  <circle cx="40" cy="40" r="24" style="stroke:#000; fill:#000"/>
</svg>

ellipse

The SVG ellipse element is use to draw ellipses with the x an d y definition for the radius defined

<svg>
  <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: #ff6666;"/>
</svg>

line

The SVG <line> element is used to draw lines

<svg>
<line x1="0"  y1="10" x2="0" y2="100" style="stroke:#006600;"/>
</svg>

polyline

The SVG <polyline> element is used to draw multiple connected lines

<svg>
    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

path

The SVG <path> element is used to draw advanced shapes combined from lines, arcs, curves etc. with or without fill.

<svg>
    <path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/>
</svg>

text

The SVG <text> element is used to draw text in an SVG image.

<svg>
  <text x="20" y="40">Example SVG text 1</text>
</svg>

animations

It's possible to animate shapes in an SVG image. There are several different ways to animate SVG shapes, including:

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>

Here is a simple example of animating a circle to move along the x axis.

<svg>
<circle cx="30" cy="30" r="25" style="stroke: none; fill: #000;">
    <animate attributeName="cx" attributeType="XML" from="30"  to="470" begin="0s" dur="5s" fill="remove" repeatCount="indefinite"/>
</circle>
</svg>

#svg