SVG inHTMLPage

SVG files can be embedded into HTML documents via the following tags: <img>, <object> or <iframe>.

SVG code can be embedded directly into HTML pages, or you can directly link to an SVG file.

Using the <img> tag

Via<img>the tag, SVG images can be embedded into HTML pages as images. You can use the src attribute to specify the path of the SVG file, and you can also set the width and height attributes to specify the width and height of the image.

Syntax:

<img src="example.svg.html" alt="SVG Image" width="200" height="200">

Using the <object> tag

<object>The tag is used to embed external resources into an HTML page. You can use thedataattribute to specify the path of the SVG file,typeattribute to specify the MIME type of the resource.

Browsers that support SVG will display the SVG image directly; browsers that do not support it will display alternative content.

Syntax:

<object data="example.svg" type="image/svg+xml" width="200" height="200">
  Your browser does not support SVG
</object>

Using the <iframe> tag

<iframe>The tag is used to embed another HTML document within an HTML page. You can use thesrcattribute to specify the path of the SVG file, and set thewidthandheightattributes to specify the width and height of the iframe.

Syntax:

<iframe src="example.svg.html" width="200" height="200"></iframe>

Embedding SVG code directly in HTML

To embed SVG code directly in an HTML page, the SVG code can be placed in the<body>tag or other suitable places.

This approach mixes SVG images with HTML content, allowing SVG images to be edited and adjusted directly in the HTML page.

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

Try it yourself »

Linking to an SVG file

You can also use the<a>tag to link to an SVG file:

<a href="circle1.svg.html">查看 SVG 文件</a>

Result:View the SVG file

Using a CSS background image

Through CSS'sbackground-imageattribute, you can embed an SVG image as a background image into an HTML element. This method is suitable for situations where you need to control the background image style in CSS.

Example

.svg-bg { width: 200px; height: 200px; background-image: url('circle1.svg'); background-size: cover; }

Try it yourself »
Other extensions