Vector graphics are the ultimate responsive images — they have small file sizes and are highly scalable. In this article we'll show you how to include one in your webpage.
| Prerequisites: | You should know the basics of HTML and how to insert an image into your document. |
|---|---|
| Objective: | Learn how to embed an SVG (vector) image into a webpage. |
What are vector graphics?
On the web, you'll work with two types of image — raster images, and vector images:
- Raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (
.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.) - Vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The {{glossary("SVG")}} format allows us to create powerful vector graphics for use on the Web.
To give you an idea of the difference between the two, let's look at an example. You can find this example live on our Github repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star witha black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.
The difference becomes apparent when you zoom in the page — the PNG image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color) — when it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.
Moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image individually.
What is SVG?
SVG is an {{glossary("XML")}}-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like {{svgelement("circle")}} and {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)
As a simple example, the following code creates a circle and a rectangle:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="https://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
This creates the following output:
{{ EmbedLiveSample('What_is_SVG', 300, 200) }}
You can handcode SVG in a text editor, but for a complex image you'll want a proper vector graphics editor like Inkscape. Unfortunately, you can't just take vector photos with your phone, but you can use Inkscape's Trace Bitmap feature. Note that complex SVGs may take significant processing time in the browser.
Text in vector images remains accessible (which also benefits your {{glossary("SEO")}}). SVGs lend themselves well to animation via scripting, because each component of the image is represented in the {{glossary("DOM")}}.
In Inkscape, save your files as Plain SVG to save space. Also, please refer to this article describing how to prepare SVGs for the Web.
The quick way: {{htmlelement("img")}}
Simply reference the SVG in an {{htmlelement("img")}} element as usual. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read the tutorial about <img>.
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87px"
width="100px" />
Pros
- Quick, familiar image syntax with built-in text equivalent.
- You can make hyperlinks as usual by nesting
<img>inside an {{htmlelement("a")}} element.
Cons
- You cannot manipulate the image with JavaScript.
- If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
- You cannot restyle the image with CSS pseudoclasses (like
:focus).
- To support pre-SVG browsers (IE 8 and below, Android 2.3 and below), furnish a PNG or JPG in your
srcattribute and use {{htmlattrxref("srcset", "img")}} (which only recent browsers recognize):<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- You're also welcome to use SVGs as CSS background images, as shown below. This way is largely subject to the same JavaScript/CSS limitations as the
<img>method.background: url("fallback.png");background-image: url(image.svg); background-size: contain; - If your SVGs aren't showing up, it's often because your server isn't set up properly. If that's the problem, this article will point you in the right direction.
How to include SVG code inline
Just open up the SVG file in a text editor, copy the entire thing, and paste it into your document. Make sure your code snippet begins and ends with the <svg> tags. Here's a very simple example of what you might paste into your document:
<svg width="300" height="200">
<rect width="100%" height="100%" fill="green" />
</svg>
Your <svg> tag doesn't need version, baseProfile, or xmlns attributes. You should make sure you clear out Inkscape namespace declarations, because HTML only tolerates XHTML, XLink, MathML, and SVG namespaces. If you want to optimize more thoroughly, try the SVG Optimiser or Scour.
Pros
- Inlining saves an HTTP request, and therefore can reduce your loading time.
- You can assign
classes andids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property. - Inlining is the only approach that lets you use CSS interactions (like
:focus) and CSS animations on your SVG image (even in your regular stylesheet). However, SMIL animations work with all the methods described in this article. - You can make SVGs into a hyperlink with this method.
Cons
- This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.
- Extra SVG code increases the size of your HTML file.
- The browser cannot cache inline SVG as it would cache regular image assets.
- You may include fallback in a {{svgelement("foreignObject")}} element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.
How to embed an SVG with {{htmlelement("object")}}
The syntax is quite straightforward, and again, there's a nice way to include a fallback:
<object data="parallelogram.svg"
width="300"
height="250"
type="image/svg+xml">
<img src="parallelogram.png"
alt="quadrilateral with two sets of parallel sides" />
</object>
Cons
- Again, even browsers that support SVG still download any fallback images.
- You cannot make
<object>into a hyperlink. The SVG shows up but does not respond to taps (or clicks). - You can style SVG elements with CSS, but either
- the SVG code must include the CSS rules (e.g., in a
<style>element), or - the SVG file must link to an external stylesheet. To link to a stylesheet, place this code in the SVG file before all tags:
<?xml-stylesheet type="text/css" href="svg.css" ?>
(Do not use this code within inline SVG, because it can break your webpage.)
- the SVG code must include the CSS rules (e.g., in a
How to embed an SVG with {{htmlelement("iframe")}}
You can open SVG images in your browser just like webpages. So embedding SVGs with <iframe> is just another version of embedding a webpage inside another webpage.
Here's a quick review:
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
Moreover, unless the SVG and your current webpage have the same {{glossary('origin')}}, you cannot use JavaScript on your main webpage to manipulate the SVG.
Learn more
- {{htmlelement("iframe")}}
- {{htmlelement("object")}}
- {{htmlelement("img")}}
- SVG tutorial on MDN
- Quick tips for responsive SVGs
- Sara Soueidan's tutorial on responsive SVG images
- Accessibility benefits of SVG
- How to scale SVGs (it's not as simple as raster graphics!)
- SVG specification