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, since around 2017 all modern web browsers have been rendering SVG without serious issues, and most vector drawing programs have been offering the option to export SVG, which has unquestionably become a widely used graphic 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 graphic format that most closely meets current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
This guide was updated in August 2020.
So, What Is SVG and Why Should You Use It?
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" />
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 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.
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!"
Maria Antonietta Perna is co-Editor of the HTML/CSS Channel at SitePoint and a front-end web developer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding for the web or not writing for the web, she enjoys philosophy books, long walks and good food.
The Principles of Beautiful Web Design, 4th Edition
Learn PHP in One Day and Learn It Well
Docker for Web Developers