Home>Web design tutorial>HTML tutorial

4 ways to introduce svg images into html web pages

Author：Eve Cole Update Time：2024-12-18 10:41:14

Web application development uses SVG images. To sum up, there are four ways:

1. Insert directly into the page. 2. Introduction of img tag. 3. css introduction. 4. The object tag is introduced.

1. Directly insert into the page

In html pages, you can use svg tags directly.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- An svg picture-->
		<svg width="200" height="150" style="border: 1px solid steelblue">
			<!-- There is a rectangle inside -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</body>
</html>

Operation effect:

1

2. Introduction of img tag

In addition to writing svg tags directly in the web page, you can also import them through img, just like importing jpeg and png images.

1) Create a new svg picture

Then we need to create a new svg image file first, and use the svg written directly in the web page above:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

There are two differences in the content here:

1. You need to declare the namespace xmlns attribute. The namespace can be listed in the reference materials at the end of this article. 2. Removed the style originally written on the svg tag, style="border: 1px solid steelblue".

Save the content to the test.svg file. This is an image file. You can try opening it in a browser.

2) Import using img tag

Assume that test.svg and the web page file are in the same directory:

<img src="test.svg" style="border: 1px solid steelblue" />

Similar to introducing jpeg and png, you can directly set the image path with the src attribute. In addition, we moved the original svg style to the img tag.

The running effect is the same as above:

2

There are many SVG pictures on the Internet. You can refer to: https://www.iconfont.cn, a good icon website.

3

3. css introduction

The css introduction is to introduce the image as a background image:

<style type="text/css">
	.svg {
		width: 200px;
		height: 150px;
		border: 1px solid steelblue;
		background-image: url(test.svg); // Import as background }
</style>
<div class="svg"></div>

4. object introduction

Similar to importing img, you need an svg file and then import it with the attribute data:

<object data="test.svg" style="border: 1px solid steelblue"></object>

The running effect is similar to the above, no more mapping.

Other tags

Although other tags such as embed and iframe tags can also be introduced, their use is not recommended. For details, please refer to the references listed at the end of this article.

References

Namespace: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

embed tag: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

iframe tag: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

This concludes this article about the 4 ways to introduce svg images into HTML web pages. For more information about introducing svg images into HTML, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will read more in the future. Support downcodes.com!

Related Articles