7 Concepts: Why Your SVG Is the Way It Is

In this article, I will be covering these concepts:

• Size of the SVG, i.e. width and height attributes;
• Viewbox attribute, with variation in values;
• Preserve aspect ratio attribute;
• Fill attribute;
• Stroke attribute;
• SVG shapes: circle, rectangle, ellipse, line, polyline elements;
• Path element.

Why it is important to understand these SVG concepts

Most graphical tools will help you easily create SVGs by abstracting away the underlying concepts and elements. However, knowing some of these concepts can help you in the following situations amongst many others:

1. Draw simpler graphics by hand in less time;
2. Style or animate the SVG;
3. Optimize the SVG for performance;
4. Make small adjustments to a complex SVG generated by a tool without needing the tool.

SVG

Think of an SVG like a graph paper, wherewith the help of coordinates any shape or complex drawings can be drawn. It has a document-like structure, so with the set of instructions, drawing on the SVG is simple. Instructions such as go to x1 and y1 coordinates from x and y coordinates, fill it with black color, etc. SVG has a syntax very similar to HTML. They both have elements, attributes values, etc.

Document Structure
A document starts with the <svg></svg> element. It also defines the SVG namespace via the xmlns attribute. The size of the SVG can be defined by including width and height attribute to it. Width and height can be given in units like px, em, rem, percentages, viewport units, etc. If width and height are not given, it will be set to 100% automatically. Below is the code for SVG which is 500px in size:

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

There is another attribute called viewBox. It is like a window on top of the SVG, if the graphic is within the overlap area of viewBox and SVG, it will be visible. Position and size of the viewBox can be set by giving values min-x, min-y, width and height. Let’s visualize SVG with the viewBox attribute. The below image is a rectangle(150x100px), other things are only for demonstration purpose like a line of viewBox, grids, etc. Only a blue rectangle will be visible to the user.

Here is a code for the above image:

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px"
viewBox="0 0 250 250">
<rect x="50" y="50" width="150" height="100" fill="blue" />
</svg>

If the viewBox attribute is not present, it is equal to the size of the SVG.

As I said earlier, SVG acts like a graph paper, which we can see in the above image. It has equally spaced grid lines. SVG has basic shapes and path elements to create any graphic. The blue rectangle is created by using <rect /> element, which I will explain in the “SVG shapes” section.

Let’s discuss variations in a viewBox value and its effects one by one.

1. Changing the position (x and y value) for the viewBox of SVG, dimensions of SVG and viewBox are same .

Below code is for a circle with a 20px radius. The SVG and viewBox sizes are 300x300px.

<svg width="300px" height="300px" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="20"/>
</svg>

Will take three different values for the viewBox position i.e. x and y.

The above example is created in the Codepen.

In the above image, I took three cases of x and y values of viewBox respectively: (0, 0), (50,50), (-50, 50). Solid black lines represent SVG 300 x 300px. Dotted lines show the viewBox of 300x300px.

There are a few important points to note :

1. Dotted lines are the user coordinate system, from which the graphics will be drawn. In other words, the top left corner of the user space(dotted) is (0, 0) for the graphic(circle in the above example).
2. The graphic created will only be visible to the user if it is inside the overlap area between the SVG size(solid lines) and viewBox(dotted lines). For example, in the second case, only a quarter circle will be visible to the user.
3. Changing the position of the viewBox, showing and hiding the graphic can be useful in animating any graphic.

2. Changing the size of the viewBox, keeping the aspect ratio the same for viewBox and SVG size.

Refer to the below image for three variations of viewBox sizes with respect to the SVG size. For simplicity, I kept the size of the SVG the same for all three variations i.e. 300x300px. In the first case, the SVG size is greater than the viewBox size, in the second case, it is equal and, in the third case, it is smaller.

All examples are created in the Codepen.

Result of above three variations: 

1. When the SVG size is greater than the viewBox size, you get the zoom-in graphic. The graphic will scale thrice the original size as the SVG size(300x300px) is 3 times bigger than the viewBox size(100x100px).
2. When the SVG size is equal to the viewBox size, the graphics look normal.
3. When the SVG size is less than the viewBox dimensions, you get the zoomed out graphic. The graphic will scale down by 0.75 of the original size as the SVG viewport is 3/4 times smaller than the viewBox dimensions.

This also can be very useful for animations, or simply for zoom in and zoom out effects like google maps.

There is an amazing demo created by Amelia, whereby changing the positions and dimensions of the viewBox, you can see zoom in and zoom out graphic in the SVG viewport. She starts by saying, “The element is a telescope into another world.” https://wattenberger.com/guide/scaling-svg

3. Changing the size of the viewBox, keeping the aspect ratio different for the viewBox and SVG sizes.

Let’s take a simple example of a circle. SVG size is 400x200px i.e. 2:1 aspect ratio. Aspect ratio for the viewBox is 4:3 with 400x300px being the size. Variation in the aspect ratio results in a distorted graphic. To control over the scaling of graphics horizontally and vertically, there is an attribute called preserveAspectRatio, which is responsible for keeping the graphic in proportion or however we want it by providing different sets of values.

As you can see in the above image, one circle is distorted and other one is normal. Code for the above example can be found here.

Syntax: preserveAspectRatio =" <align> [<meetOrSlice>]"

Alignment value <align> indicates whether to do a uniform scaling or not.

preserveAspectRatio="none" means do not force uniform scaling. If align is none, then <meetOrSlice> value is ignored.

preserveAspectRatio="xMidYMid meet" means force uniform scaling. xMidYMid meet are the default values. There are many options for forcing uniform scaling like xMinYMin, xMidYMin, xMaxYMin , xMinYMid, xMidYMid (the default) , xMaxYMid, xMinYMax, xMidYMax, xMaxYMax.  Each one of these serves a different purpose. I am not going into the depth of each one. You can learn more here.

There is an amazing demo created by Sara Soueidan where she plays around with the viewBox and preserves aspect ratio. You can try changing each value of align in preserve aspect ratio and see the difference between them. https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/ 

SVG fill attribute

In SVG, coloring can be done inside the object with the fill attribute. You can use a color name, RGB values, HEX values, RGB values in the fill attribute. The default value for the SVG fill is black. Apart from the color values, you can give none and transparent for no fill color and transparent fill color respectively. Additionally, there is a fill-opacity attribute as well to change the opacity of the fill color.

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px" fill="black">
  <circle cx="50" cy="50" r="50"/>
  <circle cx="150" cy="150" r="50" fill="red"/>
</svg>

Above SVG consists of two circles: one — with the fill attribute and another one without the fill attribute. The one with the fill attribute is filled with red color, as red is the fill value. The other has no fill value so it’s taking the default color value black.

SVG stroke attribute

In SVG, coloring can be done in the line drawn to create an object as well. It is called a stroke. Similar to the fill, it takes color values, transparent, and none. A width of the line drawn can also be changed using a stroke-width attribute.

<svg xmlns="http://www.w3.org/2000/svg"
 width="300px" 
 height="300px">
  <circle cx="55" cy="55" r="50" stroke="red" stroke-width="3px" fill="transparent"/>
  <circle cx="150" cy="150" r="50" stroke="red" fill="none"/>
</svg>

SVG stroke attributeAbove, SVG consists of two circles. Both circles have the same stroke color but have different stroke width. The default value for the stroke is also black. There are other attributes as well related to the stroke like stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity. I am not explaining these attributes in detail, as this much is good enough for basic understanding.

The above examples of fill and stroke can be found here.

SVG Shapes

All the SVG shapes which I will be using as an example is created in the below pen. Please open this in the next tab to understand and experiment with shapes.

Circle: <circle cx=”” cy=”” r=””/>

It is an element to draw a circle in an SVG. It takes cx, and cy coordinates along with radius (r). cx and cy are the center coordinates of the circle. As shown below:

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px"
 viewBox="0 0 300 300">
<circle r="50" cx="100" cy="100" fill="none" stroke="black"/>
</svg>
S

Rectangle: <rect x=”” y=”” width=”” height=””/>

It is an element to draw a rectangle in an SVG. It takes x, y coordinates along with the width and height of the desired rectangle. x, y should be the top-left coordinates of the rectangle.

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

Ellipse: <ellipse cx=”” cy=”” rx=”” ry=””/>

It is an element to draw an ellipse in an SVG. It takes cx and cy coordinates as the center of the ellipse. Also two radiuses rx and ry are horizontal and vertical respectively.

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px"
 viewBox="0 0 300 300">
<ellipse cx="100" cy="100" rx="50" ry="20" />
</svg>

Line: <line x1=”” y1=”” x2=”” y2=””/>

It is an element to draw a line in an SVG. It takes coordinates of the start (x1, y1)and end(x2, y2) points of the line. Depending on the coordinates, a line can be drawn horizontally, vertically, or at any angle.

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px"
 viewBox="0 0 300 300">
<line x1="0" y1="0" x2="150" y2="150" />
</svg>

Polyline: <polyline points=”x1y1 x2y2 x3y3 …..” />

It is an element to draw a polyline in an SVG. It takes multiple points, which consist of x and y coordinates of the lines, and joins them together.

<svg xmlns="http://www.w3.org/2000/svg"
 width="500px" 
 height="500px"
 viewBox="0 0 300 300">
<polyline points="0 150 150 150 150 0 300 150" stroke="black" fill="none"/>
</svg>

SVG path

It is a very important element in an SVG. Any complex graphic can be created with the path. It can be a sequence of paths, curves, arcs, etc. It can be written like <path d=”M 75 90 L 65 90 A 5 10 0 0 0 75 90” />. In a path element, “d” stands for drawing, and it takes values which consist of coordinates with the instructions. Alphabet letters which are there as the value of d’s are the instructions along with their values. Let’s go through them one by one.

• Capital letter commands like M refer to absolutely positioned points.
• Lowercase letter commands like m refer to relatively positioned points.

Let’s understand this <path d=”M 75 90 L 65 90 A 5 10 0 0 0 75 90” />

“M” stands for a move to x and y coordinate i.e. (70, 90).
“L” stands for a line to x and y coordinate i.e. (65, 90).

“A” stands for an arc to (rx ry x-axis-rotation large-arc-flag sweep-flag x y), i.e. (5 10 0 0 0 75 90). Here, x and y are the last coordinates.

To help you understand the arc, I created 3 graphics with a combination of different values of x-axis rotation, large-arc-flag, and sweep flag. The rest of the values are the same for all.

In first graphic, the arc value is  A 5 10 0 0 0 75 90, in the second — A 5 10 30 0 0 75 90, and in third — A 5 10 0 0 1 75 90.

In the above example, three large-arc-flag are the same, i.e 0. It takes only two values 0 and 1. If the arc’s measure is greater than or equal to 180 than a large arc flag is 1. or otherwise — 0. This can be seen in the below example:

<path d="M 135 90 A 15 4 0 <strong>1</strong> 0 125 90" />
//  A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

There are two graphics, one has a large-arc-value of 1 and the other has 0.

“Z” Close to. This is used to close the drawing in the loop to a drawing’s start point. It means that the start and end points will be the same.

“H” horizontal to (x). This says from the current point go horizontal till x point.

“V” vertical to (y). This says from the current point go vertical till y point.

“C” stands for cubic Bézier Curves. This starts from the current point to (x,y) using two control points (x1,y1)(x2, y2).

<path d="M 0 150 C 80 100 150 100 100 150" fill="none" stroke="black"/>

“Q” stands for a quadratic Bézier curve, this starts from the current point to (x,y) using a control point (x1,y1).

<path d="M 0 90 Q 80 50 150 100" fill="none" stroke="black"/>

There is much more for C & Q. But this is good enough to understand what it does. Most of the time, we use tools to create SVG like Illustrator, Figma etc..

SVG PATH BUILDER is a free Codepen tool to play around with these for learning purposes. Also here is a small video, which explains Cubic Bezier Curves very well.

All the above path examples are created in this pen to play around.