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.