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.
We also have an example app on github, that's basically an Angular app with an animated SVG on the home page.
Let's start by exporting the SVG.
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 .
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.
Copy this part .
Go to the SVG template:
- Create a OnInit Lifecycle and paste the code inside, like this:
And that's all. Your SVG should work now.
If it doesn't work or you get stuck, try our github example.
Still got questions? Send us an email to firstname.lastname@example.org and we will get back to you as soon as we can.