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

</svg>

</body>

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


More articles:

Add animated SVG to WordPress

Add animated SVG to React Native

Add animated SVG to React websites

Add animated SVG to Squarespace


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