Though it was conceived back in the late 1990’s, SVG is, in many ways, the ‘ugly duckling’ file format that grew up to become a swan. Poorly supported and largely ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it.
It turns out that SVG was the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
So, What Is SVG and Why Should You Use It?
SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.
The true value of SVG is it solves many of the most vexing problems in modern web development. Let’s see what they are.
Scalability and Responsiveness
Under the hood, SVG uses shapes, numbers and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane – only the scale changes.
With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals and to be sure that they will look clear and crisp at any size.
In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which causes them to pixelate when they are scaled. Although various responsive image techniques have proved valuable for pixel graphics, they will never be able to truly compete with SVG’s ability to scale infinitely.
Programmability and Interactivity
SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. By contrast, a chart
One of the most important aspects impacting web performance is the size of the used files on a web page. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.
Common Use Cases and Browser Support
SVG has an avalanche of practical use cases. Let’s explore the most significant of them.
Plain Illustrations and Diagrams
Any traditional drawing that may have been produced with pens and pencils should translate perfectly into the SVG format.
Logos and Icons
Logos and icons often share the same need to be clear and sharp at any size – from button to billboard – making them an ideal candidate for SVG. SVG icons are more accessible and are much easier to position. For more detail, see Inline SVG vs Icon Fonts.
Interactivity (Charts, Graphs, Infographics, Maps)
Building Interfaces and Applications
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95Yours absolutely free
SVG enables you can make challenging interfaces and incorporate it with HTML5, web-based applications, and rich Internet applications (RIAs).
And many more…
As you can see, SVG is used almost everywhere and in countless situations. The good news about all this is that browser support for SVG is getting better.
So, now you know the ‘why’ of SVG – let’s look at the ‘how’. In my next article, we’ll walk-thru the best way to use Adobe Illustrator to prepare your SVG files for the web.
Ivaylo Gerchev is a self-taught web developer/designer. He loves to play with HTML, CSS, jQuery, PHP, and WordPress, as well as Photoshop and Illustrator. Ivaylo's motto is "Minimum effort for maximum effect!"
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers