資訊專(zhuān)欄INFORMATION COLUMN
摘要：在中使用很簡(jiǎn)單，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通過(guò)控制，但是又想避免內(nèi)聯(lián)的弊端，可以在里面使用。記得去掉換行它可以在上述的所有場(chǎng)景里面使用，除了內(nèi)聯(lián)。
原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier
翻譯作者: https://github.com/chenmf6
翻譯出處：https://github.com/lightningm...
SVG是一種向量圖的圖片格式，即可伸縮向量圖（Scalable Vector Graphics），可以在Adobe Illustrator里面生成。在Web中使用SVG很簡(jiǎn)單，但是也有一些需要知道的事情。
為什么用SVG壓縮后文件體積小
可以無(wú)損伸縮到任意尺寸（除非尺寸特別?。?/p>
在retina屏幕上可以完美顯示
設(shè)計(jì)可控，比如交互和濾鏡
怎么生成SVG可以在Adobe Illustrator里設(shè)計(jì)并且得到SVG。下面是一個(gè)站在橢圓上的奇異鳥(niǎo)：
留意到畫(huà)板剛好貼著設(shè)計(jì)主體的邊緣，畫(huà)布的大小在SVG里面的重要性和在PNG和JPG里面是一樣的。
然后可以直接在Adobe Illustrator里面保存成SVG文件。
保存的時(shí)候，可以在duihua對(duì)話(huà)框里面選擇SVG選項(xiàng)。完整的參考可以看SVG 介紹。這里選SVG 1.1就可以了。
當(dāng)點(diǎn)擊"OK"或者"SVG Code..."的時(shí)候，就會(huì)打開(kāi)文本編輯器，顯示SVG的編碼。
然后就可以用特殊的SVG CSS來(lái)控制這些元素了。SVG元素由著特殊的CSS屬性，比如它沒(méi)有background-color，而是用fill，但是也可以使用一些其他的普通屬性，比如:hover
CSS
.kiwi {
fill: #94d31b;
}
.kiwi:hover {
fill: #ace63c;
}
更厲害的是，SVG可以使用濾鏡(filter)，比如模糊濾鏡。比如在SVG代碼里面可以加上一個(gè)濾鏡：
SVG
然后可以在CSS里面使用這個(gè)濾鏡
CSS
.ground:hover {
filter: url(#pictureFilter);
}
下面是一個(gè)完整的例子：
前往codepen查看
更多閱讀：
SVG濾鏡的更多應(yīng)用
SVG CSS屬性大全（針對(duì)Opera）
SVG濾鏡效果演示（由Microsoft提供）
瀏覽器支持內(nèi)聯(lián)SVG的瀏覽器支持看這里，基本和前面的一樣。兼容的方法：
HTML
CSS
.fallback {
display: none;
/* Make sure it"s the same size as the SVG takes up */
}
.no-svg .fallback {
background-image: url(logo.png);
}
在里面使用SVG
如果想要通過(guò)CSS控制SVG，但是又想避免內(nèi)聯(lián)SVG的弊端，可以在里面使用SVG。
HTML
同樣可以使用Modernizr來(lái)兼容：
CSS
.no-svg .logo {
width: 200px;
height: 164px;
background-image: url(kiwi.png);
}
這種情況下，如果想要用CSS控制SVG，就不能用外部的樣式或者文檔里面的 ... 在 SVG里使用外部樣式
可以在SVG文件開(kāi)頭的標(biāo)簽前面引入：
HTML
如果把這個(gè)放在HTML里面，頁(yè)面會(huì)崩潰沒(méi)法渲染，如果把這個(gè)放在或者background-image的SVG里面，頁(yè)面不會(huì)崩潰，但是也不起作用。
還可以把SVG轉(zhuǎn)換成Data URL，轉(zhuǎn)換之后可能不止原來(lái)的文件大小，但是它很方便，因?yàn)椴恍枰~外產(chǎn)生網(wǎng)絡(luò)請(qǐng)求。
Mobilefish.com上面有一個(gè)base64在線(xiàn)轉(zhuǎn)換器，可以轉(zhuǎn)成base64編碼，但是這種方式不太推薦。記得去掉換行：
它可以在上述的所有場(chǎng)景里面使用，除了內(nèi)聯(lián)SVG。
個(gè)人比較推薦這個(gè)在線(xiàn)轉(zhuǎn)換器，因?yàn)檗D(zhuǎn)換之后可讀性比較強(qiáng)。
用在里面
HTML
CSS里面
CSS
.logo {
background: url("data:image/svg+xml;base64,[data]");
}
里面
HTML
如果，SVG在base64編碼之前有嵌套的