DeeThemes supports this item


60 comments found.


I just bought your plug-in and it works great. Your video was very helpful to get up and running

Two questions.

1. I create the artwork in illustrator, bring the code into the SVG editor, but to get the code back to an image I used the website Is there a better way? In other words to get the code back to a svg for WordPress import.

2. Also, I’m curious to know if you can make a fallback recommendation for IE. I’ve researched and there are so many out there not sure which method is best.

Thanks for your time and good luck with the plug-in!



As I understand you bought a WP plugin? If so you put the comment into a wrong place.

In any case, the steps are:
1) Create an artwork in Illustrator;
2) Save it as SVG;
3) Optionally optimize it on Peter Collingridge website;
4) Save an optimized SVG file;
5) Bring the code from that file into the Enliven ‘Em animation editor;
6) Save animated SVG as new file;
7) Upload and integrate this new file on your site.

If you mean IE6-IE8 fallback I don’t see any decision. These versions doesn’t support SVG at all. But your animations will work in IE9 and up.

Best regards, Dee

I appreciate your prompt reply!

My question is at step 6. How do I make the file from the Enliven animator editor?

Thanks. And sorry for positing in the wrong place!


After preparing all animations simply click “Result” tab and copy-paste ready SVG code into a new file in any text editor (not MS Word). Save it on your HDD and upload to your server.

Forget to say: give that new file a name with .svg extension, something like this: my_illustration.svg

Works! Thanks so much!

Really nice tool! Only just got into SVG’s after being inspired by your Livicons (got them included in a template). Very impressed and nice smooth animations. Very happy :D

Unfortunately no, not at present time. The main purpose of this script is to animate an SVG when it become visible in a user’s browser viewport. Click event and loop is just a bonus.

Its a nice bonus, but hover would be really helpful for me :) i mainly wanted this so i could make my own animated icons for my sites. Please consider adding this function :)

I will not promise, but try to do my best.

Really nice work!

Can this pluguin run on boostrap?

This script doesn’t have any dependencies on any CSS frameworks. It must be used with SVG illustrations only.

Awesomeness :) Great work!

Is it possible to add a link to an element in the animation? For example I want to link the word “Welcome” (in your airplane example) to a certain page, is that possible?


Yes, of course. But you need to do it not in my Animation editor, but in any code one. You can simply wrap a shape or a group with <a> tag like this:
<a xlink:href="/svg/index.html">
    <g> ...grouped shapes go here ... </g>

More info you can find here:

Thanks for your quick response and information!

Yes I meant with the Animation Editor, but that doesn’t make a difference. I was just curious if I might missed it in the demo.

Please keep up the good work! I’m going to play with my new toy now ;)

Thank you for the purchasing!

Thanks for this fine script! So far is working great.

I have an optional question: I gave all objects an ID in Adobe Illustrator. Now I wanted to use the .svgClick event. The IDs are there. $(”#object”).svgClick()

Can you give me an example code maybe for an simple alert on click?



Thank you for the purchasing.

I guess there is some misunderstanding. This method is just for imitate a “click” event instead when you or your visitors click your SVG illustration.

But you can try this code to show an alert:
jQuery('#object').click(function () {
    alert('The SVG object was clicked');


Regards, Dee

Hi, Having some issues with a complex SVG, i paste the code in, it shows the image on the next page but no items are shown, so i can’t animate any of it. I did try using the SVG optimisation site and tried again with an optimised SVG but still no joy. Any ideas?


Seems that there are some errors in SVG code. Please try to open your initial (before any animations) SVG file directly in Google Chrome. Chrome will show errors if any in your code.

Managed to get it working, there where no errors, but lots of layers within groups in Illustrator. Many of them where not used and not visible. I removed them and now its working again. Thanks for the quick reply!

You are welcome!

I have been a regular on this site since it was called Flash Den, and this is one of the greatest things I have purchased. I am however experiencing difficulty inserting a finished svg into and existing HTML page. Problems such as: the graphic displays but does not animate along with making the existing page not display properly. What files need to be in my root directory? And what specifically to I put into the code of the page?

There is a complex issue. If look at JavaScript console (F12 key) in Google Chrome or Firefox you will see that all necessary Enliven’Em files are missing (not found). You need to correct paths of those files in your HTML code.

For example:
1) Create a folder “enlivenem” in your root “ffm” directory.

2) Upload “css” and “js” folders with all their content from the “upload” one of my item’s pack into that new “enlivenem” folder

3) In that case your code should look like this:
in HEAD section:
<link href="enlivenem/css/enlivenem.css" rel="stylesheet">
before closing BODY:
<script src="enlivenem/js/snap/snap.svg-min.js"></script>
<script src="enlivenem/js/enlivenem.min.js"></script>
4) DO NOT include my example jQuery declaration! You already have one:
<script type="text/javascript" src="includes/extendjQuery.js"></script>
5) I see that you use my icon. Keep in mind that it will become very big (100% width) due to your current code. You can wrap it with DIV or SPAN and set a desired width for that element. For example for centered icon with 50% width:
<span style="display: block; width: 50%; margin: 0 auto;">
    ...SVG Icon code goes here ...

I think I did everything you instructed, but no luck. Thanks for your patience. If you have the time please check to see what I screwed up this time. same link

Now Chrome console shows that variable jQuery is not defined. You have a not usual folders and files names on your site. Please ask your theme provider how you can enable the calling of variable “jQuery” (case sensitive) for JavaScript needs.

Or, not recommended, you can download jQuery from, upload it to your server and include a declaration in your HTML markup in a HEAD section.

At Footer area your are mention below text.

This Editor is designed for your local use only. Please do not upload it to any server (hosting) and/or do not make it available online.

Let me know can I use this “Animation Engine” script at my website.

In this case I think my product doesn’t suit your needs. Uploading of the Animation Editor and making it available online is strictly prohibited.

In any case thanks for the interest.

Okay. Can I use “Animation Engine” for commercial purpose. Any plans “Animator Editor” for public in future.

No, you can’t resell my script. You can use it only according to this:

No, the Animation Editor will not be allowed for public using.

Sorry, but i dont want to read the wall of text in your docu. Where are the code-example with the svg icons?!

What the code do you mean?

All free SVG icons that you can download from my demo site have already included all the necessary data for their animations. You can also create/edit your own animations in the Editor which you can find in the “animator” folder of the download package.

In any case you have to get familiar with the documentation of at least sections “Setup”, “HTML and CSS Structures”, “Integration” and “Tips”. They are not the “wall”.

I want to use this for my PHP project that allows users to create animations using the editor, I want to know if the output is safe for rendering (XSS?) and if there is a way to safely + easily store the output in MYSQL?

No, you are not allowed to upload the editor and make it available online, it’s designed for your local use only.

Hi, I can use the ‘draw lines’ animation IN but i would like to do something to the same image after it has completed. How do i do this?

IMAGE > DrawLines IN THEN Fade OUT.




As I said in the “Tips” section of the documentation:
“If you want to make several animations on one basic element, wrap it with additional g tags as many as you need animation steps and apply different animation options to these groups.”

Hello , i have checked your plugin and it looks nice and i was wonder if i can use it with sliders plugins , such as master slider or whatever .. i had a problem before with displaying SVG animation with them .. the animation was appear only when the slide load , but when the slide repeat the animation disappear .. the question is , can i use your plugin to repeat animation everytime the slide display?


No, I don’t think so. The main purpose of this script is to animate a SVG when it becomes visible in a user’s browser viewport only once. And also an animation can be repeated when user click or tap your graphic.

In any case, thanks for the interest.


Got a quick pre-sale question. Can I use this to animate SVG and then save it again as SVG? (for example I’m creating a website in Muse and there’s a preloader widget that I will use and that widget only requires me to upload already animated SVG.)



No, it’s not possible.

Excellent library! I have it integrated and it looks great but the W in our logo does not appear to load on iphones (verified version 5 ios 9.2.1). What would cause that?


I can’t test it because I don’t have any Apple device now. But I see that all your letters consist of a lot of layers. Maybe Safari can’t work with this kind of SVG. In general, I recommend to make some sort of optimization of your initial SVG graphic before making an animation.

Just bought your perfect plugin. Please help me with something. I have phpbb3.1 forum. Can u explain the code insert for phpbb 3.1 styles . Where to put javascript files and css for forum function. thanks and br, Marko


I can’t help with phpbb forum, I’ve never worked with it.

In general, you need to declare CSS files inside a <head> ... </head> section of your HTML (PHP) code and JavaScript ones at the end of your page before the closing </body> tag.

Thanks Dee, also i made a mistake, i wanted to by wordpress plugin , but i can still ad classes manually ,right ? I dont need actually the plugin ?

Sorry for the delay, it was a night. Yes, just define CSS and JS in your code and add class “enlivenem” to <img> or <SVG> tags with your animated graphic.

Hi, great plugin! I would like to resize the svg image which is not a hard task but there is always that padding-bottom:100% in the inline style that displays a big gap below the svg images. How can that padding be removed so that it also removes the big gap when the image is being resized? Thank you

The “padding-bottom:100%” is mandatory for a container with SVG to be that SVG responsive. If you set fixed width and height for your SVG simply use “notResponsive” option in the “data-global-elvn” attribute.

By the way, I don’t see that you have purchased my item.

Hi and thank you for your quick reply. I did purchase your item yesterday, I have the purchase code if you would like to see it. Keep up the great work!

This doesn’t sound newbie friendky. Is the WordPress easier to work with? Do you give us some sample svg files to work with? I can create them in illustrator too

No, this product is friendly as much as possible. Please look at the Animation Editor: which is included in the download pack
and check on-line documentation for WordPress:
and for jQuery:

Hello, what is the minimum version of JQuery needed?

Hello, the version 1.11.1

Very very nice script !!!! I usually code everything by hand…... This will save me alot of time…

Thank you!