Skip to main content

SVG 101: What Is SVG?

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

SVG 101 Header

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" />

As you can see, under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. As it’s human-readable, easily understandable and modifiable, when embedded in an HTML document as an inline SVG, SVG code can be manipulated via CSS or JavaScript. This gives SVG a flexibility and versatility that can’t ever be matched by traditional PNG, GIF or JPG graphic formats.

SVG is a W3C standard, which means that it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it’s likely that SVG will continue to be the de facto standard for vector graphics in the browser.

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 is fully editable and scriptable. All kinds of animations and interactions can be added to an inline SVG graphic via CSS and/or JavaScript.

Accessibility

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.

Performance

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.

Animations

You can create appealing animations, including cool line drawing effects using SVG graphics. In fact, SVG code can interact with CSS animation, as well as JavaScript and its own built-in SMIL animation functionality.

Interactivity (charts, graphs, infographics, maps)

SVG can be used to plot data and update it dynamically based on user actions or other events. See Interactive SVG Infographic and SVG Interactive Roadtrip Map.

Special effects

Many live effects can be achieved by using SVG, including shape morphing or different gooey effects.

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.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!