SVGs and the Scalable Web
Benefits of SVGs
- Ease of styling
- Animation capabilities
+ Ease of styling
If you find yourself reconstructing a dozen icons for a simple color change, stop. Since SVGs are code-based elements, they are capable of being styled by CSS. Color changes to one or all icons is a line of CSS. Hover effects are just as easily accomplished. You can smoosh, scale and color the XML SVGs to give your user selection feedback without having to create intricate stage sprite sheets. Change opacity, rotate, make it bounce. This leads us into our next benefit.
+ Animation Capabilities
The web world continues to trend towards animation and motion to enhance user experience. Possibly the coolest part of using SVG's is the ability to animate them. Want your company logo to draw itself on load? Want your fullpage background to slowly rotate? Need an icon to morph when clicked? These animations are all doable with SVG's and a little imagination. These animations do take time to write and perfect, however, they keep your audience from needing to load an HTML5 Canvas and assets.
SVGs are widely supported. Being XML files, most browsers have no issue. For more information on browser support, visit caniuse.com. There are some IE8 fallbacks that will need to be added if you still support that browser.
Where to start?
SVGs take a little practice to get the hang of. The good news is that vector-based programs, such as Adobe Illustrator, can export these files for you. Icon and logo replacements are easy to do. You're simply adding a uploading an XML file instead of a PNG and the reference changes slightly. If you're looking to perform advanced animations, it will take some patience to get the hang of it.