焕蓝主页采用SVG
本文写于2015-08-31 18:44。由于技术进步，其中的描述不一定适用于现在，请自行定夺。
昨天，我在听某个视频课程时，无意间接触到了SVG。于是我到 W3school 看了有关SVG的资料。
以下为 W3school 关于SVG的介绍的摘录（原链接：http://www.w3school.com.cn/svg/svg_intro.asp）：
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
正因如此，我想到了主页的那幅背景图。图像的色块很简单，正适合做SVG。同时，SVG已被几乎所有的现代浏览器兼容，用它完全可以，毕竟我做网站从不考虑老的浏览器。
于是，我把主页的那幅背景图换成了SVG。
其实，我并没有写代码，而是用了PS CC 2015的新特性：导出功能。这个功能可以将图像导出为多种格式，包括SVG。
以下为PS导出图像为SVG的方法：
-
首先，也是最重要的，如果要导出SVG，尽量在作图时使用路径作图，不要栅格化，否则导出的SVG仍然很大，因为如果用路径作图，PS将会将其视为矢量图，可以使用SVG定义的多种标签进行绘图，导出的SVG很小；如果栅格化，PS将会将其视为位图，导出内容包含各个栅格化图层的Base64代码，其大小可想而知。
-
做好图后，依次点击“ 文件 > 导出 > 导出为... ”,弹出“导出为”窗口，如图：
“导出为”窗口
-
选择“文件设置”下的“格式”为SVG，设置其他信息。注意：由于SVG为矢量图，更改尺寸并不能显著改变文件大小，反而可能会出现一些意外的结果（如：周围有透明空白），所以不建议更改尺寸。
-
单击“导出...”按钮，选择所需路径，编辑好文件名，保存。
从下面的图可以发现，SVG相比于PNG，文件大小相差很大（万恶的水印……上面是31 KB，下面是2 KB）：
SVG相比于PNG大小
而且，PS生成的SVG很干净，以主页背景图为例，其代码为：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="1920" height="1200" viewBox="0 0 1920 1200">
<defs>
<style>
.cls-1 {
fill: #000;
}
.cls-2 {
fill: #e51400;
}
.cls-3 {
fill: #de9317;
}
.cls-4 {
fill: #034888;
}
.cls-5 {
fill: #1ba1e2;
}
.cls-6 {
fill: #fff;
}
</style>
</defs>
<rect width="1920" height="1200" class="cls-1"/>
<rect x="1867" width="53" height="267" class="cls-2"/>
<rect x="1179" y="997" width="648" height="203" class="cls-3"/>
<rect x="1179" width="648" height="267" class="cls-4"/>
<rect x="1179" y="307" width="648" height="191" class="cls-5"/>
<rect x="1179" y="538" width="304" height="419" class="cls-5"/>
<rect x="1523" y="538" width="304" height="379" class="cls-5"/>
<rect width="42" height="267" class="cls-3"/>
<rect x="82" width="504" height="48" class="cls-6"/>
<rect y="307" width="42" height="650" class="cls-6"/>
<rect y="997" width="42" height="203" class="cls-6"/>
<rect x="626" y="87" width="513" height="180" class="cls-6"/>
<rect x="626" y="307" width="513" height="191" class="cls-6"/>
<rect x="1867" y="307" width="53" height="610" class="cls-6"/>
<rect x="1867" y="997" width="53" height="203" class="cls-2"/>
<rect x="82" y="538" width="1057" height="662" class="cls-2"/>
</svg>
是不是很心动？只要你的图像只用于网页中，那就大胆地使用SVG吧！
不过，目前我发现UC浏览器在打开云端加速后，SVG会被屏蔽掉（我原先以为UC不支持SVG，就试了各种向下兼容的方法，但未成功。后来我无意间关掉了云端加速，SVG就能正常显示了）。我已向UC客服反馈。极速模式下也会被屏蔽。
