Animate with SVG

SVG is an XML encapsulated vector image file that many websites use because the files can be small and yet, since they are vector based images, they can be scaled to any size. This works very well for responsive sites, logos and branding or other imagery that needs to look good on a variety of displays.

A simple example of this is our logo as you can see here it is quite crisp and easy to recognize and read.

This is the exact same SVG file but with larger with and height defined.

As you can see there is no distortion as you would find with a small PNG or JPG where you specify larger dimensions then in the original image.

As we continued to design using SVG's we found them to be a little cumbersome in CMS' like Joomla or Wordpress. Sometimes we could upload them with the regular media manager uploading tools and other times we couldn't. Support has continued to grow but the question of why can't I just upload the SVG like I do a JPG or PNG plagued me when first working with them. Even at the time of publishing this article when I try and upload an SVG in Joomla I get the error message: Error This file type is not supported. I can go into the Content -> Media -> Options and add svg file type and mime type and I can actually upload the file but it does not show up in the media browser.

why can't I just upload the SVG like I do a JPG or PNG

This lead me to do some additional research. Security experts were claiming that malicious code could potentially be injected into an SVG and there was not a really good way to scan them, so they just blocked them completely. I ended up using a FTP (File Transfer Protocol) application or via SSH to upload all my SVG's. When I did some more research I quickly discovered that there are ways to easily animate SVG's with CSS and Java Script.

there are ways to easily animate SVG's with CSS & JavaScript

Initially in order to animate an SVG I was manually editing the file with a text editor and defining the paths ID's and then calling those ID's in CSS and JavaScript. Since then I have discovered you can do all of it in Adobe Creative Cloud. First off you can define the paths or shapes very easily in Adobe Illustrator by highlighting the path or shape and turning it into a compound path. Then go into the layer and simply rename it from compound path. More details can be found here. Once the ID's are defined, if you are up for the job, start animating it with CSS & JS using codepen.io. If you want to do it more visually with a GUI you can continue your work animating it in Adobe Animate. Adobe has added some basic support for animated SVG's in Animate. 

Some really fantastic examples of animated SVG's can be found here.