Name: Scalable Vector Graphics
Author: John Rhea

We’ll discuss the difference between raster and vector graphic and how to add vectors to HTML pages. Then we’ll go deep on many of the different elements SVG has and how they work, bringing all the ones we discuss together in a single project to create a portrait of Zombie Bob.

Scalable Vector Graphics

Learn HTML and CSS with step-by-step online courses, books and short video lessons

HTML & CSS

Canvas & SVG

Scalable Vector Graphics: How to Draw Zombie-Smashing Images with Code

Preface

To understand the zombie-smashing power of Scalable Vector Graphics (SVGs), you need to know the difference between vector and raster graphics.

There are three major ways to add an SVG image to a website. The first two use HTML, and the third uses CSS.

Adding SVG to a Web Page

If a zombie horde is bearing down on you, you definitely want to know how to put SVGs together so you can fling them like vectorized boomerangs. Use a vector graphics program such as Affinity Designer, Inkscape, Figma, or Adobe Illustrator for complex graphics. For simple graphics, graphics you want to animate, graphics you want to optimize and graphics you need to edit, you can build an SVG from scratch or significantly modify SVG file output.

Creating Zombie Bob

Before we get to the elements that make up an SVG graphic, let’s talk about the relationship between HTML and SVG. While they share a general syntax, a few elements exist with the same name in both, and CSS can act on both. HTML and SVG are separate languages with their own idiosyncrasies. For instance, when setting a background color on an SVG element with CSS, you would use the fill property instead of the background-color property.

HTML vs. SVG

Since HTML and SVG are separate languages, even if they are similar, they need an interface element to interact. Thus, all SVG graphics are within the  element. We can use the  element either as a standalone in an .svg file, or we can use it within an HTML document or within another SVG document. The  element, like an apocalypse, wraps a whole new world within it. Whether it’s used in HTML or SVG (to embed another SVG fragment), it creates a new coordinate system and a new viewport within itself. A 10px move of an element in the page’s HTML could be a 1px or a 100px move for a corresponding element in the SVG, depending on the SVG’s coordinate system. This is one of the harder aspects to understand, but it should become clearer as we move along.

The &lt;svg&gt; Element

Let’s get into some SVG elements and beat back those zombie agitators with some shapes. We’ll start with a rectangle and draw Zombie Bob’s eye, or his pupil. The SVG element for a rectangle is .

SVG Elements

While the polyline and polygon elements are powerful and quite useful, there’s another element that can do everything they do. It’s called , and it draws a line and/or polygon comprising two or more connected points. It is the generic shape element and, like a zombie contagion, all other shapes/zombies can be made from /contagion.

The &lt;path&gt; element

Before we get to the next elements, let’s fill in a few details with some elements we’ve already used. We’ll add a neck with a , the top of his luscious locks with a , his right sideburn with a , his left sideburn with a , and then his shirt with a .

Adding Some Body Parts

All good zombies want to communicate clearly, but damaged vocal cords, missing jaws, and a propensity to moan make that hard. Thus, Zombie Bob might write a message on his shirt so that he doesn’t have to moan it at every new person (though zombies do enjoy moaning at things). The text element lets us add text to our SVG.

Dealing with Text

No mustachioed and mulleted zombie would be complete without a garish Hawaiian shirt. But the pineapple I have in mind isn’t vector—it’s an image. That’s okay. We can pull an image into SVG, just like we would with HTML, except we use the  element instead of the  element.  can display a raster image or another SVG. It supports JPG and PNG but not GIF, and especially not animated GIFs. Another difference between the SVG  and the HTML  is that  uses an href attribute to set the path to the file (not the src attribute).

Scalable Vector Graphics

Details

Description

Creator

John Rhea

Content

Reviews

Frequently Asked Questions

Scalable Vector Graphics