SVG可以算是目前最最火热的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。
1. 直接在HTML5中使用SVG
<body>
<svg t="1577382813425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1893" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<path d="M513.9 66.2c-239.1 0-433 193.9-433 433s193.9 433 433 433 433-193.9 433-433-193.9-433-433-433zM399.2 617L385 633.8 225.8 494.2 383.5 353l15.8 15.3-142 125.9L399.2 617z m37.9 26l-15.8-9.2 167.1-290 15.8 9.2-167.1 290z m206.5-9.2L629.4 617l141.9-122.7-141.9-125.9 15.8-15.3 157.7 141.2-159.3 139.5z" fill="#0a6bac" p-id="1894">
</path>
</svg>
</body>
或者使用<object>、<embed>、<iframe>和<img>等标签插入，如：
<body>
<object id="object" data="test.svg" type="image/svg+xml"></object>
</body>
1. CSS样式中使用SVG
直接使用文件路径
.svg{
width:300px;
height:300px;
background-image: url("test.svg");
background-repeat:no-repeat;
}
或者base64（SVG文件在线转base64走这里 >-> ）
.svg{
width:300px;
height:300px;
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTc3MzgyODEzNDI1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE4OTMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5AZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IHRhb2tlemh1c2hvdWljb25mb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDAzODYxX2c3cjl1N3hoZmYuZW90PyNpZWZpeCIpIGZvcm1hdCgiZW1iZWRkZWQtb3BlbnR5cGUiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0MDM4NjFfZzdyOXU3eGhmZi53b2ZmMiIpIGZvcm1hdCgid29mZjIiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0MDM4NjFfZzdyOXU3eGhmZi53b2ZmIikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDAzODYxX2c3cjl1N3hoZmYudHRmIikgZm9ybWF0KCJ0cnVldHlwZSIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTQwMzg2MV9nN3I5dTd4aGZmLnN2ZyNpY29uZm9udCIpIGZvcm1hdCgic3ZnIik7IH0KPC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMy45IDY2LjJjLTIzOS4xIDAtNDMzIDE5My45LTQzMyA0MzNzMTkzLjkgNDMzIDQzMyA0MzMgNDMzLTE5My45IDQzMy00MzMtMTkzLjktNDMzLTQzMy00MzN6TTM5OS4yIDYxN0wzODUgNjMzLjggMjI1LjggNDk0LjIgMzgzLjUgMzUzbDE1LjggMTUuMy0xNDIgMTI1LjlMMzk5LjIgNjE3eiBtMzcuOSAyNmwtMTUuOC05LjIgMTY3LjEtMjkwIDE1LjggOS4yLTE2Ny4xIDI5MHogbTIwNi41LTkuMkw2MjkuNCA2MTdsMTQxLjktMTIyLjctMTQxLjktMTI1LjkgMTUuOC0xNS4zIDE1Ny43IDE0MS4yLTE1OS4zIDEzOS41eiIgZmlsbD0iIzBhNmJhYyIgcC1pZD0iMTg5NCI+PC9wYXRoPjwvc3ZnPg==');
background-repeat:no-repeat;
}
或者utf-8，待补充
.svg{
width:300px;
height:300px;
background-image:url('data:image/svg+xml;charset=utf8,...');
background-repeat:no-repeat;
}
使用
<body>
<div class="svg"></\div>
</body>
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
