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