Pocket Guide to Writing SVG

Thank You!

I would like to take this entire section to give a special “Thank you so much!” to:

CSS-Tricks
Lincoln Loop
Designmodo
Tahoe Partners
Una Kravets for recording the audio version!

Your support for this book is so appreciated and I truly hope I have not offended any of you by potentially excluding your favorite fruit.

Heart

Introduction

Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, images, and/or text that are able to be scaled and resized without losing image quality.

Inline SVG refers to the embedded code written within HTML to generate these graphics in a browser, which will be the focus of this book.

There are many advantages to using SVG this way, including having access to all the graphic's individual parts for interactivity purposes, generating searchable text, DOM access for direct edits, and promoting user accessibility.

Starting with basic organization and simple shapes, we'll then continue on to describe the SVG coordinate system or "canvas", painting a graphic's interior and/or border, transforms, and using and manipulating graphical text. We'll wrap up by touching on more advanced features such as gradients and patterns.

This guide is meant to provide a quick but thorough introduction to building SVG inline, and while it in no way covers all the available features, it should prove helpful in getting you started. It's intended for designers and developers looking to add SVG to their workflow in the most accessible way possible.

From small stroke details to getting started with hand crafted patterns, this guide is intended to be an all around “go-to” reference for writing SVG.

Before You Begin

While this "Pocket Guide" is intended for those that already know a thing or two about HTML and CSS, there are a few additional things that will be helpful to know before diving into SVG code in your favorite browser, such as: the information needed within the SVG fragment for proper rendering, how to make your graphics as accessible as possible, and knowing how and when to use vector graphic software.

Using SVG

There are a number of ways to include SVG in your projects: inline, an <img>, a background-image, an <object>, or as Data URI's. We will be specifically addressing the use of SVG inline which involves writing SVG code within the body of a properly structured HTML document.

So while we will only be addressing inline SVG here, there may be instances where another method may be more appropriate. For example, if you do not need editing abilities of the graphic itself or access to its individual parts, using it as an <img> may better suit your project.

Vector Graphic Software

Vector graphic software options can be useful when looking to create more complex graphics that wouldn't be reasonable to write "by hand". Software such as Adobe Illustrator, Inkscape, Sketch, iDraw, or WebCode can be useful tools to add to your SVG bag of tricks.

The advantage to these types of tools is that you can export their SVG code and embed it right into your HTML. We'll touch on that a bit later.

Inline SVG on the Web

For the sake of brevity throughout this book the SVG DOCTYPE, version number, xmlns, and xml:space have been excluded from all code samples.

These attributes specify the version of SVG being used and the namespace of the document. The main thing to remember at this point is that you will generally not need to include these attributes to successfully render your graphic in the browser.

Let's take a look at these attributes now, in an example of SVG code generated by Illustrator, to ensure this doesn’t take you by surprise when getting started:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

In most instances the DOCTYPE and attributes here within the <svg> element are not necessary and can be eliminated, substantially "cleaning up" your code.

SVG User Accessibility

Utilizing SVG accessibility features is a great habit to form, but again for the sake of brevity, descriptions and titles will not be included within the code throughout the book.

Once you become more experienced writing SVG including these elements is going to make your graphics more accessible to users. For instance, content within the <desc> element allows you to provide a detailed description of a graphic to users with screen readers.

SVG text also provides a huge advantage over traditional raster-based images in terms of accessibility because SVG text is detected and read, and can easily be resized to accommodate specific reading preferences.

General Notes

A couple more general notes before diving in: the fonts used for the demos throughout the book are available through Google Fonts. While you will see this spelled out through font-family here, what you will not see, and will have to include in your document, is the correlating link or @import obtained from Google Fonts.

The examples throughout strictly use pixels and percentages as unit identifiers. Supported length units for SVG are: em, ex, px, pt, pc, cm, mm, in, and percentages.

The SVG code in this book can be added to any text editor and then viewed in any browser that supports inline SVG. While browser support is very strong for SVG in general, this support can become much less consistent with more advanced features like gradients, for example. Can I Use is a great place to check on support for these types of features, but ultimately nothing will beat what you learn through trial and error.

All that being said, you can also copy the code as is, place it into the HTML section of a pen over at CodePen, and instantly see your graphic on the screen. I cannot say enough great things about this tool as it was essentially what got me interested in SVG in the first place. It’s my favorite way to learn: playing, tinkering, and sometimes even failing miserably.

Finally, some examples will have portions of a graphic's code commented out to minimize the size of the block of code when that particular portion is not related to the topic at hand.

<svg>
    <!--<path d=<this path is commented out> />-->
</svg>

Section 1. Document Organization

SVG details reside within a <svg> element. This element contains several attributes which permit the customization of your graphic's "canvas". While these attributes are not completely necessary to render an image, omitting them may leave more complex graphics vulnerable when performing across browsers and make them susceptible to not rendering as intended.

As mentioned, inline graphics can be written "by hand", or embedded by accessing the XML code generated by vector graphic software. Either way, proper organization and structure is crucial to writing efficient SVG code, primarily because the order of these graphical elements determines their stacking order.

Organization & Semantics

An SVG document fragment is made up of any number of SVG elements contained within the <svg> element. Organization within this document is crucial. Content within the document can expand rapidly, and proper organization promotes accessibility and efficiency throughout, benefitting both the author and users.

This section will introduce the key to writing SVG - the <svg> element - and review some common attributes that aid in the initial document setup.

svg Element

The <svg> element is classified as both a container and a structural element, and can be used to nest a standalone SVG fragment inside the document. This fragment establishes its own coordinate system.

The attributes used within this element, such as width, height, preserveAspectRatio and viewBox define the canvas for the graphic being written.

When obtaining SVG code from certain vector software there is a lot of additional info within the <svg> element, such as the SVG version number (indicates the SVG language version being used) and DOCTYPE. As I’ve mentioned, that information will not be included in examples throughout this guide, and their exclusion will not prevent your graphics from rendering on the screen.

g Element

The g element is a container element for grouping related graphics together. Utilizing this element in conjunction with description and title elements provides information about your graphic, and aids in organization and accessibility by grouping related graphical components together.

Also, by grouping related elements together you can manipulate the group as a whole versus the individual parts. This is especially handy when animating these elements, for example, as the animation can be applied to the group.

Any element that is not contained within a g is assumed to be its own group.

use Element

The <use> element allows you to reuse elements throughout a document. There are additional attributes that can be included within this element, such as x, y, width, and height, which define the mapping location details of the graphic within the coordinate system.

Using the xlink:href attribute here enables you to call on the element to be reused. For example, if there was a <g> with an id of “apple” containing the image of an apple that needed to be reused this image can be referenced by <use>: <use x="50" y="50" xlink:href="#apple" />.

This element can be a significant time saver and help minimize required code.

defs Element

While <use> permits the reuse of a graphic already rendered, graphics within a <defs> element are not rendered onto the canvas, but are able to be referenced and then rendered through the use of xlink:href.

Graphics are defined within <defs> and can then be used throughout the document by referencing the id of that graphic.

For example, the following code draws a very simple gradient within a rectangle:

<svg>
    <defs>
        <linearGradient id="Gradient-1">
            <stop offset="0%" stop-color="#bbc42a" />
            <stop offset="100%" stop-color="#765373" />
        </linearGradient>
    </defs>
    <rect x="10" y="10" width="200" height="100" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="3px" />
</svg>

The contents of the <defs> has no visual output until called on by referencing its unique id, which in this instance is being done through the fill attribute of the rectangle.

symbol Element

The <symbol> element is similar to <g> as it provides a way to group elements, however, elements within <symbol> have no visual output (like <defs>) until called on with the <use> element.

Also unlike the <g> element, <symbol> establishes its own coordinate system separate from the viewport it's rendered in.

SVG viewport and viewBox, which establish the coordinate system for the graphics being mapped, will be addressed further in a different section.

Stacking Order

The stacking order of SVG cannot be manipulated by z-index in CSS as other elements within HTML can. The order in which SVG elements are stacked depends entirely on their placement within the document fragment.

The grapes and watermelon below are within the same <svg> element. The watermelon appears in front of the grapes because the group containing the paths that make up the watermelon is listed after the grapes in the document.

<svg>
    <g class="grapes">
        <!--<path <stem path> />-->
        <!--<path <grapes path> />-->
        <!--<path <leaf path> />-->
    </g>
    <g class="watermelon">
        <!--<path <outside path> />-->
        <!--<path <inside path> />-->
        <!--<path <seeds path> />-->
    </g>
</svg>

Stacked watermelon and grapes, watermelon on top

If the group containing the grapes was moved to the end of the document it would then appear in front of the watermelon.

<svg>
    <g class="watermelon">
        <!--<path <outside path> />-->
        <!--<path <inside path> />-->
        <!--<path <seeds path> />-->
    </g>
    <g class="grapes">
        <!--<path <stem path> />-->
        <!--<path <grapes path> />-->
        <!--<path <leaf path> />-->
    </g>
</svg>

Stacked watermelon and grapes, grapes on top

This method of determining stacking order also applies to the individual elements within the group. For example, moving the path of the stem in the grapes image to the end of the group will result in the stem being on top.

Stem on top of grapes

Section 2. Basic Shapes and Paths

Basic SVG shapes can be written by hand in HTML but you may eventually experience the need to use a much more complex graphic inline. These more complex graphics can be created with vector software, but for now let’s look at the basics that can easily be hand coded.

Basic Shapes

SVG contains the following set of basic shape elements: rectangles, circles, ellipses, straight lines, polylines, and polygons. Each element requires a set of attributes before it renders, like coordinates and size details.

Rectangle

The <rect> element defines a rectangle.

<svg>
    <rect width="200" height="100" fill="#BBC42A" />
</svg>

Rectangle

Thank You!

Introduction

Before You Begin

Using SVG

Vector Graphic Software

Inline SVG on the Web

SVG User Accessibility

General Notes

Section 1. Document Organization

Organization & Semantics

svg Element

g Element

use Element

defs Element

symbol Element

Stacking Order

Section 2. Basic Shapes and Paths

Basic Shapes

Rectangle

Circle

Ellipse

Line

Polyline

Polygon

The path Element

path data

moveto

closepath

lineto

L, l

H, h

V, v

Curve Commands

Cubic Bézier

Quadratic Bézier

Elliptical Arc

Embeds From Vector Software

Section 3. The Workspace

viewport

viewBox

preserveAspectRatio

Coordinate System Transforms

translate

rotate

scale

skew

Section 4. Fills and Strokes

fill Properties

fill-rule

nonzero

evenodd

inherit

fill-opacity

Stroke Attributes

stroke

stroke-width

stroke-linecap

stroke-linejoin

stroke-miterlimit

stroke-dasharray

stroke-dashoffset

stroke-opacity

Section 5. The text Element

Basic Attributes

x, y, dx, dy

rotate

textLength & lengthAdjust

The tspan Element

Spacing Properties

kerning & letter-spacing

word-spacing

text-decoration

text Along a Path

The textPath Element

xlink:href

startOffset

Section 6. Advanced Features: Gradients, Patterns, Clipping Paths

Gradients

Linear Gradients

stop Nodes