I am trying to teach myself some very basic SVG animations. Here is a bicycle with animated wheels and a throbbing heart. On hover, the animations move faster.

It is interesting to note that various ways of embedding an SVG file. Some methods seem better than others, depending on the situation.

Object

Hover the mouse over the bike to see the wheels and heart speed up.

This is my favorite way to embed an SVG at the moment. It allows for a separate file with a fallback and it respects animations and styles defined in the standalone SVG file. 

<object width="320" type="image/svg+xml" data="/bike-love.svg">
    <!-- Fallback -->
    <img width="320" src="/bike-love.svg" />
</object>

Image

Embedding an SVG as an <img> seems simplest. However, note that the animations do not work on hover. 

<img width="320" src="/assets/svg-bicycle/bicycle.svg" />

Inline SVG

Embedding the raw SVG provides the same full support as <object>, but embedding SVG inline in a document is not always ideal.

SVG With use Tag

Support for this seems flakey to me. It seems like <use> is best left for using pre-defined <def> tags, and not importing external SVGs like I am here.

The animations here don’t work at all in Chrome, and the behavior is a bit odd in Firefox. In FF the hover effect works only when hovering over a path or other object. Whitespace hovering in the bounding box doesn’t work, unlike when using <object> or inlining the SVG.

There’s also a catch in FF in that the animations only seem to work because I just so happened to import the styles above for the inline SVG example. 

<svg width="320" viewBox="0 0 185 110">
    <use href="/assets/svg-bicycle/bicycle.svg#layer" />
</svg>