Though it was conceived back in the late 1990s, 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, things have changed since 2017. All modern web browsers now render SVG without issues, and most vector drawing apps offer the option to export it. SVG has become a widely used image format on the Web.
This hasn’t happened by chance. Although traditional raster graphic file formats like JPGs and PNGs are perfect for photographs or very complex images, it turns out that SVG is the one format that meets today’s web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
Here’s an image in SVG. At just 60KB, this illustration can be used in just about any context online — as a vector, we can be sure it’ll scale to meet the demands of any viewport or element width.
SVGs can be much smaller than 60KB, of course. This larger illustration helps us make a point about SVG’s flexibility, but it’s a perfect format for icons and interface elements, some of which may not even weigh a full kilobyte.
What Is SVG?
SVG is an eXtensible Markup Language (XML)-based vector graphic format for the Web and other environments. XML uses tags like HTML, although it’s stricter. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered.
To give you a taste of what SVG code looks like, here’s how you would draw a white circle with a black border:
<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />
What about HTML5’s Canvas? These two technologies are very different, but this question understandably comes up often. We’ve broken down the purposes, pros, and cons of each in SVG vs Canvas so you have the understanding to make the right choice every time.
Why Should You Use SVG?
The awesomeness of SVG is that it can solve many of the most vexing problems in modern web development. Let’s breeze through some of them.
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 you’ll be sure they’ll look clear and crisp at any size.
In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which cause them to pixelate when they’re scaled. Although various responsive image techniques have proved valuable for pixel graphics, they’ll never be able to truly compete with SVG’s ability to scale indefinitely.
Programmability and interactivity
SVG files are text-based, so when embedded in a web page, they can be searched and indexed. This makes them accessible to screen readers, search engines and other devices.
One of the most important aspects impacting web performance is the size of the files used on a web page. SVG graphics are usually smaller in size compared to bitmap file formats.
Common SVG 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 lends itself to being produced using pen and pencil should translate perfectly into the SVG format.
Logos and icons
Logos and icons must be clear and sharp at any size — be it the size of a button or that of a billboard — which makes them ideal candidates for SVG. Furthermore, SVG icons are more accessible and are much easier to position.
Interactivity (charts, graphs, infographics, maps)
Building interfaces and applications
SVG enables you to make sophisticated interfaces that you can integrate with HTML5, web-based applications, and rich internet applications (RIAs).
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 great, as you can check for yourself on caniuse.com.
So, now you know what SVGs are and why they’re awesome for the Web. As a next step, I recommend you check out Craig’s article on the various ways to use CSS with SVG, and ways to include SVGs in a web page and manipulate them. Or if you want to dive in deep, check out the book Practical SVG, by Chris Coyier.