Last Updated: February 25, 2016
· steveniseki

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.

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


An SVG <rect> element represents a rectangle.

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


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

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


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

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


The SVG <line> element is used to draw lines

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


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

    <polyline points="0,0  30,0  15,30"


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

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


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

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


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


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

<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"/>