网页如何引入svg
常用的svg使用，引入，插图方法，推荐以下几种引入方法
文章来源地址https://www.toymoban.com/article/182.html
1、直接网页插入，把svg标签放进web中，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>svg</title> </head> <body> <svg t="1659002299620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5895" width="200" height="200"><path d="M490.666667 533.333333v256a64 64 0 0 1-64 64h-192a64 64 0 0 1-64-64v-192a64 64 0 0 1 64-64h256z m298.666666 0a64 64 0 0 1 64 64v192a64 64 0 0 1-64 64h-192a64 64 0 0 1-64-64V533.333333h256z m-362.666666 64h-192v192h192v-192z m362.666666 0h-192v192h192v-192zM426.666667 170.666667a64 64 0 0 1 64 64v256H234.666667a64 64 0 0 1-64-64v-192a64 64 0 0 1 64-64h192z m266.666666 0a160 160 0 1 1 0 320 160 160 0 0 1 0-320zM426.666667 234.666667h-192v192h192v-192z m266.666666 0a96 96 0 1 0 0 192 96 96 0 0 0 0-192z" p-id="5896"></path></svg> </body> </html>
2、使用 img 标签引入页面，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>svg</title> </head> <body> <img src="./name.svg" /> </body> </html>
3、使用css插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg</title>
<style type="text/css">
.svg {
width: 200px;
height: 200px;
border: 1px solid steelblue;
background-image: url(./name.svg); // 当成背景引入
}
</style>
</head>
<body>
<div class="svg"></div>
</body>
</html>4、使用 object 标签引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>svg</title> </head> <body> <object data="./name.svg"></object> </body> </html>
文章来源：https://www.toymoban.com/article/182.html
到此这篇关于如何把svg引入页面,如何使用svg并且修改svg的css样式的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！