如何把svg引入页面,如何使用svg并且修改svg的css样式-Toy模板网

网页如何引入svg

常用的svg使用，引入，插图方法，推荐以下几种引入方法

文章来源地址https://www.toymoban.com/diary/web/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>

到此这篇关于如何把svg引入页面,如何使用svg并且修改svg的css样式的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！