Responsive Web Design, Part 1 (2015)

Mastering SVG For Responsive Web Design

Quick Overview Of SVG Syntax And Code

An SVG graphic is made up of shapes that are marked up as human-readable XML tags. It’s outside the scope of this chapter to go over all of the capabilities of SVG, and the SVG universe is too big to include in just a section of a chapter. However, we’ll go over some of the basic and most important SVG elements and syntax quickly by analyzing the code for the graphic shown in below.

An SVG illustration of a set of books, designed by Freepik.com.

A snippet from the illustration’s source code contains the following code:

<?xml version="1.0" encoding="utf-8"?>

</radialGradient>

</g>

</linearGradient>

</g>

</g>

<path fill="#FFFFFF" d="M383.6,299.6c0.1,0.5-0.1,1-0.5,1.1l-38.8,6.5c-0.4,0.1-0.7-0.3-0.8-0.8l-33.1-196.9

c-0.1-0.5,0.1-1,0.5-1.1l38.8-6.5c0.4-0.1,0.7,0.3,0.8,0.8L383.6,299.6z"/>

</linearGradient>

<path opacity="0.4" fill="url(#SVGID_6_)" d="M343.4,306.4c0.1,0.5,0.5,0.9,0.8,0.8l38.8-6.5c0.4-0.1,0.6-0.5,0.5-1.1l-33.1-196.9

c-0.1-0.5-0.5-0.9-0.8-0.8l-38.8,6.5c-0.4,0.1-0.6,0.5-0.5,1.1L343.4,306.4z"/>

</linearGradient>

<path opacity="0.4" fill="url(#SVGID_7_)" d="M383.6,299.6c0.1,0.5-0.1,1-0.5,1.1l-38.8,6.5c-0.4,0.1-0.7-0.3-0.8-0.8l-33.1-196.9

c-0.1-0.5,0.1-1,0.5-1.1l38.8-6.5c0.4-0.1,0.7,0.3,0.8,0.8L383.6,299.6z"/>

</linearGradient>

<path opacity="0.4" fill="url(#SVGID_8_)" d="M343.4,306.4c0.1,0.5,0.5,0.9,0.8,0.8l38.8-6.5c0.4-0.1,0.6-0.5,0.5-1.1l-33.1-196.9

c-0.1-0.5-0.5-0.9-0.8-0.8l-38.8,6.5c-0.4,0.1-0.6,0.5-0.5,1.1L343.4,306.4z"/>

<g>

<text transform="matrix(0.166 0.9861 -0.9861 0.166 333.0215 148.8447)" fill="#1C75BC" font-family="’PTSans-Bold’" font-size="16.6835">Travel Guide Book</text>

</g>

</g>

</g>

</svg>

You can see a lot of <g> elements in there: this is the SVG group element, used for logically grouping together sets of related graphical elements. The <g> element serves a similar purpose to the Group Objects function in Adobe Illustrator and other graphics tools. You can also imagine a group in SVG as being similar to a layer in a graphics editor since a layer is also a grouping of elements.

The <g> element is not the only one used for grouping elements. For the sake of brevity, I won’t mention the others because those could take up an entire chapter on their own. If you’re interested, feel free to check out my article about structuring, grouping and referencing elements in SVG⁸.

Groups are used to associate individual elements that make up parts of the image. For example, each book is contained within a group with an ID that defines that book. The bookshelf consists of two <rect> (rectangle) elements that are also grouped together.

Another element you see several times is the <linearGradient> element. Most SVG elements are logically named; thus, as its name shows, this element creates a linear gradient. Each linear gradient gets a unique ID. The gradients are then referenced by their IDs and used as values for the fill attribute wherever you want to use them. For instance, the shadow beneath the bookshelf is made up of a <polygon> that has a linear gradient fill color. Every linear gradient is defined by two or more <stop> elements that define the colors and where these colors start (the offset). If you’re familiar with CSS gradients, this syntax will look fairly familiar to you.

The text on the books is marked up as real text using the SVG <text> element. The text “Travel Guide Book” is rotated using the SVG transform attribute.

As you can see, SVG code is straightforward and easy to understand. If you come from an HTML background, you won’t need a lot of time to get acquainted with SVG code.

As we finish looking into the syntax, and before we get to the SVG workflow, let’s shed some light on one of the most important yet least understood attributes in SVG: the good ol’ viewBox.

UNDERSTANDING THE SVG VIEWPORT AND VIEWBOX

We’ll start with a look at the difference between the viewBox attribute and the SVG viewport. The viewBox attribute also has a companion attribute, preserveAspectRatio, which controls its position and size; we’ll take a quick look at this attribute as we cover the other concepts as well.

Before we get into the three concepts, we need to define what the SVG canvas is.

The canvas is the space or area where the SVG content is drawn. Conceptually, this canvas is infinite in both dimensions. The SVG can, therefore, be of any size. However, it is rendered on the screen relative to a finite region known as the viewport. Areas of the SVG that lie beyond the boundaries of the viewport are clipped off and not visible.

The SVG viewport is defined by the SVG’s height and width. It is to the SVG what a page viewport is to a page.

Once the width and height of the outermost SVG element are set, the browser establishes an initial viewport coordinate system and an initial user coordinate system.

The initial viewport coordinate system is established on the viewport with its origin at the top-left corner of the viewport at point 0, 0; the positive x-axis points towards the right, the positive y-axis points down; and one unit in the initial coordinate system equals one pixel in the viewport.

The initial user coordinate system is established on the SVG canvas. This coordinate system is initially identical to the viewport coordinate system (see below).

An SVG parrot illustration. The image shows the initial coordinate systems established on the SVG. These coordinate systems are initially identical and established by the SVG’s width and height values.

Using the viewBox attribute, the initial user coordinate system (also known as the current coordinate system, or user space in use) can be modified so that it is not identical to the viewport coordinate system (see below). Then, using the preserveAspectRatio attribute, the current user coordinate system (that of the canvas) can be scaled and positioned inside the viewport.

If the aspect ratio of the viewport (viewport coordinate system) is the same as that of the viewBox (the current user coordinate system), the latter will scale to fill the viewport area. And if the aspect ratio of the viewBox is not the same of that of the viewport, the preserveAspectRatio is used to specify the position of the viewBox inside the viewport, and how it is scaled. preserveAspectRatio is made up of two parts: a keyword that specifies the position of the viewBox inside the viewport; and a keyword that specifies the scaling.

An SVG parrot illustration. The blue coordinate system is the user coordinate system established on the SVG canvas when the viewBox value is no longer identical to the initial coordinate system (in gray)
The blue coordinate system is the user coordinate system established on the SVG canvas when the viewBox value is no longer identical to the initial coordinate system (in gray). In this screenshot, the viewBox is set to "0 0 1000 500": the width and height of the user coordinate systems are 1,000 units and 500 units, respectively, with an aspect ratio that is not equal to that of the viewport. The system is positioned at the center of the viewport and scaled so that it is completely contained within it. Using the preserveAspectRatio attribute, this can be changed further.

I like to think of the viewBox as the “real” coordinate system. After all, it is the coordinate system used to draw the SVG graphics on the canvas. This coordinate system can be smaller or bigger than the viewport, and it can be fully or partially visible inside the viewport, too. At this point I tend to also forget the viewport coordinate system even exists and think of it as just a container for the viewBox.

The way the viewBox is positioned and scaled inside the viewport is similar to the way a background image is positioned and scaled inside an element’s background positioning area in CSS using background positioning and sizing properties.

To dive into the syntax and meaning of each value would require an entire chapter, so I recommend that you check out my article about this subject instead. The article is extensive, really long and contains a lot of visual explanations and examples, in addition to an interactive demo to help grasp the concept of coordinate systems in SVG. You can read the article on my blog⁹.

When you create an SVG in Illustrator, the dimensions of the artboard define the dimensions of the viewport, and for any exported SVG the viewBox is usually initially identical to the viewport.