What Is SVG? Your Guide to SVG Files

What is SVG?

SVG (Scalable Vector Graphics) is an image file format that combines information on shape, line, curve, text, and color to construct images. While most common image formats (e.g. JPG, PNG, and GIF) record their image data as a specific arrangement of pixels, an SVG file is more like the ‘written instructions’ or ‘recipe’ for creating a given drawing. This means SVGs (like a good recipe) can be scaled up with no loss of image quality and no increase in file size. The SVG code is a text-based, human-readable language, similar in nature to HTML or XML.

What does an SVG file look like?

Open a very simple SVG file in almost any modern web browser and you’ll see something like this: Open the same SVG file in your text editor and you’ll see something like the following:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" stroke-width="4" stroke="#000" fill="yellow" >
</svg>

As the example shows, SVG documents are little more than plain text files that describe shapes, lines, curves, colors, and text. They can be read and edited by humans and manipulated via CSS or JavaScript. This provides SVG with flexibility and versatility that can never be matched by traditional PNG, GIF, or JPG image formats.

How can I make or edit an SVG file?

Although simple SVG images – like the example above – can be created with any basic text editor, most SVGs are created using modern vector graphics applications. Popular SVG editors include:

• Figma
• Adobe Illustrator
• Boxy SVG (inexpensive)
• SVG Editor (free)

Here’s an example of a typical SVG image. At just 60KB, this illustration can be used in just about any online context. As a vector, we can be sure it will instantly scale to meet the demands of any viewport or element width. Conceived back in the 1990s, SVG may be the ‘ugly duckling’ format that grew to become a swan. Originally poorly supported and ignored for most of the 2000s, things have changed since the mid-2010s. All modern web browsers now render SVG perfectly, and all serious drawing apps offer SVG export options. While traditional raster graphics such as JPGs and PNGs are still preferable for photographic imagery, SVG is uniquely suited to meets today’s web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.

How does SVG compare to 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.

What are the advantages of SVG?

The strength of SVG is that it can tackle many of the most vexing problems in modern web development. Let’s breeze through some of them.

1. Scalability and responsiveness

If you think about it, the shapes, paths and text that make up the Nike logo are the same whether you’re tracing them onto a standard business card or 20ft high giant building signage. Only the unit of measurement changes. SVG allows you to construct images that you can be sure will look clear and crisp at any size. In contrast, pixel-based formats like GIF, JPG, and PNG are like working with Lego. If you want more size and detail, the only solution is adding MORE BRICKS. 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.

2. Programmability and interactivity

As SVG images are composed of separate components – shapes, lines, curves, and text – we are always free to target those components with scripts and behaviours. All kinds of animations and interactions can be added to an inline SVG graphic via CSS and/or JavaScript. There’s no equivalent way to target image elements within a JPG or PNG.

3. Accessibility

As SVG files are text-based, the information contained within them is always available to searched and indexed more easily than the content within pixel images. Does this mean SVG is intrinsically accessible? No. A poorly-prepared SVG is no more useful than a badly labelled PNG. However, SVG chart data is more easily extracted to screen readers, search engines and other text consuming services than an equivalent JPG chart.

4. Performance

One of the most important aspects impacting web performance is the size of the files used on a web page. When prepared thoughtfully, large and complex images can be displayed using comparatively tiny SVG files.

What are the Best Uses for SVG?

SVG has a long list of practical use cases. Let’s explore the most significant of them.

Illustrations & diagrams

Any traditional drawing that lends itself to being produced using pen and pencil should translate perfectly into the SVG format. It’s common to see SVG used to deliver patterns for 3d printers, Etsy artwork, t-shirt design, embroidery patterns, and even wedding planning collateral.

Logos & 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 libraries 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 organic gooey effects.

Building interfaces and applications

SVG enables you to make sophisticated interface components that you can integrate with HTML5, web-based applications, and rich internet applications (RIAs).

Summary

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.

Frequently Asked Questions (FAQs) about SVG