How to Add Animated SVG to Your Website

Updated on: January 27, 2020

There are multiple ways to add an SVG to your website. Please note that there is a difference if you export animated SVG with JavaScript as the animation type instead of CSS.

If your SVG includes JavaScript, then you must use the <object> tag as described below or add the code inline to your website.

With CSS, you can use one of the following tags:

a) Using an <img> tag

For example <img src="sample.svg" /> . Please note that interactivity for <img> tags are disallowed in most browsers, so in case you’ve selected ‘Animate on mouse over’ for your SVG when you’ve exported it, this will not work with an <img> tag. You can use an <object> tag instead.

In some cases, a certain SVG with CSS will work perfectly fine in Chrome and it will be broken in Safari. One of the reasons might be a new update. Please also check if you are using the latest version of your browser.

b) Using an <object> tag

If you’ve made an interactive SVG, you should use the <object> tag instead of <img>

<object type="image/svg+xml" data="sample.svg"></object>

In this case,the SVG will not be available on image search. To fix this, you can use an <img> tag as fallback:

<object type="image/svg+xml" data="sample.svg">

<img src="sample.svg" />

</object>

c) Using inline SVG in HTML5

This means that you will simply place the SVG code inside HTML:

<body>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" />