SVG

介绍

说到性能优化，常见的一种方式就是压缩图片，通常图片最多压缩到原文件的 50%。而且如果一个图标有 7 种颜色呢？那么设计就得给出 7 种颜色的图片，前端代码也得引用不同的 7 个路径。。。想想都觉得复杂。

SVG 图完美地解决了这一痛点，大小仅为原文件 10% 左右。还可以通过改写代码来任意改变颜色，甚至支持在代码中动态地传入颜色。动态地传入颜色时，即便有 1万种颜色，也仅仅一个文件。

而生成 SVG 文件也非常简单，设计师可以使用 矢量图 绘图软件直接导出 svg 格式的文件，如 Adobe Illustrator（简称 AI）、sketch

当然对于 Adobe Photoshop 中绘制的图片，手工转换矢量图比较困难耗时，在线工具解决了这一难题

其中目前免费在线转换工具里，这款是最好的 https://www.vectorizer.io/

转换后，可能会有一些冗余的代码，可以使用命令行工具 svgo 进行批量压缩。当然如果文件数量不多，直接使用在线工具 https://jakearchibald.github.io/svgomg/ 即可。

这些个 SVG 压缩工具只是静态工具，不会被上传到网络上去，不需要担心被盗图，有兴趣的同学可以研究下源码，以及那个web 压缩工具的源码

SVG 图标示例

首先 svg 在浏览器里和手机上，与图片一样的，可以正常显示出来 下面这个就是一个完整的 SVG 图，包括文字

xiaweiss.com/images/2018…

下面将它改写为为 400px 宽度的 SVG 图，仍然可以看到很清晰

xiaweiss.com/images/2018…

接下来，使用微信屏幕截图，看看同样 400px 宽度的 png 图，并且使用智图 压缩图片

 

 

 

接下来看看这三个文件的大小

 

 

 

可以看出 SVG 图可以任意改变尺寸，不损失清晰度 相比 png 图体积小很多的情况下，仍然比 png 图更清晰

接下来使用代码编辑器打开 SVG 文件，可以看到如下代码

也许看到这一堆代码要头晕了。别担心，实际应用时，并不需要自己手写 SVG 代码，只是改改就足够了 仔细看很类似前端常用的 html 标签

<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="24px" viewBox="0 0 60 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
    <title>按钮/关注-红色底</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="按钮/关注-红色底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-3" fill="#FF4C6A" x="0" y="0" width="60" height="24" rx="12"></rect>
        <g id="icon/关注加号" transform="translate(3.000000, 0.000000)">
            <g id="Group" stroke-width="1" transform="translate(8.000000, 8.000000)" fill="#FFFFFF">
                <path d="M3,3 L3,1 C3,0.44771525 3.44771525,1.01453063e-16 4,0 C4.55228475,-1.01453063e-16 5,0.44771525 5,1 L5,3 L7,3 C7.55228475,3 8,3.44771525 8,4 C8,4.55228475 7.55228475,5 7,5 L5,5 L5,7 C5,7.55228475 4.55228475,8 4,8 C3.44771525,8 3,7.55228475 3,7 L3,5 L1,5 C0.44771525,5 6.76353751e-17,4.55228475 0,4 C-6.76353751e-17,3.44771525 0.44771525,3 1,3 L3,3 Z" id="Combined-Shape"></path>
            </g>
            <rect id="Rectangle-10" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
        </g>
        <text id="哈哈" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="18" fill="#FFFFFF">
            <tspan x="24" y="16">哈哈</tspan>
        </text>
    </g>
</svg>

SVG 代码说明

<svg width="60px" height="24px" viewBox="0 0 60 24" ... > ... </svg>

svg 标签来控制宽高，width，height 是实际显示的宽高，可以修改为你想要显示的大小 而 viewBox 里的大小，则是原始大小，可以理解为画纸的大小位置，其中左上角坐标为 0 0，右下角坐标为 60 24（方向分别为 x, y）

<g id="Group" stroke-width="1" transform="translate(8.000000, 8.000000)" fill="#FFFFFF"> ... </g>

g 标签表示分组，也就是绘图软件中的图层。类似代码中的继承，它的属性，如果子标签里没有规定，就会使用它的属性设置 例如下面这两段代码是同样的效果

<g fill="#FF4C6A">
  <rect x="0" y="0" width="60" height="24" rx="12"></rect>
</g>

<g >
  <rect fill="#FF4C6A" x="0" y="0" width="60" height="24" rx="12"></rect>
</g>

path 表示线条， reat 表示方形，text 表示文字 代码 d="M3,3 L3,1 ...' 是绘制线条的代码，也称作路径（path）

fill 表示填充色，类似于 css 里的背景色（background-color）

stroke 表示描边，类似于 css 的边框颜色（border-color）

所以修改色值时，只需要修改这两个颜色即可 色值与 css 相同，可以使用透明色 transparent，以及 rgba(0,0,0,0.5) 也可以添加属性 opacity='0.5' 来控制透明度，值为 0 ~ 1

至于修改文字，找到对应的文字，直接替换即可