SVG Summit 2016: Spotlight on the open vector image format

◀ Intro and conclusion

Introducing SVG

Ryan Irelan, the first speaker, is a Lead Educator at Mijingo.com, an online service offering tutorials on SVG. Ryan reminds us that this web vector format isn’t new. The W3C created this open standard in 1999. Even though it was implemented in some browsers since 2001, it has recently been adopted by a critical mass, following the decline of its competitor, Adobe Flash.

We’ll shortly look at how to add SVG in our webpages. Now, let’s make sure we understand why its advantageous to do so. Not so long ago, designers and animators used Adobe Flash to create animations for the web. This proprietary technology required users to download and install a plugin. SVG is an integral part of the DOM, and is supported in all modern browsers. You only need to know how to use it.

Why use SVG?

• It adapts its resolution to the device it’s displayed on.
• Natively responsive, it adapts to the context you place it in.
• An SVG can be included in a page using <img>, like you do with a JPG, a PNG or other raster formats.
• It’s XML, so it can be read and modified in a text editor or in a vector graphics program like Inkscape, Adobe Illustrator or Sketch.
• You add the SVG code to the HTML of any webpage (inline), it will be rendered instantly on the page, without any additional request to the server.
• It can be included within CSS, either as a background image, or in a pseudo element using the content property.
• It’s much easier to implement accessibility with SVG. You can increase the contrast on the colors, you can also zoom images or show descriptive text with <title> et <desc>.
• And last but not least, it’s possible to animate SVG using CSS, Javascript or SMIL. SMIL animations work on all browsers except for IE, but it is marked as deprecated by Chromium, and is on its way out, to be replaced by the WAAPI (Web Animation API).

That being said, SVG isn’t perfect. It’s not always implemented in a uniform manner across all browsers. If you’re going to work with SVG, you’ll have to become familiar with its exceptions, limits and their workarounds.

Since SVG is basically XML code, it inherits the same pros and cons. And as its data is displayed graphically, it inherits the same pros and cons as other images.

SVG offers a wide variety of geometric shapes with their own tags, attributes and properties. There are simple shapes like <rect>, <circle>, <elipse> et <polygon>. To draw lines, open shapes or more complex shapes, we have the <polyline> and <path> tags.

SVG isn’t limited to lines and shapes though. We can add all sorts of effects to our images with the help of masks (<clipPath> and <mask>) and filters, which can be combined in surprising ways. Before we can use all of these different tools, we have to understand the basics of how to display an SVG using the viewBox.

Cracking the SVG code

The second talk takes us deeper into the SVG code, more specifically the viewBox attribute. It’s probably one of the most important aspect of an SVG since it describes what portion of the image is to be shown in the viewport (the SVG tag as it appears on the page). You can think of it as a sort of camera, showing you only what appears in view of the lens, where the lens is described by x/y coordinates followed by the width and height of the ‘camera lens’ or viewBox. Let’s take a look at an example :

viewBox="0 0 800 600"

The viewBox attribute is made up of four numbers separate by a single space. The first two numbers represent the x and y coordinates of the top left corner of the viewBox (the visible portion of the SVG). The next two numbers are not coordinates but the width and height of the viewBox.

This means that you can show only a portion of your image at a time, hiding the rest from view. This is useful for sprites, but also for simulating a pan of the ‘camera’. The viewBox is often compared to the visible portion of a map in Google Maps. You only see what is relevant to you, but you’re well aware of that a portion of the image is hidden from view. The same happens in an SVG. Everything outside the viewBox is hidden unless you change the overflow property to ‘visible’.

This should not be confused with the  width and height attributes that manage the size of SVG on a web page. An image that displays as 100 x 100 pixels (width and height) can contain a SVG with a greater illustration (such as viewBox = "0 0 200 200") or a smaller illustration (such as viewBox = "0 0 50 50"). The larger image will scale down and the smaller image will grow to take up the space.

Once you have a good understanding of the viewBox, the rest is simple in comparision — except, perhaps some of the limitations you’ll come across depending on how you integrate your SVGs in your page. Now, we can start to have fun…

Designing complex SVG animations

Sarah Drasner blew us away with her animations, but it was her responsive illustration, the laser pandas factory, that stole the show!

We’re used to seeing responsive design in web pages but which is new to me is a deconstructed illustration that rebuilds itself according to the size of your screen. This particular image uses the same media queries we’ve been using for years, a few relative/absolute positioning and combined with a negative (-1) translation to flip the image on itself, making a fully responsive illustration!

To be able to create complex images without pulling your hair out, make sure to optimize your SVGs. Luckily, there are a few tools out there to do that for us.

• The first of its kind is Peter Collingridge’s SVG-Optimiser.
• For developers who like to streamline their workflow, there’s an optimisation script based on Node.js called SVGO. It can be integrated in a Gulp file to optimise your images automatically as you add them to your project.
• There’s also a GUI for SVGO called SVGOMG. It adds a simple to use graphical user interface.

Once we know how to create illustrations and optimise them for the web, we can start to do more and more interesting things…

4 more Impossible Things with SVG

Dudley Storey‘s presentation puts the emphasis on the adaptive properties of SVG text. Just like an image, SVG text adapts itself according to the context in which it is placed. Here is an example of SVG text combined with a clip-Path that masks out the pattern outside of the text area:

Dudley showed us how to replace image maps by inserting <a> tags around the SVG elements. He showed us an interactive map of Canada as an example. These types of images used to be done with image maps, which aren’t responsive or precise, and generally take more time to code. Now, a single <a> tag will do the trick and the precision is perfect. The only prerequisite is that the shapes be filled with the fill property for it to work. If you want the shape to appear empty, you can always apply style="fill-opacity:0;" to it.

Dudley also showed us some demos to illustrate the potential of SVG patterns as background images.

Another boon that SVG offers us is the ability to reuse code with the <use xlink:href="#"/> tag. The tag refers to the ID of an element or a group and allows us to reproduce an image without bloating the DOM. Example: codepen.io/AmeliaBR/pen/ZYMEKM

SVG and working with Sketch

Clark Wimberly showed us his workflow with Sketch. This software unfortunately isn’t open-sourced and is limited to the OSX plateform. Nevertheless it offers interesting possibilities. Some export features allow it to batch changes to groups of images in just one click. Sketch also allows its users to specify the location where the images are exported with a few simple changes to the configuration.

A more Holistic Approach to SVG

Chris Gannon wowed us with his animations. He started out creating animated banner ads with Flash but has since made the transition to HTML5 when support for Flash dwindled. In parallel, an animation library called GreenSock, which used to work with Flash animations has migrated to Javascript, allowing its users to reproduce the same kinds of animations.

Chris advises people new to web animations to start with the ‘low hanging fruits’, that is to say animations that are within your abilities to start with. By starting with something simple, you’ll gain experience and confidence while working your way up slowly to more complex animations.

Chris also announced his first contribution to free/open-source code with the ScrubGSAPTimeline.js on github. It’s a tool that allows animators greater control over GreenSock’s timeline.

Building with SVG Q+A Round Table

The conference ended with a round table with Chris Coyier of Codepen, CSS-Tricks and podcaster on Shoptalk.

The round table summarized what we had learned throughout the day. Chris confirmed the value of using SVG text in a responsive page layout. We were also reminded that animating elements within an SVG isn’t very efficient. Animations within SVG still aren’t hardware accelerated.

He reminded us of the symbol tag, which allows us to declare a hidden SVG that can be called elsewhere on the page. I created a few examples on JSBin to illustrate how to use symbol.

At the very end of the round table, Chris mentioned the “death of SMIL”, reffering to the Chrome team’s decision to deprecate SMIL, the fact that IE and Edge have yet to implement it. From now on, developers will have to turn to CSS and Javascript to animate their SVGs. GreenSock is the most popular Javascript library for animating among attendees of the summit. There is also work being done on an upcoming web animation API or WAAPI (Web Animation API).

▶ Next and final part : Conclusion