Animation inside a .svg img file

[emilychews]

Hi

 

I was looking at this site today https://envylabs.com/  and if you scroll down to the 'Proven Services' section of the homepage they are animating a .svg image file.  I was always told this isn't possible?

Is this something that can be done with Greensock?  The animations are straightforward enough, but I don't know how they've managed to animate the contents of a .svg file and then use it inside an <img> tag.

 

Many thanks

Emily.

[OSUblake]

You can animate an SVG inside image using CSS and SMIL, but not with JavaScript. Why do you want to do this?

[emilychews]

Oh OK, thanks Blake. I thought it would be handy in terms of sending animations etc to clients as img files etc and when they're happy just dropping them into an <img> tag. It was more the surprise at seeing it done than perhaps the practical applications of it in hindsight that got me excited.  

[OSUblake]

You can send SVG animations to your clients. SVGs are documents, and you can include/run JavaScript inside of them. Just not as an image.

 

You shouldn't have any problems as every browser can open up an SVG.