Understanding structure of a svg document

SVG is a great image format. You can style and animate it using CSS and make it interactive using Javascript. In this document, I try to explain the most used parts of an SVG document.

The document skeleton:

Every SVG document is usually enclosed with an opening and closing <svg>.

<svg  xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
</svg>

The <svg> tag has usually the following attributes:

xmlns:

The xmlns attribute defines the namespace of svg (and other xml) documents.

Width and height:

Width and height defines as (you guessed it correctly) width and height of SVG.

The viewBox:

The viewBox property defines portions of the SVG which is visible, it takes four values. The first value defines the point at x axis to start showing from, the second value is the point at Y axis to should start showing from. The third value defines how many units are visible on x axis and fourth value defines how many units are visible in Y axis.

So if you want to start at point 30 of X axis and point 50 of Y axis, show 40 pixels from X axis and 90 pixels from Y you would write viewBox=“30 50 40 90”. For an interactive demonstration of viewBox visit this page or read more about it on mdn

Some common SVG tag attributes:

Before we start to learn SVG tags, lets learn some attribute shared across all SVG tags.

Every SVG tag can have an X and Y attribute, the X and Y attributes define where in the SVG document should the element be placed.

Some of SVG tags have a with and height attribute as well.

Most SVG tags have a fill and stroke attribute. Fill defines background color and stroke defines border color of SVG elements

SVG documents have a definition area where you write css styles, svg filters, svg animations and other graphics for reuse inside svg document.

Definition areas of an SVG document is similar to head tag in HTML document. Definition area begins with an opening <defs> tag and ends with a closing </defs> tag. Everything between opening and closing defs tag is not shown in SVG output.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
   <defs>
      <style>.class-one{fill:#1d1d1b;}</style>
      <linearGradient id="myGradient" gradientTransform="rotate(90)">
         <stop offset="20%" stop-color="gold" />
         <stop offset="90%" stop-color="red" />
      </linearGradient>
   </defs>
</svg>

SVG group tag

The group tag is similiar to <div> in HTML. it is used to group SVG tags (for example to style all of them together).

In the following example we wrap two circles in a <g> tag to give them a red background (fill).

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
    <defs>
        <style>.bg-red{fill:red;}</style>
    </defs>
    <g class="bg-red">
        <rect x="12.14" y="12.61" width="475.77" height="475.77"/>
        <rect x="12.14" y="12.61" width="475.77" height="475.77"/>
    </g>
</svg>

SVG text tag <text>

In HTML you can define text anywhere without a wapper. in SVG the <text> tag is used to add text to the document.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
    <text x="20" y="35">Hi, how are you</text>
</svg>

SVG anchor tag <a>

SVG anchor <a> tag is similiar to the <a> HTML tag. The following example links the text Google to google.com

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
 <a href="https://google.com">
    <text x="50" y="90" >
      Google
    </text>
  </a>
</svg>

SVG image tag

The <image> tag in svg is similiar to <img> tag in HTML. It shows a bitmap image (jpg or png for example) or a vector image (another SVG file). You define the source of the image using xlink:href attribute.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
   <image xlink:href="https://source.unsplash.com/WLUHO9A_xik/300x300" height="200" width="200"/>
</svg>

SVG circle tag

SVG circle tag draws a circle. The cx(center x) and cy(center y) attributes define the position of circle center point on x and y coordinates of SVG document.

The r (radius) attribute defines radios of SVG document. If you wanted to make the circle bigger (for example), you can increase the radius.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
  <circle cx="100" cy="100" r="90"/>
</svg>

SVG rectangle tag

SVG rectangle tag draws a rectangle. It does not have a special attribute, we have already discussed what the x, y, width and height attributes do.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
  <rect x="10" y="10" width="120" height="120" />
</svg>

SVG line tag <line> draws a straight line. it has four attributes. x1defines where the line begins in X axis and x2 defines where the line ends in X axis. similiarly y1 and y2 defines where the line begins and ends in y axis

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
    <line class="cls-1" x1="46.24" y1="115.59" x2="397.72" y2="115.59" style="stroke: #1d1d1b;" />
</svg>

SVG ellipse tag <ellipse>

SVG ellipse tag <ellipse> draws an ellipse. it has four attributes. cx defines position of ellipse center on X axis and cy defines position of elipse center on Y axis. rx defines ellipse radius on X axis and ry defines ellipse radius on Y axis.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
	<ellipse class="cls-1" cx="207.18" cy="210.56" rx="123.67" ry="77.22" />
</svg>

SVG polygon tag <polygon>

SVG polygon tag <polygon> draws a polygon. The “points” attribute in polygon defines the position of points in polygon. you can give it as many points as you need. Every two points define a point in polygon. The first value in points attribute defines point 1 position in X axis, the second value defines point 1 position on Y axis, value 3 defines position of point 2 in X axis and value 4 defines position of point 2 in Y axis.

Polygons are always closed paths.

So for example points=“121 121 45 45 83 183” means, we want to have four points. point one begins at x axis at 121px and y axis 122px. point two begins at x axis at 45px and y axis 46px. point three begins at x axis at 83px and y axis 183px.

See the illustration below for a visual representation of above mentioned example.

An example of SVG polygon

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
    <polygon points="121 122 45 46 83 183" />
</svg>

SVG Polyline tag <Polyline> SVG Polyline tag is similiar to polygon tag, except that it can draw open shapes. It has a points attribute and it works exactly like polygon’s points attribute.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
	<polyline points="112 104 314 165 116 201 265 225" style=" fill: none; stroke: #1d1d1b;" />
</svg>

SVG path tag <path> SVG path tag <path> draws paths. It is the most flexible tag. It has “d” (data) attribute which defines the shape of the path.

Have a look at the example below, we will explain what all those values in d attribute mean.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
	<path d="M86,78c0,29,78,56,131,25" style="fill: none; stroke: #1d1d1b;" />
</svg>

Lets learn the syntax for the d attribute.

There are two types of commands that you can give the d attribute:

Line commands Curve commands Line commands: The line commands are used to draw straight lines in paths.

The following five line commands are available in SVG:

M (Move To): Move to defines where the path should start drawing from (It is like moving pen to a point where you want to draw in). It takes two values, a location in X coordinate and a location in Y coordinate to start drawing from.

L (Line To): Line To draws a simple straight line. It takes two values, an x coordinate and a y coordinate, these coordinates defines till what point the line should get drawn.

For example , we have a SVG with a simple shape. Using M (move to ) we have defined that we want to start drawing from point 0 of x and 0 of y coordinate d=“M0 0” now we want to draw a line upto 200px in x axis and 0 in y axis d=“M0 0 L200 0”.

<svg height="210" width="400">
    <path d="M0 0 L200 0" style="stroke: black;"/>
</svg>
<svg height="210" width="400">
    <path d="M0 0 L200 0" style="stroke: black;"/>
</svg>

This should draw a straight line.

Instead of using L with two attributes, you can define coordinates separately with H (horizontal line) and V (vertical line) as well. For example L200 0 is exactly same as H 200 V 0 .

Z: Z command closes a path. You can draw your paths using other commands (discussed earlier) and Z closes the path by drawing a straight line.

Curve commands With Curve commands, you can draw smooth paths. There are two types of curve commands

Bezier Curves Arcs Bezier Curves There are two types of bezier curves available. Cubic bezier curves © and quadratic bezier curves (Q).

Cubic bezier curves: Cubic bezier has two commands, a C and a S command. The C command accepts three value sets, each value set takes an x and a y value. The first two value sets define two handles and third valueset defines the point where the path ends.

<svg x="0" y="0" viewBox="0 0 500 500" style="fill: none; stroke: black;" >
  <path class="st0" d="M 129,270 C 129  173, 339  203, 348 270" />
</svg>

The s command is used to continue drawing began witt C or another S command. It takes two value sets, the first value set defines x and y of second handle (The first handle is continuation of drawing defined in C command) and the second handle defines the end point of the shape.

Quadratic curves: Quadratic Curves takes two value set. Unlike bezier curves which has separate value set for controlling both handles separately, in Quadratic Curves we have one curve which controls both handles.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="transparent">
	<path d="M 5 100 Q 80 00 150 100"  />
</svg>

The T command takes only one value set, it continues drawing started by other commands.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="transparent">
	<path d="M 0 110 Q 52.5 10, 95 80 T 230 20" ></path>
</svg>

Arch Curves Arcs are sections of circles or ellipses. Archs are defined using A command. A command takes 7 values.

rx ry x-axis-rotation large-arc-flag sweep-flag x y rx and ry defines the radius for x and y coordinates, x-axis-rotation defines how much should the circle or the elipses be rotated, x and y is the end point of the arc. sweep-flag can either be 0 or 1, it defines whether the upper part or the down part of the elipses should be shown. Large alse takes 0 or 1, it defines wether the larger part of ellipse should be shown or the opposite part.

<svg width="320" height="320" stroke="none"  fill="black">
    <path d="M10 315 A 30 50 0 0 1 162 315" />
</svg>

Note: If you are a visual learner watch this video on arcs.

Something is not clear or not working? Contact me, I would be happy to help. It also helps me understand which part of this article is difficult to understand and improve it accordingly.

Further reading: I have two other post on styling and animating SVG. css-tricks has lots of videos on SVG (if you are a visual learner).