svg animation

Create a new SVG animation now!

New project

Add animated SVG to Vue.js

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

That's because Vue.js 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 Vue.js.

The SVG has to be formatted to look like a Vue.js component. That's what we will show you in this guide.

Step 1

Let's start by exporting the SVG.

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

Step 2

Next, create a component for the SVG and put the following content inside.

<template>
  <p>svg part here</p>
</template>
<script>
export default {
  name: "MyVueComponent",
  mounted() {
    // javascript part here
  },
};
</script>

Step 3

Once you got the template for the component ready, you can add the SVG and the JavaScript inside.

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 .

Our example is 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.

vue js svg

Copy the selected SVG and paste it between the <template> tags in the Vue.js component that we created earlier.

After you pasted it, make sure to add the missing closing </svg> tag at the end of the copied code.

vue js svg

Now it's time to add the JavaScript that resides between the <script> and </script> tags. Here we need to do some modifications.

This part looks like this:

<script><![CDATA[!function(t,n){"object"==typeof expo.........."many lines"...................]]></script></svg>

1) Delete the "<![CDATA[" part.

vue js svg

and it's ending "]]>" .

vue js svg

2) This is the easiest , just delete the last </svg> tag.

vue js svg

3) The last thing we need to modify is a variable. If you search for it, you will find two, but we only need to modify the second one.

Change "__SVGATOR_PLAYER__"   into "this.__SVGATOR_PLAYER__".

You can see it changed here.

vue js svg

Now, we can copy the JavaScript part and paste it in the Vue.js component.

Select what's between the <script> and the ending </script> tag. Do NOT include the script tags in the selected part.

vue js svg
vue js svg

STEP 4

Paste the JavaScript right between the brackets in the mounted hook.

 <script>
export default {
  name: "MyVueComponent",
  mounted() {
      // paste here
  },
};
</script>

All it's left to do, is to import the component and it should work.


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