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
- 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.
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.