SVGs are a very common image format on the web. They can be a little confusing at first, but once you know how to use them, they are an incredibly powerful tool for creating high-quality, dynamic images for your website.
In this lesson, we will learn exactly what SVGs are, what they’re used for, and how you can embed them in your websites.
- What SVGs, Vector Graphics, and XML are
- How to create simple SVGs and add them to your websites
- When to use SVGs, and when a different image format would be more appropriate
SVGs are often used for:
- Large, simple images
- Patterned backgrounds
- Applying effects to other elements via SVG filters
“SVG” stands for “Scalable Vector Graphics”. Vector graphics are simply images defined by math, as opposed to traditional “raster graphics”, where your image is defined by a grid of pixels. With raster graphics, the detail is limited to the size of that pixel grid. If you want to increase the size of the image (scale it), you have to increase the size of that grid. How do you decide what all those new pixels should look like? There’s no simple solution. Additionally, the larger the grid, the bigger your filesize grows.
With vector graphics on the other hand, there’s no grid. Instead, you have formulas for different shapes and lines. Since these are just formulas, it doesn’t matter how large or small you want them to appear–they can scale to any size you want, and it will have no effect on the quality or the size of the file.
SVGs have another interesting aspect to them: they’re defined using XML. XML (aka, “Extensible Markup Language”) is an HTML-like syntax which is used for lots of things, from APIs, to RSS, to spreadsheet and word editor software.
The fact that SVG source-code is XML has a few key benefits.
First, it means that it is human-readable. If you were to open up a JPEG in a text editor, it would just look like gobbledygook. If you were to open up an SVG, however, it would look something like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <rect x=0 y=0 width=100 height=50 /> <circle class="svg-circle" cx="50" cy="50" r="10"/> </svg>
It might still be confusing, but hey–those are words! Tags! Attributes! Compared to binary file formats like JPEG, we’re definitely in familiar territory.
The second benefit of XML is that it’s designed to be interoperable with HTML, which means you can put the above code directly in an HTML file, without any changes, and it should display the image. And because these can become elements in the DOM just like HTML elements, you can target them with CSS and create them using the Element WebAPI you’ve already been using!
So, clearly SVGs are awesome! Time to go convert all of our images to SVG, right? Well, not quite. SVGs are great for relatively simple images, but because every single detail of the image needs to be written out as XML, they are extremely inefficient at storing complex images. If your image is supposed to be photo-realistic, or it has fine detail or texture (“grunge textures” are a great example), then SVGs are the wrong tool for the job.
Typically, you will not want to create SVGs from scratch in your code. Most often, you will download the file or copy the code either from a website or from an image editor that can create them (Adobe Illustrator and Figma are two popular apps that can create SVGs). However, it’s pretty common to download an SVG and want to tweak or adjust it just a little bit, so knowing what all the bits and pieces are, and how they work is very useful.
xmlns- stands for “XML NameSpace”. This specifies what dialect of XML you’re using. In our case, that dialect is the SVG language spec. Without it, some browsers will not render your image or will render it incorrectly. If you’re interested in a full breakdown of what this attribute is and why it’s necessary, check out this excellent MDN article.
viewBox- defines the bounds of your SVG. When you have to define the positions of different points of the elements in your SVG, this is what that’s referencing. It also defines the aspect ratio and the origin of your SVG. So it’s doing quite a lot! Be sure to play around with different values in the example above to get a feel for how it affects the shapes.
- Elements such as
<text>are defined by the SVG namespace. These are our basic building-blocks. Although you can make extremely complex images with SVG, they are mostly created with just a dozen or so of these basic elements. You can see a complete list of SVG elements here.
- Many SVG attributes, such as
stroke, can be changed in your CSS.
Play around with the code above and try to get a feel for what’s happening. What happens when you change the viewBox dimensions? Or the attributes of an element?
There are two main approaches when deciding how to actually place the SVG in your document: linked, and inline.
Linking SVGs works basically the same way as linking any other image. You can use an HTML image element such as
<img>, or link it in your CSS using
background-image: url(./my-image.svg). They will still scale properly, but the contents of the SVG will not be accessible from the webpage.
Inlining SVGs allows you to unlock their full potential, but it also comes with some serious drawbacks: it makes your code harder to read, makes your page less cacheable, and if it’s a large SVG it might delay the rest of your HTML from loading.
For now, just do whichever works best for your use-case. Linking is generally cleaner and simpler, so prefer that unless you need to tweak the SVG code alongside your HTML.
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- There are lots of great free SVG icon libraries. A few worth checking out: Material icons, Feather icons, The Noun Project, and Ionicons.
- If you want a deep-dive into the details of SVGs and their elements, the MDN tutorial is a great place to start.
- If you want to get started making your own SVGs, you’ll want some sort of visual editor.
- This is a great little SVG editor for learning how the SVG markup works. It not only shows the XML, but also lets you see the “commands” you’re using to generate the SVG. This website isn’t really designed for making complex graphics, though.
- For that, an excellent option is Inkscape, which is not only free but open source!
- And if you’re really invested in creating your own SVGs, you might want to check out some of the powerful paid options out there, such as Affinity Designer.
- If you want to use SVGs to generate images programmatically, there are at least two major, modern libraries for that: snap.svg and SVG.js.
- For data visualization, d3 has been the standard for many, many years.
- If you’re interested in some of the more advanced things you can do with SVGs, check out this video on SVG animation, and this article on SVG Filters, and Why They’re Awesome!