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

</object>


c)  Using inline SVG in HTML5


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

<body>

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

</body>

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



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