---

短视頻，自新闻媒体，达人种草1站服务

在大家刚开始应用SVG前，让大家先掌握1下 SVG，而且解释1下为何应用SVG。

SVG全称是Scalable Vector Graphics，假如你应用过adobe Illustrator的话，坚信你对这类适当文件格式的照片其实不生疏!

为何应用SVG?

文档十分小

可以高质量失的放缩规格

在Retina显示信息屏上实际效果超棒

可以操纵照片款式设计方案，比如互动交流和过虑filter

访问器适用

IE8及其更低版本号不适用

Android 2.3及其更低版本号不适用

其它访问器都适用

假如你必须适用这些版本号的访问器的话，你可使用Modernizr，以下：

if (!Modernizr.svg) { $( .gblogo img ).attr( src ， images/logo.png ); }

或应用以下更简易的编码：

SVG文档做为1般照片应用

 

你能够做为照片来立即应用，以下：

你能够像操纵JPG或PNG文件格式文档1样，操纵照片的尺寸，以下：

线上调节：

SVG文档做为情况照片应用

大家还可以应用SVG照片做为情况照片应用，以下：

gbtags

CSS：

.logo { display： block; text-indent： ⑼999px; width： 100px; height： 100px;background： url(gblogo.svg); background-size： 100px 82px; }

应用行内SVG

你能够立即将SVG编码复制到body中，可能看到照片，以下：

应用CSS操纵SVG

你可使用CSS来操纵SVG文档，下面编码将操纵电脑鼠标飘浮时的照片情况色调：

以上编码界定了1个logo的class，随后大家能够在CSS界定以下：

.logo:hover{ fill： #F08000; .... }

留意SVG中大家应用fill而并不是background来界定情况色。

乃至可使用filter来操纵模糊不清度，以下：

.logo:hover{ fill： #F08000; filter： url(#logoFilter); }

当你应用电脑鼠标hover照片时，会有以下实际效果。

 

线上调节：

SVG有关专用工具

线上转SVG专用工具：

微软的SVG filter实际效果展现专用工具：

SVG减肥专用工具：

总结

SVG是1个十分强劲的照片文件格式，能够协助你高效率的解决照片，有着比JPG或PNG更灵便强劲的图型展现方法，坚信假如加以光阴，必然变成最时兴的照片解决方法!

via 极客标识