Embed SVG animations

Using the <object> tag

No matter what format you use for SVG animations, the <object> tag is the way to go when embedding:

• supports interactions
• supports any animation format
• avoids bloating the HTML with a lot of SVG code
• you can control the CSS animation using CSS variables

As a downside, website builders do not support it out-of-the-box, so you must add HTML code yourself.

<object
  id="my-animation"
  type="image/svg+xml"
  data="/path/to/animation.svg"
></object>

Using the <img> tag

This type of embedding works great for animations exported using SMIL or CSS, and website builders widely support it. However, the major downside is that interactions will not work.

<img src="/path/to/animation.svg" alt="My SVG animation">

As background image

This works for SMIL and CSS-based animations, and just like with the <img> tag, interactions will not work when the SVG is embedded as a background image.

<style>
.my-svg {
  background-image: "/path/to/animation.svg";
}
</style>

<div class="my-svg"></div>

Inline embedding

Just place the exported SVG into your HTML document. If the SVG file is too large, consider using an alternative from above. This type of embedding is compatible with all three SVG animation formats.

<!-- Your HTML page source-->
<div>
    <!-- Exported SVG animation  -->
    <svg>
        ...
    </svg>
</div>