svg animation

Add animated SVG to your website

There are multiple ways to add an SVG to your website:

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.

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" />


c)  Using inline SVG in HTML5

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


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


It supports interactivity, but the SVG will not be available on image search.

Still got questions? Send us an email to and we will get back to you as soon as we can.