A beginner’s guide to vector graphics and animations for the web

    Are you getting started on coding images for websites or in charge of animating them? Learn how to choose the best format for each case and get tips on the best animation techniques.

    Subscribe to our blog

    While many front-end developers are familiar with Scalable Vector Graphics (SVG) and web-animations, the topic can be slightly more nebulous for a beginning developer. Animation is a useful tool which helps to grab the visitors’ attention and guides users around the website in a fun and engaging way. This article introduces the possibilities with SVG and CSS-animation, including beginner’s tips and resources for front-end developers and web designers.

    Back to the basics: raster images vs vector images

    The main options for imagery on a website are raster images (PNG, JPEG and GIF) and vector graphics. The difference between them is that raster graphics are composed of grids of pixels, while vector graphics simply contain code that tells the browser how to draw the shape.

    The first one may be your best option when you want to display a photo, but it's not flexible and it is often large in file size and cannot be scaled infinitely without losing quality.

    SVG on the other hand, is a better option to render logos, icons or even infographics. It is always sharp on every device and it can be animated neatly. This variety of animation techniques is exactly what we’ll discuss today.

    1. ICONFONTS

    In an iconfont, every icon is a “character” in a font. The font is placed on the website with CSS and can be styled. This technique permits you to have a lot of different icons with a limited file size. Iconfonts are fully supported by all browsers but have some limitations:

    • Only one color can be used per icon.
    • The icons scale as a whole, much like an image. This can be bad if you want to use thin lines: if you make the icon twice as large, the stroke will have a double thickness. So, you’d have to provide two icons: one for when it’s displayed at a small size, and one for the larger size.
    • Iconfonts are cached by the browser. Depending on how you use it, this caching can be of great advantage for the page load or an extreme disadvantage because it does not change when you want it to.

    The benefit of an iconfont is that you can style them with CSS:

    • You can do everything with an icon that you can do with a regular character: change size, color, shadows, rotation, opacity, scale, and so on.
    • Stacking multiple icons on top of each other is an easy way to still create simple multi-color icons.
    • Simply animate them with CSS3: the icons can move, rotate, change color and so on.

     

     

    If you’re not using an existing iconfont like font-awesome, you can use Icomoon.io to create it from scratch. This is a trustworthy service and it also provides a json-file that you can store in your versioning-system (like GIT). This way, anybody in your team can easily edit the iconfont later. If you want to know more about the creation of an iconfont from scratch, there is a good tutorial about it here.

    2. CSS DRAWINGS

    Simple graphics like rectangles, circles and triangles can easily be created with just CSS and HTML. These shapes can be animated with CSS or JavaScript. 
    Entire icons-sets can be built with CSS, like this one on cssicon.space or these nice animated hamburger-icons. You could even create a crude animatable font out of it.

    The greatest example of this technique is species-in-pieces.com (view this website in Chrome). Other examples of CSS-drawings are a dog, another dog and some minions.

    3. SVG

    Scalable Vector Graphics (SVG) is an XML-based language to describe to the browser how the shapes must be drawn. Animating them can be done in a variety of techniques. However, not all of them have good browser support. Some of the options you have for using SVG online are:

    • Inline in the HTML file. The most flexible method. You can put the class-attribute on parts of the SVG-code and edit it with CSS. This technique is perfect when you’ve got a logo that needs to change according to the screen size or events. A popular implementation is to show the regular logo on larger screens and hide certain parts of it on smaller screens. You can also create a fancy hover effect on them, like this logo that changes into a house.
      For SEO optimization, inline SVG's are also interesting because the text inside the SVG can often be read by searchbots.
      Do keep in mind that this will not be cached by the browser. If you’ve got a lot of single-color icons, it’s still better to use an iconfont.
    • Treat it like a regular image as an img-tag in the HTML, or as a background-image in the CSS-file. This way, all devices will have the sharpest rendering possible but they won’t be able to use the unique editing capabilities from an inline SVG. 
      Of course you can create an image sprite of your SVG like you would do with a regular image. Depending on the icons you’ll end up with a file size that’s not necessarily smaller than a regular retina image-sprite. 
    • As an SVG-sprite with “use”. This technique puts all the icons on the page so they can be used an infinite amount of times with very small code per use of the icon. They maintain the editing and animation possibilities of the regular inline SVG. This technique is perfect when you use a limited set of vector-shapes many times on one page. An example of this would be a page with 100 snowflakes on it: each one is the same image but all of them can have a different in color, size and animation speed. 
      You can also use SVG-sprites with lots of icons in single-page apps. Only the initial load may take a while. For regular websites though, large SVG-sprites are not recommended because they're not cached, and they bloat the html with a lot of icons that are not necessarily shown.

    Animations on an inline SVG:

      • SMIL is a stillborn technique but if you’d like to read more about it, you can read this article on SVG animations.
      • Animation with CSS3 - By adding classes on paths of the SVG, you can animate them with CSS: you can give lines a different stroke-width, you can change color of paths, or even hide them. All of this is perfectly animatable. A good tutorial on this topic is this one of tuts+. The result of this tutorial can be seen on this page and the skinning possibilities can be seen on this page. I highly recommended that you check them out because they are perfect examples of the possibilities of inline SVG. Another example are the animated weather icons of Josh Bader.
      • Animation with JavaScript is the most flexible solution. There are many JavaScript libraries that aid in the manipulation of SVG animation. See an example of Legomushrooms moJs , or one with Snap.js on Codyhouse or the one of Vivus.

    Conclusion

    Vector images and their animations can enhance the user experience of a website when used correctly. We hope our tips inspire you on how to use them for modern website design. As we’ve seen, the context defines whether it's best to use an Iconfont, CSS drawings or an SVG. Overall SVG are best used for logos, icons and simple graphics. CSS-drawings can be handy for localized uses but are harder to use in a large-scale design system. Iconfonts are great for simple icons on regular websites, as they have some limitations.

    Published on 09/07/18    Last updated on 16/07/18

    #Web Development, #Web Design

    About the author

    Wouter Lemoine doubles as Front-end Developer and Functional Analyst at AMPLEXOR, based in Belgium. He specializes in user experience and web-animation. With over 10 years of experience in digital marketing and software development, Wouter has worked on digital platforms and applications across the globe.

    SUBSCRIBE TO OUR BLOG

    Participate in this discussion