Jump to content


Animate SVGs stored in Database

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to figure out a solution to a problem. On my banner animation GUI I am building I am integrating some built in css / svg backgrounds. All the backgrounds are stored in the database, but the SVG's seemed more complicated because of the single / double quotes / escaping html entities and so on. The solution I found was to convert the SVG to base64, but then I can't animate it - that I know of. I was thinking of using greensock to have a "shimmer" type effect where it can slowly draw the background and then undraw it and repeat.


Unfortunately the only way I could figure out to store it / render it results in a base64 image as the background. Here is a stripped down codepen that lets you adjust opacity and scale, on my site it also can adjust color which would end up then storing it as the base64 in the db.


I currently have it stored in the DB like this:

<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'>
    <g fill-rule='evenodd'>
        <g fill='#F00' fill-opacity='0.4'>
            <path d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/>

See the Pen qmEKVY by ajhalls (@ajhalls) on CodePen

Link to comment
Share on other sites

I couldn't quite discern what your question was specifically. Are you asking how you should store things in your database or how to inject the SVG into the DOM so that it's animatable or how to achieve a certain effect with GSAP? 

Link to comment
Share on other sites

First, I wouldn't use single quotes in your markup. There's a security hole with that. But you can't animate an image like that. How are you getting stuff from your database?


It's real easy to load an SVG using an XMLHttpRequest (ajax)...

jQuery - http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

more jQuey - http://plnkr.co/edit/IWTAV5jIxzSioTpj8UkJ?p=preview

Vanilla - http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview


Or using the DOMParser...

See the Pen 917a6dcfbbfc8dc14d7c0e7a52a538fc by osublake (@osublake) on CodePen




  • Like 1
Link to comment
Share on other sites

Thanks Jack, I guess it is a little of all of the above. I can modify how I am storing it in the DB if that helps, but I had problems figuring out how to assign it as a background any other way than how I did it. I got the patterns from http://www.heropatterns.com/ which look like this there:

background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");

If it were you starting with this data, and you wanted to animate it, what would you do? I am assuming I can't store it anymore as base64 since you can't animate that.


It isn't just a matter of rendering it, but setting it as a BG to a div as well. I am looking at the ideas posted just now by Blake.

Link to comment
Share on other sites

Yep, Blake is right (as usual) - if it were me, I'd definitely be injecting it into the DOM rather than making it a background image or something like that. You can make it look like a background image with the right CSS (like position:absolute; top:0; left:0, make sure the parent has position:relative, etc.)


Happy tweening!

Link to comment
Share on other sites

Thanks guys, for now it isn't working out. I may be missing something stupid, but for now I am going to move on to the next feature. I just couldn't figure out how to set the background-image property when using escaped / single and double quoted text without using the base64. It isn't the end of the world, it was just a nifty thing I wanted to do.

Link to comment
Share on other sites

Maybe you missed the part in my first post where I said you can't animate an image like that. For starters, it's just a string. Sure, you can animate strings with GSAP, but then you have to encode it and change the background image source on every frame. Even if you used a real SVG as a proxy, the process would still be the same. It's a little easier to do with canvas, kind of like how I'm drawing the frames in this example, but that will not work in any version of IE.


Definitely not something I would consider worth pursuing at the moment. That's why I was showing you how to inject an SVG. And Jack showed some CSS you can use to make an SVG fill its container, similar to a background image. In addition to that CSS, I would probably set pointer-events and user-select to none.



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.