Help Center
>
Getting Started
>
Add animated SVG to your website

Add animated SVG to your website

There are multiple ways to add an SVG to your website, and we recommend the following 3:

  1. Using an <object> HTML tag
  2. Using inline SVG in HTML5
  3. Using an <img> HTML tag

Please note there is a difference if you export animated SVG with JavaScript as the animation type instead of CSS as the animation type.

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

If your SVG uses CSS as the animation type, you can use any of the 3 methods described below.

1. Using an <object> HTML tag

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

<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 a <img> tag as a fallback:

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

<img src="sample.svg" />

</object>

2. 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.

3. Using an <img> HMTL tag

For example <img src="sample.svg"/>.

Please note that interactivity for <img> tags is 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 a <img> tag. You can use an <object> tag instead.

In some cases, a certain SVG with CSS as the animation type 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.

Discover more articles on SVG implementation:

How to Add Animated SVG to WordPress? | SVGator Help
Download SVGator’s plugin for WordPress and add stunning SVG animations to your website right away! Import your projects to your Media Library. Try Now!
SVGator
How to Add Animated SVG to React Native | SVGator Help
React Native is great for building mobile apps, especially if you are already familiar with React. Now you can make it even better with animated SVG files.
SVGator
How to Add Animated SVG to React Websites | SVGator Help
There are multiple React frameworks that you can use for your website: React websites based on Create React App, Webpack, Gatsby or Next.js
SVGatorGitHub
How to Add Animated SVG to Squarespace | SVGator Help
You can use SVG animation on Squarespace if you are a Business or Commerce user. Add a new code block and copy the entire SVG code into the html block.
SVGator

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