Displaying SVG in Web Browsers
Jakob Jenkov |
Displaying SVG in web browsers like Chrome, Firefox and Internet Explorer can be done in several ways:
- Point the browser to the URL of the SVG file.
- Embed SVG inside an HTML page
You can embed an SVG image in an HTML file in several ways:
- Using an iframe element
- Using an img element
- Using the SVG image as background image.
- Using an svg element
- Using an embed element
Video Version of Tutorial
If you prefer to watch this tutorial as video, I have made a screencast:
iframe
Since the browsers can show SVG images if you type in the URL to the SVG image,
you can also include an SVG image in your HTML page by using an iframe.
Here is an example:
<iframe src="mySvgImage.svg" width="200" height="200" >
img
Embedding an SVG image using an img element is done just like
any other type of image. You write the URL of the SVG image in the src
attribute of the img element, like this:
<img src="/svg/circle-element-1.jsp">
The SVG image is then shown in the HTML page, just like any other image.
SVG as Background Images
Since the browsers treat SVG images just like bitmap images, you can use SVG images as background images via CSS. Here is an example:
div {
background-image: url('my-svg-image.svg');
background-size : 100px 100px;
}
It may be necessary to set a background size for the SVG image, to tell the browser how to scale it. You can read more about background images in my CSS background image tutorial.
svg Element Inside HTML
Embedding an SVG image using the svg element can be done by embedding
an svg element directly in an HTML page, like this:
<div>
<svg>
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
</div>
The div element is just here to illustrate that the svg
element can be embedded directly in HTML. The svg element does
not have to be embedded in a div element though.
Using the SVG element you can embed SVG directly in the HTML page, instead of
putting the SVG image in its own file. You can set the width
and height of the SVG image by adding width and height
attributes to the svg element.
Using the svg element you can also generate SVG directly in the
browser using JavaScript. The D3 JavaScript API is very good at that. The jQuery
JavaScript API could do that too.
Using the svg element you can also style the svg and its child elements
using CSS, just like you would with any other HTML. Note that the SVG elements sometimes have different
names for some of their CSS properties than HTML elements.
embed
In the early days of SVG you could embed SVG images using the embed
element. Back then not all browsers had native support for SVG. Today I would recommend
using either the img or svg elements instead.
Here is an example embed element example for historic reasons though:
<embed src="/svg/simple-example-1.jsp"
width="300" height="220"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Place this element where you want the SVG image to be displayed in your HTML file.
The src attribute should point to the URL of the SVG image.
Notice the pluginspage attribute. This is necessary in older browsers
not capable of displaying SVG natively. These browsers need Adobe's SVG Viewer plugin
to display the image. In Internet Explorer 7 and Firefox 3.0.5 this attribute is not
necessary, but it doesn't hurt to include it.
Width and Height
Regardless of whether you use the img, svg or embed element
to embed your SVG image, the width and height of the image can be set using width
and height attributes. If your image in the SVG file is wider or taller than these numbers,
only part of the SVG image will be displayed. Make sure you set width
and height large enough to display the full SVG image (or as much as you want to display).
Using SVG as Background Images of HTML Elements
You can use SVG images as background images of HTML elements using the CSS
background-image property. Just point to the SVG image file
like you would with any other image file. Not all browsers may yet fully
support this, to test it in the browsers you plan to support.
Here is an example:
.myCSSClass {
background: url(/mySvgImage.svg);
}
Browser Support
Internet Explorer 9 and later can display SVG natively. Firefox, Chrome, Safari, Opera and the Android browser have been able to show SVG natively for a while, at the time of writing. That is also true for Safari for iOS, Opera's mini and mobile browsers, and Chrome for Android.
Content Type
If the URL your are pointing your browser to ends in .svg the browser will be able to guess the mime type of the SVG file. However, when generating SVG from servlets, JSP, PHP, ASP.NET pages or other web application components, the URL ending may not always be .svg .
To make the browser still interpret the file as an SVG file you must set the
image/svg+xml
If you look at the <embed>
element earlier you will notice that this is done too in the type attribute. Setting
the content type in the <embed> element is enough for Internet Explorer, but
not for Firefox. You must also set it in the content type on the HTTP response.
In addition, if you point your browser directly to the SVG file on the server, there is no <embed>
tag to do this for you. Then you will have to do it yourself by setting the content type
in the HTTP response.
Here is how it is done in JSP:
<% response.setContentType("image/svg+xml");
%><svg ... >
This is very similar to how it is done in servlets. If you are using a different technology than Java, just search Google for an example of how to set the content type on the HTTP response. There will be loads of examples.
| Tweet | |
Jakob Jenkov | |
