Skip to main content

What Is SVG? Your Guide to SVG Files

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, 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.

SVG 101 Header

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

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.

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 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 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.

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.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, JavaScript, Node.js, Vue.js, PHP, Laravel, and Statamic. When I'm not programming the Web, I love to program my own reality ;)

Maria Antonietta Perna is a teacher and technical writer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding or writing for the web, she enjoys reading philosophy books, taking long walks, and appreciating good food.

New books out now!

Learn the basics fo programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Latest Remote Jobs

Integromat Tower Ad