SVG长话短说

2022-11-27 08:04:28

一、何为SVG？

SVG是可伸缩的矢量图形，用来定义用于网格的基于矢量的图形，它使用XML格式定义图形，图像在放大或缩小的情况下，其图形质量不会有损失，SVG还是万维网联盟的一个标准。

二、与JPEG和PNG等图像相比有何优点？

JPEG和PNG等图像属于位图，是由像素点所构成，图片放大或缩小时容易造成失真。而SVG则属于矢量图，无论如何放大缩小都可以保证其清晰度不会降低。

三、如何使用SVG?

1、直接内联引入

<div class="del">
    <svg class="icon" width="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
        <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </svg>
    <span>删除</span>
</div>

2、使用img标签引入，与引用位图方式无异

<div class="del">< img src="svg/delete.svg" /><span>删除</span></div>

3、使用iframe标签引入

<div class="del"><iframe class="icon" src="svg/delete.svg" frameborder="0"></iframe><span>删除</span></div>

4、SVG Sprites，使用use引入（可以看这篇文章"移动端小图标模糊问题"有介绍）

<body>
    <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <symbol id="icon-delete" viewBox="0 0 32 32">
            <title>delete</title>
            <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
            <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
        </symbol>
    </svg>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-delete"></use></svg><span>删除</span></div>
</body>
</html>

当然，类似于写CSS时使用style标签写在HTML内一样，在页面内直接写过多的SVG代码总感觉不太好，会让页面感觉很臃肿。那么当然与使用link标签外链样式类似的，SVG也能通过外链的方式引入，就像这样：

<div class="del"><svg class="icon icon-bin"><use xlink:href="demo.svg#icon-delete"></use></svg><span>删除</span></div>

其中demo.svg中则可以保存许多可供调用的SVG：

<!--demo.svg-->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <symbol id="icon-delete" viewBox="0 0 32 32">
         <title>delete</title>
         <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
         <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
     </symbol>
     <!--省略-->
</svg>

但是需要注意的是，以上SVG Sprites外联方式在IE下全军覆没，甚至IE11都不行！

那么，如何改变SVG的大小与颜色呢？
很简单，直接给调用SVG的标签上设置CSS样式即可，比如上面的例子可以这样设置：

.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; fill: red;}

注意：以img标签和iframe标签方式调用的时候改变SVG颜色无效！

最后贴上以上四种使用SVG方式的实例效果图：

本文为原创文章，转载请注明出处，谢谢！

码农公寓