Scalable Vector Graphics (SVG): An Introduction

SVGs (scalable vector graphics) open up entirely new possibilities on the web. Their undisputed main advantage is that, as the name suggests, they are scalable and do not lose quality due to their vector properties.

Accessibility of SVGs

But that's not all. SVGs can be directly embedded into the HTML code and can also contain text elements. These text elements can be detected by screen readers and thus, unlike text on pixel images, comply with the Web Content Accessibility Guidelines (WCAG 2.0) of the World Wide Web Consortium (W3C). SVGs are also preferable to icon fonts, as the latter can sometimes pose a barrier. This is because some users may replace fonts in their browser via user styles to improve readability (e.g. dyslexic individuals using a specially designed font). If the font is then replaced, the icon fonts lose their visual meaning. For users of Opera Mini (particularly widespread in emerging economies), the icon area is even displayed completely black. This is another reason from an accessibility perspective that speaks in favour of SVGs.

However, to create entirely accessible SVGs, some guidelines must be followed. In an article by Léonie Watson (digital accessibility consultant, member of the W3C HTML Working Group and the HTML Accessibility Task Force) on sitepoint.com, you will find detailed instructions on how to achieve screen reader accessibility. A screen reader enables a visually impaired person to have the content of a website read aloud. To enable this, the content needs a clear semantic structure, otherwise one wouldn't know, for example, where the heading is and thus what is important. What is good for the visually impaired is also good for the Google search engine, as it is the world's largest visually impaired user.

THE MOST IMPORTANT POINTS FROM LÉONIE WATSON'S ARTICLE:

• Use SVGs whenever possible. Their scalability alone, without loss of quality, makes them more accessible than conventional pixel images.
• For screen readers, it's easier if you use Inline SVG. This means that if you already have an SVG file, open it in a text or code editor, copy the code with the vector information within the <svg> tag and insert it directly into the HTML file within the <svg></svg> element.
• The first child element of <svg> must be the <title> element, which contains a title for the SVG image.
• This must be followed by the <desc> element, which contains a brief description of the SVG image's content, thus taking on the role of the alt attribute.
• Some browsers or their respective screen readers do not automatically recognise the title / desc element. In this case, it is advisable to include the ARIA label, which is interpretable from IE9 onwards. It merely specifies which elements in the SVG contain the description. The id of the respective elements is specified for this:

<svg version="1.1" ... aria-labelledby="title desc">
     <title id="title">Header Animation</title>
     <desc id="desc">Image with 2 Quicklinks</desc>
     ....
</svg>

• As mentioned above, any text appearing in the SVG graphic should be embedded as a <text> element to clearly highlight it as such for screen readers.
• Using the <a> element, SVG content can also be made focusable. For screen readers to recognise the anchor element as a link, the role must still be assigned: <a role="link">
• If the scalable vector graphic used contains something more complex or interactive, a method must be considered for how this content can still be conveyed. Ideally, there are two different views for this content, and the user can decide which one to choose.

Of course, it must not be forgotten that there are other accessibility topics that should not be overlooked even with SVGs, such as colour contrasts. However, we will address these in a separate blog post and will not deal with them in detail here.

Line Icons and Drawing Animations

SVGs can not only be used as accessible graphics, but they also open up a variety of animation possibilities, e.g. for SVG Drawing Animations.

Creating SVGs in Illustrator

The basic principle is simple. The graphic to be drawn must contain a stroke. If the SVG graphic is created in Illustrator, for example, this means that the object either needs an outline or consists only of a line or a path itself. An object with an outline is useful when a detailed object is to be drawn, as in the example on tympanus.net. However, if you want to create an animation of line icons that draw themselves, as seen on blog.teamtreehouse.com, then each line must truly be a single path and must not contain any fill. This can lead to a problem with pre-made icons that you haven't created from scratch, as they usually consist of a filled area – even if they are transparent “line” icons.

This problem is well described by the following image: the desired line is not animated (as expected, figure on the right), but rather the outline of the filled area (figure on the left).

Therefore, these icons must be converted into actual line icons. Fortunately, this is relatively easy. For illustration, a line icon is shown at the far left in the image below. With the command shift + x, the object's outline is displayed. This then looks like the second image from the left. Subsequently, the compound path must be converted back, and all parts not necessary for the final icon deleted (middle image below). The shortcut c activates the cutting tool, which can be used to divide paths and thus remove further superfluous lines (second to last image below). Afterwards, the remaining lines must be extended so that the gaps are filled. This results in the same symbol again, but now it consists only of (outline) lines (image on the right). For an icon like in our example, it would also be advisable to simply redraw it. But for more complex elements, I wanted to go through this method as well.

Depending on which tool the objects in Illustrator were created with, they are named differently in SVG, e.g. rect, polygon, polyline, line or similar. They all contain a stroke element and are therefore suitable for line animation. However, if you want to work with uniform shapes, it is advisable to convert the different shapes into compound paths. This way, they are all called <path> in SVG, and their coordinates are collected and described in the d description. A side note: The conversion to paths remains an exception, only needed for drawing animations for appropriately small line icons that really consist only of a line. Normally, icons are converted into a filled area with an outline. These then by default contain only the d description in the code and no other information (unless there is an outline stroke="1px" and explicitly no fill fill="none").

Animating SVGs

Fundamentally, there are two ways SVGs can be animated: with CSS animations and with SVG animations. Since we are already familiar with CSS animations (see blog post Workshop: CSS Animations) and they are very well suited for drawing animations, I will go into more detail on them in the following section. SVG animations are a whole different topic that I will cover in a future blog post when the opportunity arises.

For drawing animations, I also found an excellent resource that explains everything you need to know in a simple and precise manner: css-tricks.com/svg-line-animation-works/. I would like to briefly mention the most important points from this article here. The object to be animated must, as mentioned above, have a stroke. We ensured this when creating the objects. This stroke can be displayed as a dashed line – which means that part of the line is shown and an equally long part is not displayed. This fact can be used to make one part long enough to fill the entire outline.

To do this, you give the object in CSS a stroke-dasharray with the length of the line. The length can be found out using JavaScript or roughly estimated with a bit of experimentation. Then you give this object a stroke-dashoffset of the same length. This ensures that the outline is not displayed for now, because the invisible part of the dash is now displayed. Then you have to assign an animation to the element, such as animation: dash 5s linear forwards. In the @keyframes dash, the offset must now be changed so that the visible line slowly pushes out the invisible one. This happens by setting the stroke-dashoffset to 0. The forwards attribute in the animation also ensures that the animation only happens once in one direction.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

If the outline builds up in the wrong direction, you can simply give the offset a negative value first. This ensures that the outline builds up from the other direction.

This is just one of many tricks for animating SVGs. Hopefully, you'll enjoy it as much as I do, because further posts on this topic will follow!