Since SVG elements can listen for mouse-based events (clicks, hovers, and so on), you
could improve upon this demo by turning it into an example of SVG element interaction.
With the aid of jQuery and Velocity, one such implementation could look like this:
Click here to view code image
$(“svg”).on(“mouseover mouseout”, function() {
$(“#circleLeft, #circleRight”).velocity(“reverse”);
});
This triggers a reversal of the circles’ page-load animation when the user hovers on or
off the SVG element. The single line of code accomplishes this by leveraging Velocity’s
reverse animation command. For more on working with reverse, refer to Chapter 2,
“Animating with Velocity.js.” In effect, when the user first hovers, the page-load
animation is reversed. When the user then hovers off, the reversal is itself reversed,
bringing the logo back to its original form.
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 (https://github.com/jonitrythall/svgpocketguide).
For a directory of SVG element types and their properties, consult Mozilla
Developer Network (https://developer.mozilla.org/en-US/docs/Web/SVG).
For a listing of all the SVG attributes and styling properties that Velocity can
animate, refer to VelocityJS.org/#svg.