Add animated SVG to Angular

You might be reading this because you've animated you first SVG and tried to import it into an Angular project, just like you would import a regular SVG, but even though the SVG loads, it doesn't animate.

That's because Angular needs to load the SVG and JavaScript separately. SVGator conveniently bundles the SVG and the JavaScript together, so you don't have to deal with multiple files at the same time. While this works for most use cases, it doesn't work for Angular.

We also have an example app on github, that's basically an Angular app with an animated SVG on the home page.

If you already added the player on your website, skip step 3.

Step 1

Let's start by exporting the SVG.

Go to svgator.com and export the animated SVG with JavaScript as the animation type.

Step 2

Create a component for the SVG.

Now you can add the SVG to this component.

We will start with the SVG part. This is usually at the beginning of the file, it starts with an <svg> tag and it ends right before the <script> tag.

In VS Code, you can quickly search for these tags using ctrl+ f .

In our example we used a very small SVG file with a single circle element in it. In your case, the SVG might be multiple pages long, but please be assured that the method will work the same.

Copy the selected SVG and paste in the new component file that we created earlier.

After you pasted it, make sure you added the </svg> tag to the end of the copied code.

Now it's time to add the JavaScript that resides between the <script> and </script> tags.

The javascript has two parts, the player and the json data.

You need to add the player just once to your website. When you will add the next SVG animation,  you can skip this step.

Step 3  

Adding the player:

Skip this if you've already added the player to your website.

Copy the code between  "<script><![CDATA["  and "__SVGATOR_PLAYER__.build({"  like this:

Go to your index.html file in the project.

Add  a script tag between the head tags and paste the player between the script tags.

Step 4

Add the json part.

Now we need to add the json part to load in the file where you use the svg.

This piece of code starts with the "__SVGATOR_PLAYER__.build({" and ends before "]]></script></svg>".

Copy this json part .

And paste it where you specify  the SVG template.

Here add a OnInit Lifecycle and add the code inside, like this:

If it doesn't work or you get stuck try our github example.

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