Elements

The two main drawing elements in SVG are path and text. There is a set of basic shape drawing elements like 'rect' that are essentially shorthand forms for the path element.

In this tutorial the following basic graphical elements are detailed (there are more like tref, marker, ...):

• Rectangle: <rect>
• Circle: <circle>
• Ellipse: <ellipse>
• Line: <line>
• Polyline: <polyline>
• Polygon: <polygon>
• path: <path>
• text: <text>
• image: <image>
• link: <a>

Notes:

• Pay attention to the self closing tag "/>" at the SVG elements (slash immediately before the closing right angle bracket).
• In the following texts, the default units are used, which are pixels.
  You can also specify values using other units. The supported length unit identifiers in SVG are: em, %, px, pt... .
• If SVG size is not specified inside the svg tag, its size is 100% of the SVG parent container. In addition, the size of SVG can be defined by CSS. This way is preferred on the static size definition inside the svg tag.
• The elements take different attributes to describe their size and position and additional properties. Most graphical elements have:
  • fill attribute, which fills the shape with color.
  • stroke attribute, which sets the stroke color, stroke-width and additional stroke attributes.
    For more about fill and stroke see Stroke and Fill Tutorial.

<svg width="100" height="50" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <rect x="10" y="10" width="50" height="30"/>
</svg>
<svg width="100" height="50" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <rect x="10" y="10" rx="10" ry="10" width="50" height="30"/>
</svg>

Rectangle

Rectangle main attributes are:

• x - The x position of the top left corner of the rectangle.
• y - The y position of the top left corner of the rectangle.
• width - The width of the rectangle
• height - The height of the rectangle
• rx - The x radius of the corners of the rectangle
• ry - The y radius of the corners of the rectangle

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <circle cx="50" cy="50" r="20"/>
</svg>

Circle

Circle main attributes are:

• The coordinates cx and cy refer to the position of the center of the circle. The default is (0, 0).
• The r attribute defines the radius of the circle.

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <ellipse cx="50" cy="50" rx="30" ry="20" stroke="black" fill="none" />
</svg>

Ellipse

Ellipse is similar to circle with two radius rx and ry.

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <line x1="10" y1="90" x2="50" y2="20"
            stroke="black" stroke-width="7" stroke-linecap="round" />
</svg>

Line

Line has x1, y1 nad x2, y2 coordinates, which specify the start and end point of the line.

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <polyline
            points="10 90, 50 20, 30 40, 60 80" stroke="black" fill="none" />
</svg>

Polyline

Is a group of connected lines. It contains a list of points, each number separated by a white space. Each point must contain two numbers, an x coordinate and a y coordinate. So the list (0,0), (1,1) and (2,2) could be written: "0 0, 1 1, 2 2".

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <polygon
    points="10 90, 50 20, 30 40, 60 80" stroke="black" fill="none" />
</svg>

Polygon

Like polyline, where the last point is automatically connected to the first one.

<svg width="100" height="100" style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <path
        d="M50 0 L75 20 L25 100 Z" stroke="black" fill="green" />
</svg>
<svg width="100" height="100"style="border: 1px solid rgba(0, 0, 0, 0.2)">
    <path
        d="M100 200  Q250 100 400 200 T600 200"
        fill="none" stroke="#000" stroke-width="20" />
</svg>

Path

Path is a general shape. SVG paths come with a set of commands that enable you to draw pretty much any shape you want. However, simple shape elements (<line>, <circle>, < rect>, <ellipse>, <polygon> and <polyline>) are there for many reasons, and they are more readable, maintainable, animatable, editable by hand than their <path> alternatives.

The following commands are available for path data:

• M = moveto absolute or m = move relative with offset dx dy.
  Establish a new point, as lifting a pen and starting to draw in a new location on paper would.
• L = lineto absolute or l relative.
  Draw straight lines from the current point to a new point.
• H, h = horizontal lineto.
  Draw a horizontal line from the current point.
• V, v = vertical lineto.
  Draw a vertical line from the current point.
• C, c = curveto
• S, s = smooth curveto
• Q, q = quadratic Bézier curve
• T, t = smooth quadratic Bézier curveto
• A, a = elliptical Arc
• Z, z = closepath.
  Ends the current subpath and results in a straight line being drawn from that point to the initial point of the path.

There are always two versions of the same drawing command :

• in upper case : absolute coordinates (with respect to the overall coordinate system)
• in lower case : relative coordinates

There are three groups of commands that draw curved paths: Cubic Bézier (C, c, S, s), Quadratic Bézier (Q, q, T, t), and Elliptical arc (A, a). For more see A Closer Look at SVG Path Data.

See also Path Specification and The SVG 'path' Syntax: An Illustrated Guide for more details.

Text

The second most important drawing element after the path is text. It has a large number of styling properties.

The three main types of text that can be generated are:

• Text defined just using the text element.
• Text that uses the tspan element to vary the properties and attributes being used in the text presentation.
• Text where the path is defined by the textPath element.

The position of the text is determined by the x and y attributes of the text element. The x-attribute determines where to locate the left edge of the text (the start of the text). The y-attribute determines where to locate the bottom of the text (not the top). Thus, there is a difference between the y-position of a text and the y-position of lines, rectangles, or other shapes.

Example:

<svg width="570" height="100">
    <text x="0" y="15"
    stroke="#d30b0b" fill="none">
        I AM SVG TEXT
    </text>
</svg> 

Example: Multiline Text uses tspan attribute.

<svg width="570" height="100">
    <text x="0" y="12" >First Line</text>
    <text x="0" y="30" fill="rgb(121,0,121)">Second Line
       <tspan x="0" y="50" font-weight="bold">Third Line</tspan>
       <tspan x="0" y="90" font-size="3em">Last Line</tspan>
    </text>
</svg>

Example: Text on a path.

<svg>
    <defs>
        <path id="textPath" d="M15 50 C10 0 90 0 90 50" />
    </defs>
    <text fill="#d30b0b" font-size="20" font-family="fantasy">
        <textPath xlink:href="#textPath">Text on a Path</textPath>
    </text>
</svg>

<svg>
    <defs>
        <path id="s3" d="M 50,50 A 20,20 0 0 1 90,50 A 40,40 0 0 1 10,50 A 60,60 0 0 1 130,50" />
    </defs>
    <text font-size="20" font-family="fantasy" fill="#d30b0b">
        <textPath xlink:href="#s3">
            Text on a spiral path looks very very crazy!!!
        </textPath>
    </text>
</svg>

Image Tag

The SVG <image> element is used to embed bitmap images inside your SVG image. This way you can draw on top of, or next to, the bitmap image.

Example:

<svg>
    <g style="mix-blend-mode: multiply;">
        <image x="0" y="0" width="120" height="80"  xlink:href="images/dog-icon.png" />
        <text x="0" y="95" stroke="#d30b0b" stroke-width="3" font-size="46" fill="none">My Dog</text>
    </g>
</svg>

Linking

Linking in SVG is much the same as in HTML. SVG has an a element that indicates the hyperlink and defines where the link goes.

Example:

<svg>
    <a xlink:href="https://www.w3.org/TR/SVG/linking.html#AElement" target="_blank">
        <rect width="200" height="40" fill="#fccece" stroke="#ed7575" />
        <text x="70" y="25" stroke="#d30b0b" >Press Me</text>
    </a>
</svg>