In this tutorial, we discuss ways you can add SVG images to your web page. Unlike bitmap images, SVGs are XML markup which describe shapes, lines, and fills so the document can be used in a variety of ways.
In this series, we’ve discussed what SVGs are, why you should consider them and basic vector drawings.
At some point, you’ll want to embed your finely crafted SVG directly into a web page. There are at least six ways to achieve that goal — but all methods have pros and cons.
1. Inline SVG XML Directly Into Your HTML Page
An SVG image can be added as a code island directly within your HTML page using outer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Embedded SVG</title> </head> <body> <h1>Embedded SVG</h1> <!-- SVG code --> <svg width="300px" height="300px" xmlns="https://www.w3.org/2000/svg"> <text x="10" y="50" font-size="30">My SVG</text> </svg> </body> </html>
The main disadvantage is that the SVG must be embedded into every page which requires it, and may need to be repeated for reusable icons. This adds to the page weight and, although the HTML may be cached, the SVG code can’t be (easily) reused elsewhere.
One solution to the repeated image issue is to create a hidden SVG block on each page (with CSS
display: none). This can optionally contain multiple images referenced using an
<svg xmlns="https://www.w3.org/2000/svg" style="display: none;"> <defs> <symbol id="box" viewBox="0 0 32 32"> <title>box</title> <rect width="32" height="32" fill="#00c" /> </symbol> <symbol id="circle" viewBox="0 0 32 32"> <title>circle</title> <circle cx="16" cy="16" r="16" fill="#c00" /> </symbol> <defs> </svg>
Individual items can then be used any number of times with an SVG
<svg width="20" height="20"> <use xlink:href="#box" /> </svg> <svg width="30" height="30"> <use xlink:href="#box" /> </svg> <svg width="40" height="40"> <use xlink:href="#circle" /> </svg>
The original image can still be styled using CSS, although it’s not possible to apply additional styles to the
2. Use an
SVGs can be added to your web page like any other image:
<img src="http://www.sitepoint.com/image.svg" alt="my image" />
alt and other
<img> attributes can be added should you require them.
The browser treats the SVG like any other image. For security reasons, any scripts, external stylesheets, links, and other SVG interactivity will be disabled.
A target anchor can be used if multiple images are defined within a single SVG — such as
myimage.svg#circle — but this won’t work in older browsers.
3. Apply a CSS Background Image
SVGs can be used as a CSS background for any element:
#myelement background-image: url('./image.svg');
Inline data URIs with UTF8 encoding may also be practical for smaller, regularly used SVGs which are unlikely to change often (and invalidate the whole stylesheet):
.myelement background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="100" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>');
<img> tags, scripts, links, and other types of interactivity are disabled when you use this method.
How to Add Scalable Vector Graphics (SVG) to Your Web Page