Tech News

Scalable Vector Graphics Primer- Animated logos

Since an in-depth tutorial on Scalable Vector Graphics (SVG) could easily comprise a book of its own, this chapter simply serves as an introduction to the topic. The goal is to equip you with enough knowledge to be comfortable animating SVG elements and to know where to go next to continue your learning.

Creating images through code

An SVG element is a type of DOM element that borrows the syntax of the HTML elements you’re already familiar with to define arbitrary shapes. SVG elements differ from HTML elements in that they have unique tags, attributes, and behaviors that allow them to define graphic shapes. Put another way, SVGs let you create images through code. This is a tremendously powerful concept because it means you can programmatically style and animate these shapes using JavaScript and CSS. In addition, SVG offers many other benefits:

  • SVG compresses incredibly well. Graphics defined in
  • SVG have smaller file sizes than their PNG/JPEG equivalents, which can greatly improve site load times.
  • SVG graphics scale to any resolution without a loss of clarity. Unlike standard image formats, they look razor-sharp across all devices—say goodbye to blurry images on mobile screens.
  • Like HTML elements, SVG elements can be assigned event handlers that respond to a user’s input, which means that the graphics on your page can be made interactive. If you so desired, all the buttons on your site could be turned into animated graphics.
  • Many photo-editing apps (including Adobe Photoshop, Sketch, and Inkscape) let you export your design work into SVG format for quick copying and pasting into HTML. So, even if you don’t consider yourself an artist, you can leverage third party applications to do the designing for you.
  • In short, SVGs are an amazing graphics solution. Let’s dive in!

Implementation example: Animated logos

High-resolution site logos that animate into place upon page load are ideal targets for SVG implementation. Suppose you want to crudely replicate the MasterCard logo, which consists of two overlapping circles of different colors.

Here, the left circle is animated 15 pixels leftward (using the “-=” operator to instruct Velocity to decrement the circle’s current value) and the right circle is animated 15 pixels rightward. The spring easing provides added flair by making the circles bounce away from one another with propulsive force.

While this code example is undoubtedly anticlimactic, this is once again a good thing because it reflects the similarities between animating SVG and HTML elements. Where SVGs do start to become uniquely complex is when you define arbitrary shapes that go beyond the basics of squares, rectangles, circles, and so on. After all, SVG elements can define any shape you can dream up in a photo editor, so they have to be tremendously expressive. And they are. But mastering SVG design is beyond the scope of this book. See the “Wrapping up” section of this chapter to learn where to go next to continue learning.

Wrapping up

If you’re intrigued by what you’ve read so far and want to learn more about working with SVGs, check out these great resources:

  • For a full overview of working with SVG elements, refer to Joni Trythall’s fantastic and free SVG Pocket Guide.
  • For a directory of SVG element types and their properties, consult Mozilla Developer Network
  • For a listing of all the SVG attributes and styling properties that Velocity can animate.

Last word

To gain comprehensive SVG animation support, use either a dedicated SVG library or an animation library that has built-in support for SVG elements. One noteworthy dedicated SVG library is Snap.SVG It probably won’t surprise you to learn that Velocity.js, the JavaScript animation library you’ve been using throughout this book, provides full support for SVG element animation.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button