Practical SVG

If you’ve ever seen Chris Coyier speak at a conference, you know how deep his knowledge of SVGs is and how entertaining he makes learning about them. His book, Practical SVG, is no different in that respect. I could hear Chris’ voice in my head as I was reading, I could feel his enthusiasm, and I got super excited to learn more about and play around with SVGs.

This book lives up to its title so well. It is extremely practical. Chris’ nuts and bolts introduction to exactly how SVGs work, is so great. But it doesn’t stop there, he goes on to talk about fallbacks, accessibility, and designing with them. I learned so much in this short book, which is not unexpected from an A Book Apart book, but it is so great how they come through every time. And now I want to get my hands on Illustrator, scan in some of my own drawings, and start playing around to see what I can do with SVG.

Well done Chris! And thank you for writing.

My highlights are below, broken up by chapter since I read the epub and page numbers are meaningless.

Introduction

The only time this rationale breaks down is if a vector image becomes too complicated, and consequently the file size of the SVG becomes too big to be practical. Does the image consist of three combined circles? That’s about as simple as it gets. Is the image an oak tree with hundreds of detailed leaves? That means a lot of complexity and therefore a large file size.

Chapter 1

SVG and all of its descendant shapes are “in the DOM,” as they say. This means that you have the same access and control over them that you would over a div or h3 or any other element. We could give our robot pretty red kneepads in CSS, have it talk when you click its mouth, dance when you hover over it, or just about anything else you can imagine. SVG used as img or background-image can’t be controlled in this way, nor can it link to any other outside assets, like a stylesheet.

…there’s always a way to handle a fallback. That’s all just part of the job, web buddies.

Chapter 2

But I think it’s really cool that the source code of SVG is intelligible. You can learn it and work with it, and there is some benefit to that.

Chapter 3

The g tag in SVG is like a div in HTML: it doesn’t do much by itself other than group the things inside it. It’s mostly useful for referencing and applying styles that can affect everything together.

A defs tag essentially says, “SVG, don’t try to actually draw any of the stuff inside this tag; I’m just defining it to use later.” The SVG element itself will still try to render, though, so let’s make sure it doesn’t do that by shrinking it to nothing. Using width="0" and height="0" or display="none" is better than using CSS to hide the SVG; CSS takes longer to process, and style="display: none;" can have weird consequences, like failing to work at all on some iOS devices.

These values are a pretty cool little trick! Instead of explicitly styling the SVG, we make it size and color itself to match the font properties. If we drop that SVG into a button, it will absorb the styles already happening in that button and style itself accordingly.

We also used a title attribute to make sure we had basic screen-reader accessibility covered. We can shift the responsibility for both title and viewbox to the symbol element. Plus, SVG already knows not to draw symbol elements; it knows you are just defining them to use (actually draw) later.

This still might look like a lot of code just to draw an icon, but it’s comparable to any other icon-drawing technique, especially when you consider what you get from this method. Semantically, our markup says, “This is an image icon.” Screen readers can announce whatever we want them to (“@CoolCompany on Twitter,” for example), or nothing at all if that’s more appropriate. We also get resolution independence. We get the ability to style the icon through CSS, and every other advantage of inline SVG, because that’s exactly what we’re using. Imagine trying to get all that functionality from, say, icon fonts—it would be difficult for some features and impossible for others!

Chapter 4

One thing we can have a build tool do for us is create an SVG sprite—that chunk of SVG symbols I introduced in the last chapter—automatically from a folder of separate SVG images.

You aren’t limited to the icons on the IcoMoon site; you can import your own. You can also create an account so that you can save your projects, making it easy to come back and add/remove/adjust icons and reexport them.

The SVG images are converted into a data URL and put directly into the stylesheet. We’ll cover data URLs momentarily, but in a nutshell: a data URL is literally the SVG itself, specially encoded and turned into a long string right inside the URL. All the drawing information is right there; no network request is required to go get anything else. In that sense, the stylesheet is your sprite, because all the icons are combined into one request and can be used on demand.

Chapter 5

A typical SVG workflow involves doing the design work in what you might think of as a master-editable version of an image, and then exporting and processing an optimized version to use on the web. Having a file-naming convention (icon-menu-master.svg and icon-menu.svg, say) or keeping the versions in separate folders is a good way to stay organized as you work.

Here’s the deal with command-line tools like SVGO: I’m not afraid of them. None of us should be afraid of them. Designers often get accused of being afraid by people who feel more comfortable with the command line.

Listen. If an alternative interface does the same thing but is more comfortable for you and more in line with the rest of the work you’re doing, why not use it? It’s not a cop-out; it’s a responsible choice. If it works for you, do it.

Chapter 6

The x and Y parts of that value are followed by Min, Mid, or Max. The reason SVG normally centers in the viewport is because it has a default value of xMidYMid. If you change that to xMaxYMax, it tells the SVG: Make sure you go horizontally as far to the right as you can, and vertically as far to the bottom as you can. Then be as big as you can be without cutting off.

The background-size property has two keywords it can take: contain and cover. The contain value means “make sure this entire image is viewable, even if you have to shrink it,” which makes it just like meet. The cover value means “make sure this covers the entire area, even if you have to cut parts off,” which makes it just like slice.

Chapter 7

The fact that SVG goes so well with HTML, CSS, and JavaScript is a good reason for SVG to be in every front-end developer’s toolbox.

Chapter 8

Beyond drawing and animating shapes, SVG has several features that can alter how the image ends up looking.

While CSS filters may be a bit easier to use, SVG filters can do anything that CSS filters can, and with deeper browser support.

The pattern element provides the magic here. It’s an element designed to be used as a fill that will repeat over and over in a grid, like CSS background-images can. A pattern is essentially a rect. It takes the same attributes: x, y, width, and height. The difference is that it doesn’t render all by itself, just like the symbol element we used back in Chapter 3! You give it an ID so other elements can reference it.

What is especially useful about working with patterns in Illustrator is that we aren’t limited to the repeating rectangles. You can define a pattern with offset rectangles (like a brick wall) or a grid of hexagons. This opens up some pretty cool pattern opportunities (read: almost any design set in repeating hexagons looks cool). SVG still only supports repeating rectangles through pattern, but that’s precisely what is wonderful about Illustrator: it does the hard work for you of converting that pattern to one that can be represented as a rectangular tile, such that it can be drawn with pattern.

With SVG, design effects can be combined and recombined infinitely.

What I’ve tried to do is introduce you to a bunch of possibilities, so that the next time you’re all, “I wonder if I could make a graphic of Susan Kare skateboarding through the screen of an old Macintosh icon shooting a laser beam at a hamburger icon and it blows up into a big rainbow,” your brain will be like: “I got some ideas.”

Chapter 9

Now, a string of text typically isn’t sufficient to explain a chart full of information. So perhaps you could use JavaScript to build an SVG chart from data in the form of a table that, though visually hidden, is still available for AT. That way, the user will experience it either as a perfectly useful table, or as an SVG chart from that same data. You can even use that same table of data to build different types of visualization as needed.

An accessibility checklist like this can be valuable: it gets you thinking about accessibility, and sends you off and running in the right direction. I would warn against thinking of a checklist as a “just do these things and then wipe your hands of it” reflex, however.

…I think it’s pretty dang rewarding knowing that our graphics are as helpful as they can be to anybody using our sites.