Establish a powerful digital experience custom-built to ensure maximum ROI for all your marketing efforts.
More customers, increased revenue, and peace of mind knowing you have a team of experts driving you forward.
Brian Ferdinand , Front-End & UX Development Manager
As a former Mercedes Benz Master Certified mechanic, Brian has a knack for seeing how complex systems work together and has extended his expertise to the web, working on enterprise-level WordPress websites for world-renowned clients.
With ample experience with both back and front-end technologies, Brian embraces his full stack niche and enjoys everything from tweaking animations and user experience to building out API’s and plugins.
January 20, 2016 | Reach an Audience
It seems that every time you turn around, there is another three-letter acronym (I know, SVG is an initialism, not an acronym, but you know what I’m saying). I often wonder if eventually that is how we will all communicate. No real words, just acronyms. Either way Scalable Vector Graphics, the long-winded version of SVG, has been constantly gaining in popularity and, as such, the industry is finding more and more uses for it.
What SVGs are is yet another three-letter term, XML. For those who aren’t familiar with XML, SVGs essentially are human-readable code that is then rendered by your browser. Because SVGs are created by lines and paths, which are just calculations done by the browser to render them, they are infinitely scalable. Referred to as vector graphics, this allows for SVG to be extremely flexible and useful. However, it is not without its downfalls. Thankfully, one of those is not support.
According to caniuse.com, all modern browsers, even going back a few versions, support SVG in nearly all capacities. The only real issue is Internet Explorer (no comment on this ). The main issue with IE is that it does not properly scale SVG images and only supports SVG in IE 9+. There are ways around this issue though—via creating constraints with CSS.
There are many benefits to using SVGs. One of the primary ones is their responsiveness. Because they are vector based, they will scale indefinitely and look good doing it. The other side of that is retina screens. SVGs do adjust to the screen, and they will still look crisp on double pixel density retina screens.
SVGs are also rather easy to style and animate. You can target the individual paths and groups like you would any other styleable element. This is great for doing simple images and animating them. Because it is easy to add a class to a specific path or group, you can then target it to transform it and change its fill color and even opacity. This allows for quite a few options for being able to create custom graphics and animations that are all infinitely scalable.
[snowman]
Unfortunately, there are a couple of drawbacks to this format. One is that complex images are difficult. That doesn’t mean they are impossible, but if you think about creating a path or line for each mark made in a photograph, that would likely take quite a while. Additionally, when you are animating your SVG and working with it, it is important to note that SVG elements are not governed by a box model. This does make positioning a little tricky sometimes, but there are many workarounds available to address this.
Icons are a role that was made for SVGs it seems. Because you can style and change colors of your SVG, it is easy to create an infinitely scalable icon that can have hover states or small animations, and it looks good on every screen at every size. You can even go as far as creating SVG sprites, but we’ll leave that topic for another day.
Since their inception in 1999, it has been interesting to see the transition and now finally the SVG acceptance to the web. SVGs have it all, are extremely powerful, and look good everywhere. Please go ahead and share some of the ways you have been using SVGs in the comments below.
Share