柵格圖形 & 矢量圖形
柵格圖形喜喂，也叫做點陣圖瓤摧，位圖(bitmap)，像素圖玉吁，圖像是由像素構(gòu)成的照弥，像素的多少將決定圖像的顯示質(zhì)量和文件大小，圖像的分辨率越高进副，其顯示越清晰这揣，文件所占的空間也就越大。圖像放大時會失真影斑，可以看到整個圖像是由很多像素組合而成的给赞。
矢量圖形使用 XML 來描述二維圖形和繪圖程序，矢量圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失矫户。
Canvas vs SVG
<canvas>和<svg>都是HTML5推薦使用的圖形技術片迅，Canvas基于像素，提供2D繪制函數(shù)皆辽，是一種HTML元素類型柑蛇，依賴于HTML，只能通過腳本繪制圖形驱闷；SVG為矢量耻台，提供一系列圖形元素（Rect, Path, Circle, Line …），還有完整的動畫空另，事件機制盆耽，本身就能獨立使用，也可以嵌入到HTML中扼菠，SVG很早就成為了國際標準摄杂，目前的穩(wěn)定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition)，兩者的主要特點見下面的表格：
Canvas & SVG 性能對比圖(來源microsoft開發(fā)社區(qū))
使用場景
SVG
- 靜態(tài)圖形（Icons娇豫、Logo）
- 高保真文檔(用于展示&打印)
Canvas
- 處理視頻
- 復雜場景匙姜、實時復雜數(shù)學動畫
圖形和圖表
svg和Canvas都可以表現(xiàn)圖表(如柱狀圖, 散點圖, 餅圖等等)，常用的圖形圖表庫中冯痢，百度的echarts是基于Canvas實現(xiàn)的氮昧，D3是基于svg實現(xiàn)的。
SVG
SVG 文檔基本結(jié)構(gòu)
<svg width='140' height='170' xmlns='http://www.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這里繪制圖像 -->
</svg>
xmlns屬性可定義SVG 命名空間（如果將SVG內(nèi)嵌在HTML頁面中并作為該頁面提供浦楣，則不需要xmlns屬性）袖肥。
基礎圖形
<rect>、<circle>振劳、<ellipse>椎组、<line>、<polyline>历恐、<polygon>
矩形 圓 橢圓 線條 折線 多邊形
基礎屬性
fill寸癌、stroke专筷、stroke-width、transform
使用 <g> 元素蒸苇，可以對多個元素進行分組
路徑<path>
path元素是SVG基本形狀中功能最強大的一個磷蛹，它不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀溪烤。你可以用path元素繪制矩形（直角矩形或者圓角矩形）味咳、圓形、橢圓檬嘀、折線形槽驶、多邊形，以及一些其他的形狀鸳兽，例如貝塞爾曲線掂铐、2次曲線等。
path元素的形狀是通過屬性d來定義的揍异，屬性d的值是一個“命令+參數(shù)”的序列堡纬。
下面的命令可用于路徑數(shù)據(jù)：（命令詳情可查看https://segmentfault.com/a/1190000005053782）
- M = moveto 兩個參數(shù) 畫筆起始位置
- L = lineto 兩個參數(shù)，畫直線（x ,y）坐標 蒿秦，在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段
- H = horizontal lineto 一個參數(shù)，繪制水平直線
- V = vertical lineto 一個參數(shù)蛋济，繪制垂直線
- C = curveto 三次貝塞爾曲線 命令參數(shù)：C x1 y1, x2 y2, x y 起點控制點棍鳖，終點控制點，終點
- S = smooth curveto 簡寫的貝塞爾曲線命令 命令參數(shù)：S x2 y2, x y
- Q = quadratic Belzier curve 二次貝塞爾曲線 命令參數(shù)：Q x1 y1, x y 控制點碗旅，終點坐標
- T = smooth quadratic Belzier curveto Q命令的簡寫 T x y
- A = elliptical Arc 橢圓弧線
- Z = closepath 閉合路徑渡处，從當前點畫一條直線到路徑的起點。不區(qū)分大小寫
SVG坐標系統(tǒng)
viewBox
viewBox的四個參數(shù)分別代表：最小X軸數(shù)值祟辟；最小y軸數(shù)值医瘫；寬度；高度旧困。
用于svg整體縮放
SVG應用-SVG路徑描邊動畫
stroke-dasharray
表示虛線描邊醇份。可選值為：none, <dasharray>, inherit. 其中吼具，none表示不是虛線僚纷；<dasharray>為一個逗號或空格分隔的數(shù)值列表。表示各個虛線段的長度拗盒〔澜撸可以是固定的長度值，也可以是百分比值陡蝇；inherit表繼承痊臭。
stroke-dashoffset
表示虛線的起始偏移哮肚。可選值為：<percentage>, <length>, inherit. 百分比值广匙，長度值允趟，繼承。
如果stroke-dasharray值很大艇潭，超過了描邊路徑的總長度拼窥，加以css動畫改變stroke-dashoffset值，就會出現(xiàn)一段時間內(nèi)描邊顯示從無到有蹋凝。
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
svg圖標和字體圖標(IconFont)有什么區(qū)別鲁纠？
