Wouldn’t it be great if you could make the logo on your website look nice and sharp no matter the screen size or if it is being viewed on a retina display? Well, guess what. It is possible with SVG, and you should definitely start using it now.
So, what is SVG everyone’s keep talking about lately?
SVG stands for Scalable Vector Graphics. Basically, it is a vector image format that can be scaled to any size without losing clarity, translated into XML markup language making it easy for browsers to read and render on your screen.
A brief history
SVG, is not a new meaning. Actually, it has been around since 1998, developed by the W3C SVG Working Group. At that time two other XML-based vector image files have been introduced. VML by Macromedia and Microsoft and PGML by Adobe Systems and Sun Microsystems, but it was SVG 1.0 that finally became a W3C Recommendation on 4 September 2001.
Since then followed SVG 1.1 (January 2003.), SVG Tiny 1.2 (December 2008) and SVG 1.1 Second Edition, which includes all the errata and clarifications, but no new features to the original SVG 1.1. It was released on 16 August 2011. Work is currently in progress on SVG 2 with new web features such as CSS, HTML5 and WOFF.
What are the benefits of SVG?
Small file sizes that compress well
SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. When an SVG image has been compressed with the industry standard gzip algorithm, it is referred to as an “SVGZ” image and uses the corresponding .svgz filename extension.
Looks great on retina displays
SVGs as with all vector graphics, can be scaled to any size without losing clarity (except very tiny). In other words, you can zoom in to an SVG all you want and they’ll always look sharp. So, you no longer have to create a @2x Retina version for your image logo.
Can be animated and styled
Using the svg tag to embed the graphic on our website allows us to style it easily through CSS, the same way we do with regular HTML tag. We can change object properties such as background color, opacity, position, width etc. Additionally, we can add impressive animation effects using a combination of JS libraries and CSS.
It has full support
After many years of browser incompatibilities, the age of SVGs has finally arrived. They’re supported in all modern browsers including IE9 (source: caniuse.com). You can even use Fallbacks if you still care about IE8.
Better loading times
SVGs are great for the web because they have infinite resolution and very small file sizes. It can be embedded directly into an HTML document with svg tag, so the browser does not need to download the graphic. This means that your website will load faster!
Image Credits: Bitmap VS SVG” by Yug. Licensed under CC BY-SA 2.5 via Wikimedia Commons
Free Web-based Applications
It seems that SVG is here and will be around for a long time, as long as the W3C sets the global industry standards. So. if you haven’t done already, I think it’s the perfect time to start familiarise yourself with SVG and using it as part of your design process.