SVG – Expect more from your graphics
Scalable Vector Graphics or SVG is a XML based, 2-dimensional vector graphics format developed and maintained by the W3C, the international standard for the World Wide Web or the ‘www’ as you know it.
SVG is resolution independent and supported by modern browsers and works across mobile devices as well.
Under the hood, SVG uses XML to create paths, shapes, colors, gradients, patterns, masks, clipping, effects and compositing, to give you graphics that are scalable, interactive and resolution independent.
Graphics help present information in an effective manner providing a better understanding of the subject matter. JPEG images and PNGs, widely used image formats on the web have satisfied this need unfailingly. SVG offers benefits that other image formats do, along with an array of other advantages for internet users, web developers and internet marketers alike, taking web graphics to the next level.
SVG – The Goodies
1. Content in SVG can be indexed and searched
SVG, being XML based offers enormous advantages over other formats. Parts of your SVG graphics can now be indexed and searched, an important feature vital in the era of internet marketing. Earlier, web designers and internet marketers only had a couple of tools to optimize images for search engines. Now with SVG, your images can hold more meaningful content in the form of text and links that can be crawled and indexed too. Now isn’t that a treat!
2. Ideal for Responsive design
We all agree that a necessity for scalable graphics has given vector formats its rightful place. Well, SVG leverages this even further where graphics can now be rendered directly as vectors in web browsers. SVG’s resolution independent feature makes it an ideal format for creating responsive web pages. Besides viewing these graphics in devices with different resolutions, users can now zoom in without compromising on sharpness and clarity of graphics. And that’s wonderful news!
3. Make your graphics interactive with SVG
Developers have even more to rejoice about! SVG, being XML based can offer more interactivity when sprinkled with the niceties of JavaScript. If you are a developer reading this I’m sure you have already figured out the endless possibilities; to think that dynamic graphic generation, animation, effects, tooltips and time based modifications is now incredibly convenient!
4. Lightweight capabilities
SVG is also lightweight compared to the PNGs and JPEGs that have been in use for years. This means faster downloads and less consumption of valuable bandwidth, without compromising on quality in any way.
SVG’s are well suited for data compression without loss. You can expect a reduction of 50 to 70 percent without any deterioration in quality. Just another advantage of being XML based. It can be compressed using the standard gzip application, which produces a file with an extension of ‘.svgz’.
How and where can we create SVGs?
This is the most exciting part! You do not need to know to how to write XML to create SVG graphics. Yes, you may read that again!
You may use any of the following applications to create SVG images.
- Adobe Illustrator
- CorelDRAW
- Inkscape, a free application for creation of vector graphics
- GSview, a free application to view and convert vector graphics
Note: GSview may be used to convert your EPS and PDF to SVG formats.
Where can we use SVG graphics?
Well I surely do not need to elaborate on this, do I! SVG can be used practically everywhere, and with technologies such as HTML5, CSS and JavaScript libraries, the possibilities are endless.
Taking it SVG Graphics further
There are endless tutorials, articles, suggestions and other stuff to enlighten you on the topic. Here I have outlined few.
To get started and get an idea of SVG and its potential, please follow these tuts
- https://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i
- https://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
This one here is to inspire you, and to help you move forward with SVG implementations
If you are keen to know more, dig deep into the SVG documentation provided by W3C
I hope you have made the most of this read. Please do leave your comments and opinions. I would also love to know how this has helped you! Thank you!
