Tech and Media Labs
This site uses cookies to improve the user experience.




Displaying SVG in Web Browsers

Jakob Jenkov
Last update: 2014-08-18

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 Content-Type HTTP header of the response to

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.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC