概述
SVG（Scalable Vector Graphics）是一種矢量圖格式。Adobe Illustrator是專門編輯硕蛹、制作矢量圖的軟件猪腕。
隨著高清視網(wǎng)膜屏幕的出現(xiàn)，Web設(shè)計需要根據(jù)屏幕輸出不同分辨率的圖片誉帅。在開發(fā)中需要準(zhǔn)備兩套不同的圖片應(yīng)對，一套在普通屏幕上顯示右莱；一套在高清屏幕上顯示蚜锨。
現(xiàn)在流行的icon font字體圖標(biāo)，其實質(zhì)上是SVG的封裝慢蜓。
SVG的優(yōu)勢
- SVG是矢量圖形文件亚再，無限放大不失真。
- 可以用CSS樣式來自由定義圖標(biāo)顏色晨抡，比如顏色/尺寸等效果氛悬。
- 所有的SVG可以全部在一個文件中，節(jié)省HTTP請求 耘柱。
- 使用SMIL如捅、CSS或者是javascript可以制作充滿靈性的交互動畫和濾鏡效果。
- 由于SVG也是一種XML節(jié)點的文件调煎，所以可以使用gzip的方式把文件壓縮到很小镜遣。
Adobe Illustrator
Adobe Illustrator能直接把文件保存成SVG格式：
瀏覽器支持
在所有瀏覽器中支持，可以采用以下方式：David Bushell
使用 JavaScript if there’s an error：
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">使用Modernizr檢測,JQuery做降級處理：
<pre>
if (!Modernizr.svg) {
$('img[src$=".svg"]').each(function() {
$(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
});
}
</pre>-
使用Modernizr檢測,CSS降級處理：
Modernizr在檢測到不支持SVG時汛蝙，會在HTML上加了no-svgCSS類
<pre>
.icon-logo
{
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
</pre><pre>
.no-svg .main-header
{
background-image: url(logo.png);
}
</pre> 使用SVGeezy插件
SVG的使用
-
使用
img和object標(biāo)簽直接引用svg烈涮。這種方法的缺點主要在于要求每個圖標(biāo)都單獨保存成一個SVG文件朴肺，使用時也是單獨請求的窖剑，增加了HTTP請求坚洽。最簡單的用法：
<img src="image.svg">使用object標(biāo)簽：
<object type="image/svg+xml" data="image.svg">
<img src="fallback.png">
</object>使用object標(biāo)簽，Data URL 方式
<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
<img src="fallback.png">
</object>-
object+css：不能加載svg時西土，會渲染內(nèi)部div的樣式html：
<object id="logo" type="image/svg+xml" data="logo.svg">
<div>logo description</div>
</object>
css：
#logo div
{
width: 300px;
height: 50px;
background-image: url("logo.png");
}
-
Inline SVG讶舰，直接把SVG寫入 HTML 中，這種方法簡單直接需了，而且具有非常好的可調(diào)性跳昼。Inline SVG 作為HTML文檔的一部分，不需要單獨請求肋乍。臨時需要修改某個圖標(biāo)的形狀也比較方便鹅颊。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫墓造，圖標(biāo)復(fù)用起來也比較麻煩堪伍。
<!--[if (gt IE 8)]><!--><svg></svg><!--<![endif]--> SVG Sprite。這里所說的Sprite技術(shù)觅闽，沒錯帝雇，類似于CSS中的Sprite技術(shù)。圖標(biāo)圖形整合在一起蛉拙，實際呈現(xiàn)的時候準(zhǔn)確顯示特定圖標(biāo)尸闸。其實基礎(chǔ)的SVG Sprite也只是將原來的位圖改成了SVG而已。
使用svg中的
<symbol>元素來制作icon孕锄。SVG本身的定義是允許你可以使用<use>的方式直接引用SVG中的某一部分吮廉。
首先使用<symbol>方式，將SVG文件組裝起來畸肆。注意每個<symbol>都必須有唯一的id宦芦。
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="circle-cross" viewBox="0 0 32 32">
<title>circle-cross icon</title>
<path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
</symbol>
<symbol id="circle-check" viewBox="0 0 32 32">
<title>circle-check icon</title>
<path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
</symbol>
</svg>
1. 將SVG的XML文檔插入到HTML中，直接用id引用icon：
<svg class="icon">
<use xlink:href="#circle-cross"></use>
</svg>
2. 使用外部鏈接文件的形式引用icon：
<svg class="icon">
<use xlink:href:"/asssets/svg-symbols.svg#circle-cross"></use>
</svg>
3. 支持fallback：
<svg class="icon" viewBox="0 0 50 41">
<switch>
<use xlink:href="#twitter-icon"></use>
<foreignObject>
<img class="icon" src="img/twitter-icon.png" alt="Twitter">
</foreignObject>
</switch>
</svg>
自動合并生成工具gulp-svg-symbols
