Third Mind | Here Comes SVG, Again
2622
post-template-default,single,single-post,postid-2622,single-format-standard,ajax_leftright,page_not_loaded,,qode-title-hidden,side_area_uncovered_from_content,transparent_content,qode-child-theme-ver-1.0.0,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

Here Comes SVG, Again

Third Mind began using Scalable Vector Graphics [SVG] several years ago as the initial retina display / Responsive [RWD] requirements were emerging.  We used them in ‘sprites’ contexts for audio / video / slideshow player icons and WordPress Theme iconography. It seemed natural to gear-heads like us that SVG would catch like wildfire. However, adoption slowly seemed to dwindle.

While these days developers seem to be pushing CSS3 / HMTL5 techniques [CSS3 polygons] to fill this ‘vector adoption’ gap we have noticed an SVG resurgence over the last year and couldn’t help but wonder what has changed.  Well…as Responsive Web Design / Development sweeps the World Wide Web, the importance of graceful degradation and progressive enhancement has forced the attention back on SVG, which is known for its lightweight and scalability traits. As you may know, SVG streamlines workflow because there is not only one file across all devices, that one file is shared between design and development. SVG allows individual elements within the graphic to be targeted for animation or manipulation, allowing alternate versions of one file to display differently no matter which device is being used.

Here is an example of CSS3 polygon vector research.

Here is an example of CSS3 polygon vector research.

Desktops, tablets, mobile phones—SVG is a great way to target all devices through a single image and by now, most browsers are supporting SVG files so we are hopeful its adoption may spread this time around.

Explore the links below if you are still wondering if, this time, SVG is here to stay.

http://blog.iconfinder.com/the-fall-and-rise-of-svg-how-svg-is-more-relevant-than-ever/

http://viget.com/inspire/responsive-logos-part-1-tips-for-adapting-logos-for-small-screens

http://ageekandhisblog.com/graceful-degradation-vs-progressive-enhancement/

http://thinkx.net/blog/friday-at-four-lets-use-svg