Display SVG on the Web

Displaying SVG in a web browser (such as Chrome, Firefox, and Internet Explorer) can be achieved by pointing the browser to the URL of the SVG file, embedding SVG in an HTML page, using iframe elements, using img elements, and other methods

Displaying SVG in a web browser (such as Chrome, Firefox, and Internet Explorer) can be achieved in the following ways:

• The browser points to the URL of the SVG file.

• Embed SVG in HTML page

You can embed SVG images in HTML files using the following methods:

• Using iframe elements

• Using img elements

• Using SVG images as background images.

• Using svg elements

• Using embedded elements

iframe frame

If you enter the URL of the SVG image, since the browser can display SVG images, you can also use it to include SVG images in an iframe on an HTML page. Here is an example:

<iframe src="mySvgImage.svg" width="200" height="200">

img

SVG images can be embedded using elements just like any other type of image. You can write the URL of the SVG image in the src attribute of the img element, as shown below:

<img src="/svg/circle-element-1.jsp">

SVG images will be displayed in the HTML page like any other images.

SVG as background image

Since browsers treat SVG images like bitmap images, SVG images can be used as background images through CSS. Here is an example:

div {
　　　　background-image: url('my-svg-image.svg');
　　　　background-size :　100px　100px;
{}

It may be necessary to set the background size for SVG images to tell the browser how to scale it. You can find out more about this in myCSS Background Images Tutorialto learn more about background images.

svg elements within HTML

Embedding SVG images using SVG elements can be directly embedded into HTML pages as shown below:

<div><svg>
　　　　<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
　　　　</svg></div>

The div element here is just to illustrate that svg elements can be directly embedded into HTML. However, svg elements do not have to be embedded within a div element.

Using SVG elements, you can directly embed SVG into HTML pages, rather than placing SVG images in their own files. You can set the width and height of the SVG image by adding width and height attributes to the SVG element.

By using svg elements, you can also directly generate svg in the browser using JavaScript. D3 The JavaScript API is very good at this. The jQuery JavaScript API can also do this.

Using svg elements, you can also use CSS to style svg and its child elements, just as you would with any other HTML. Note that some CSS property names of SVG elements are sometimes different from those of HTML elements.

embed

In the early days of SVG, you could use the embed element to embed SVG images. At that time, not all browsers supported SVG. Today, I suggest using the img or svg elements. Here is an example of an embedded element, illustrating the historical reasons for this:

<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 at the location in the HTML file where the SVG image is to be displayed. The src attribute should point to the URL of the SVG image.

Please note the pluginspage attribute. This is necessary for old browsers that cannot natively display SVG. These browsers need Adobe's SVG browser plugin to display images. In Internet Explorer 7and Firefox 3.0.5In this case, this property is unnecessary, but it doesn't hurt to include it.

Width and Height properties

No matter whether you are using the img, svg, or embed element to embed SVG images, you can use the width and height attributes to set the width and height of the image. If the image in the SVG file is wider or taller than these numbers, only a part of the SVG image will be displayed. Make sure the width and height you set are large enough to display the entire SVG image (or the width you want to display).

Using SVG as the background image of an HTML element

You can use CSS background-The image property uses an SVG image as the background image of an HTML element. You just need to point to the SVG image file like any other image file. Not all browsers support this completely, so test it in the browsers you plan to support. Here is an example:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
{}

Browser compatibility

Internet Explorer 9and later versions can natively display SVG. At the time of writing this article, Firefox, Chrome, Safari, Opera, and Android browsers have been able to natively display SVG for some time. The iOS version of Safari, the Opera Mini and mobile browsers, as well as the Android version of Chrome are also the same.

Content Type

If you point the browser's URL to end with .svg, the browser will be able to guess the mime type of the SVG file. However, when SVG is generated from servlets, JSP, PHP, ASP.NET pages, or other web application components, the URL does not always end with .svg.
To make the browser still interpret the file as an SVG file, you must set the response's Content-Type HTTP header

image/svg+xml

If you look at the previous <embed> element, you will notice that the same is done in the type attribute. Setting the content type in the <embed> element is enough for Internet Explorer, but not for Firefox. It must also be set in the content type of the HTTP response.

In addition, if you directly point the browser to an SVG file on the server, there is no <embed> tag that can perform this operation for you. Then, you will have to set the content type yourself in the HTTP response.
This is the method to be completed in JSP:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

This is very similar to executing in a servlet. If you are using a technology different from Java, just search Google for examples of how to set the content type on an HTTP response. There will be many examples.