Multiple ways to insert SVG into HTML pages

SVG (Scalable Vector Graphics) is an image format based on XML syntax. Other image formats are based on pixel processing, while SVG is a description of the shape of the image, so it is essentially a text file with a relatively small size and will not be distorted when enlarged.

Insert svg tag

Use the <svg> tag directly to insert content into the web page, make it part of the DOM, and then you can use CSS and JS to control it.

A simple circle:

<svg width="400" height="300" id="testSvg">
   <circle cx="100" cy="100" r="50" fill="red" stroke="black" strock-width="2" id="testCircle"></circle>
</svg>

//You can use CSS to control the style of SVG, but the attributes are different from those of ordinary web elements <style type="text/css">
   #testSvg {border:1px solid #ccc;}
   #testSvg circle {
   	fill: red;
   	stroke: blue;
   	stroke-width: 3;
   }
</style>

//You can use JS to manipulate SVG, create simple animations, etc. <script type="text/javascript">
   var circle = document.getElementById("testCircle");
   circle.addEventListener("click", function(e) {
   	console.log("Click circle ...");
   	circle.setAttribute("r", 65);
   }, false);
</script>

//In addition to using JS, you can use SVG's own animate to create animation effects<svg width="400" height="300" id="testSvg">
   <circle cx="100" cy="100" r="50" id="testCircle">
   	<animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate>
   </circle>
</svg>

Display effect:

insert image description here

Insert svg file

You can use tags such as <img> <embed> <object> <iframe> to insert SVG files into web pages.
Except for <img> , all other tags should use double tag form.

//Use <img> tag <img src="test.svg'" />
//Or base64 encoding of SVG <img src="data:image/svg+xml;base64,[data]" />

//Use the <embed> tag <embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
//Get the SVG DOM
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
		
//Use the <object> tag <object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//Get the SVG DOM
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);

//Use <iframe> tag <iframe id="iframeSvg" src="test.svg"></iframe>
//Get the SVG DOM
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

SVG DOM output:

insert image description here

Use SVG as the background image of other web page elements

This is a disguised way of inserting SVG into a web page, that is, using SVG as an ordinary picture and unable to display animation effects.

<style type="text/css">
	.svg-div {
		width:400px;
		height:300px;
		background:url("test.svg") no-repeat center / 50%;
		border:1px solid #ccc;
	}
</style>

<div class="svg-div"></div>

Effect:

insert image description here

Read SVG source code

Because an SVG file is essentially an XML text, the SVG source code can be read by reading the XML code.

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
console.log(svgStr);

Summarize

This concludes this article about various ways to insert SVG into HTML pages. For more information about inserting SVG into HTML, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Use the njs module to introduce js scripts in nginx configuration

>>: Detailed explanation of the correct way to open em in CSS