1.什么是svg？

SVG是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。基于  XML^[1] 的標(biāo)記語(yǔ)言。

1.1 什么是圖像文件格式？

舉幾個(gè)熟悉的??例子：

常用的圖片格式是webp、gif、png等，svg也是其中一種。

1.2 什么是矢量圖？除了矢量圖還有什么圖？

矢量又稱為“向量”

• 矢量圖形中的圖形元素（點(diǎn)和線段）稱為對(duì)象，每個(gè)對(duì)象都是一個(gè)單獨(dú)的個(gè)體，它具有大小、方向、輪廓、顏色和屏幕位置等屬性。
• 簡(jiǎn)單地說(shuō)，矢量圖形軟件就是用數(shù)學(xué)的方法來(lái)繪制矩形等基本形狀。矢量圖特點(diǎn)：

1. 矢量圖形能重現(xiàn)清晰的輪廓，線條非常光滑、且具有良好的縮放性；
2. 因?yàn)閳D像中保存的是線條和圖塊的信息，與分辨率和圖形大小無(wú)關(guān)，只與圖像的復(fù)雜程度有關(guān)，所以圖像文件所占的存儲(chǔ)空間較小；
3. 此外文字編輯能力強(qiáng)
4. 與位圖相比，在顯示和打印方面都快的多；圖形不真實(shí)生動(dòng)，顏色不豐富。

位圖（英語(yǔ)：Bitmap，臺(tái)灣稱為點(diǎn)陣圖），又稱柵格圖（Raster graphics），是使用像素陣列（由多個(gè)基本像素單元沿水平和垂直方向重復(fù)而構(gòu)成）來(lái)表示的圖像（人對(duì)視覺感知的物質(zhì)再現(xiàn)）。（來(lái)自維基百科的解釋）位圖特點(diǎn)：

1. 位圖的像素都分配有特定的位置和顏色值。
2. 每個(gè)像素的顏色信息由RGB組合（RGB色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色的）或者灰度值表示。

矢量圖形的顯示效果示例：（a）原始矢量圖；（b）矢量圖放大8倍；（c）位圖放大8倍。位圖的放大質(zhì)量較差，但是矢量圖可以不降低質(zhì)量地?zé)o限放大。

1.3 什么是XML標(biāo)記語(yǔ)言？

可擴(kuò)展標(biāo)記語(yǔ)言（英語(yǔ)：Extensible Markup Language，簡(jiǎn)稱：XML）是一種標(biāo)記語(yǔ)言。標(biāo)記指計(jì)算機(jī)所能理解的信息符號(hào)，通過(guò)此種標(biāo)記，計(jì)算機(jī)之間可以處理包含各種信息的文章等。

<message>
    <warning>
         Hello World
    </warning>
</message>

好了，到這里我們對(duì)svg大概是什么有了一個(gè)初步的了解，下面介紹一下svg如何使用

2.如何使用svg？

2.1 svg基本結(jié)構(gòu)

<svg width='440' height='170' xmlns='http://wwww.w3.org/2000/svg'>
     <title>Cat</title>
     <desc>Stick Figure of Cat</desc>
     <circle cx="100" cy="100" r="50">
        <title>
           我是圓的標(biāo)題
        </title>
     </circle>
</svg>

• SVG 圖像默認(rèn)大小是300像素（寬） x 150像素（高），<svg> 以像素為單位定義了整個(gè)圖像的 width 和 height
• xmlns 屬性定義了 SVG 的命名空間
• <title> 元素的內(nèi)容可以被閱讀器顯示在標(biāo)題欄上或者是作為鼠標(biāo)指針指向圖像時(shí)的提示

• 元素允許咱們?yōu)閳D像定義完整的描述信息
• 在

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
   <span>123</span>
</svg>

2.2 viewBox、viewPort和preserveAspectRatio

如果只想展示 SVG 圖像的一部分，就要指定viewBox屬性

<svg width="100" height="100" viewBox="0 0 100 100">
    <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

下面進(jìn)行縮放處理：

<svg width="100" height="100" viewBox="0 0 50 50">
    <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

從（0，0）的角度看，放大了4倍。

viewport和viewbox的區(qū)別

1. viewport 視口，相當(dāng)于顯示器屏幕。
2. viewbox 視區(qū)，相當(dāng)于在屏幕上截取一小塊，放大到整個(gè)屏幕，就是特寫的效果
3. preserveAspectRatio 指定viewbox與viewport的對(duì)齊方式和縮放方式。

• viewPort為 width="10cm" height="10cm"

<svg width="10cm" height="10cm" style={{border: '1px solid #666', backgroundColor: 'pink'}} >
     <rect x="50" y="100" width="50" height="50"
           stroke="#000000" fill="black"/>
     <rect x="100" y="100" width="50mm" height="50mm"
           stroke="#000000" fill="#666" />
</svg>

<svg width="500" height="75" viewBox="0 0 250 75" preserveAspectRatio="xMinYMin slice"
            style={{border: "1px solid #cccccc"}}>
    <rect x="1" y="1" width="50" height="50" style={{stroke: "red", fill: "none"}} />
</svg>

preserveAspectRatio 是用來(lái)控制縮放的比例，preserveAspectRatio屬性采用以空格分隔的兩個(gè)值。

• 第一個(gè)值告訴視圖框(ViewBox)如何在視口(Viewport)內(nèi)對(duì)齊。此值本身由兩部分組成。
• 第二個(gè)值指示如何保留寬高比（如果有的話）

scale是對(duì)元素的縮放，也可以對(duì)svg縮放,可以看下展示效果：

• scale是對(duì)svg本身以及其內(nèi)部的元素都進(jìn)行了縮放。而且參考位置是其中心點(diǎn)

<svg width="100" height="100" transform="scale(0.7,1)" style={{border: "1px solid #cccccc", marginLeft: '20px'}}>
    <rect x="1" y="1" width="50" height="50" style={{stroke: "red", fill: "none"}} />
</svg>
<br/>
 <svg width="100" height="100" style={{border: "1px solid #cccccc"}}>
     <rect x="1" y="1" width="50" height="50" style={{stroke: "red", fill: "none"}} />
</svg>

2.3 常用圖形

1. <circle>

上面已經(jīng)提到過(guò)，點(diǎn) (cx, cy) 就表示圓心的位置，r 表示圓的半徑

屬性：stroke是輪廓顏色，fill填充顏色，strokeWidth輪廓的寬度 這些屬性在其余圖形里面也是通用的

<circle cx='55' cy='80' r='25' stroke='black' fill='pink' strokeWidth='8'/>

應(yīng)用情況，當(dāng)作減法的借位標(biāo)識(shí)，例如：

2. <line>

點(diǎn)（x1, y1）是起點(diǎn)，（x2, y2）是終點(diǎn) 必須要加stroke屬性，否則畫出來(lái)的線看不見??

應(yīng)用情況，劃0的斜線：

3. <path>

元素里有5個(gè)畫直線的命令，直線命令就是在兩個(gè)點(diǎn)之間畫直線。首先是“Move to”命令，M，它需要兩個(gè)參數(shù)，分別是需要移動(dòng)到的點(diǎn)的x軸和y軸的坐標(biāo)。

<svg width="200px" height="200px" >
  <path d="M10 10"/>
  <circle cx="10" cy="10" r="2" fill="red"/>
</svg>

渲染出來(lái)發(fā)現(xiàn)只有一個(gè)點(diǎn)，所以M命令是移動(dòng)畫筆位置，但是不畫線。

事實(shí)上，能夠真正畫出線的命令有三個(gè)，最常用的是“Line to”命令，L，

控制方向的命令：H，繪制水平線；V，繪制垂直線。

<path d="M10 10 H 90 V 90 "/>

<path d="M10 10 H 90 V 90 H 10" fill="pink"/>

<path d="M10 10 H 90 V 90 H 10 " fill="transparent" strokeWidth="2" stroke="black"/>

<path d="M10 10 H 90 V 90 " fill="transparent" strokeWidth="2" stroke="black"/>
<line x1={90} y1={90} x2={10} y2={10} stroke="black" strokeWidth="2" />

<path d="
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"></path>

著名的貝賽爾曲線

三次曲線，C是稍微復(fù)雜一點(diǎn)的曲線。三次貝塞爾曲線的每個(gè)控制點(diǎn)都有兩個(gè)控制點(diǎn)

C > x1 > y1, > x2 > y2, > x > y (or) > c > dx1 > dy1, > dx2 > dy2, > dx > dy最后一個(gè)坐標(biāo)(x,y)表示的是曲線的終點(diǎn)，另外兩個(gè)坐標(biāo)是控制點(diǎn)，(x1,y1)是起點(diǎn)的控制點(diǎn)，(x2,y2)是終點(diǎn)的控制點(diǎn)。

應(yīng)用：除法豎式子的曲線

更多詳情可見：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths^[2]

4. <polygon>

畫多邊形

<polygon fill="transparent" stroke="orange" stroke-width="3" points="0,0 50,0 100,100 0,100 0,0"/>

5. <text>文本

<text x="50" y="85"  fontSize="35">8</text>

<text x="50" y="85" textAnchor="middle" fontSize="35">8</text>
<line x1={10} y1={85} x2={100} y2={85} stroke="yellow"/>
<line x1={50} y1={150} x2={50} y2={0} stroke="green"/>

8

當(dāng)計(jì)算上下間距的時(shí)候，可利用屬性alignmentBaseline和textAnchor設(shè)置數(shù)字的基準(zhǔn)

6. <animate>動(dòng)畫

• attributeName：發(fā)生動(dòng)畫效果的屬性名。
• from：?jiǎn)未蝿?dòng)畫的初始值。
• to：?jiǎn)未蝿?dòng)畫的結(jié)束值。
• dur：?jiǎn)未蝿?dòng)畫的持續(xù)時(shí)間。
• repeatCount：動(dòng)畫的循環(huán)模式。

<rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s"
    repeatCount="indefinite" />
</rect>

7. <defs>用于自定義形狀

它內(nèi)部的代碼不會(huì)顯示

<path d="M12.7627 1.68984 C13.3585 0.820476 14.6415 0.820475 15.2373 1.68983L18.8282 6.92945C19.1533 7.40377 19.632 7.75154 20.1835 7.91413L26.2764 9.71018C27.2873 10.0082 27.6838 11.2284 27.0411 12.0637L23.1676 17.098C22.8169 17.5537 22.6341 18.1164 22.6499 18.6912L22.8245 25.0409C22.8535 26.0944 21.8155 26.8485 20.8225 26.4954L14.8376 24.3672C14.2958 24.1745 13.7042 24.1745 13.1624 24.3672L7.17748 26.4954C6.18447 26.8485 5.1465 26.0944 5.17548 25.0409L5.35011 18.6912C5.36592 18.1164 5.18309 17.5537 4.83244 17.098L0.958931 12.0637C0.316237 11.2284 0.712704 10.0082 1.72363 9.71018L7.81646 7.91413C8.36802 7.75154 8.84668 7.40377 9.17175 6.92945L12.7627 1.68984Z"
   fill="url(#paint0_linear)"
   stroke="url(#paint1_linear)"
/>
    <defs>
        <linearGradient
            id="paint0_linear"
            x1="14"
            y1="-1"
            x2="14"
            y2="31"
            gradientUnits="userSpaceOnUse"
        >
            <stop stopColor="#FFF7E8" />
            <stop offset="1" stopColor="#FFA900" />
        </linearGradient>
        <linearGradient
            id="paint1_linear"
            x1="14"
            y1="-1"
            x2="14"
            y2="31"
            gradientUnits="userSpaceOnUse"
        >
            <stop stopColor="#FFA900" />
            <stop offset="1" stopColor="#FFA900" stopOpacity="0" />
        </linearGradient>
    </defs>
</svg>

• 漸變：linearGradient 元素用來(lái)定義線性漸變，用于圖形元素的填充或描邊。
• 線性漸變

• 
  
• 徑向漸變

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients^[3]

更多圖形對(duì)象可見：https://www.ruanyifeng.com/blog/2018/08/svg.html^[4]

8. <image>

<ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>  
<ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />   
<image xlink:href='img.src' x='72' y='92'    width='160' height='120'  />

9. <use>復(fù)用

<svg width="200" height="200" transform="scale(0.4,0.4)"
  style={{border: "3px solid #999"}}>
  <defs>
    <g id="Port">
      <circle style={{fill:"pink"}} r="10"/>
    </g>
  </defs>
  <use x="50" y="45" href="#Port" />
  <use x="70" y="89" href="#Port" />
</svg>

10. <g>分組

<g stroke="black" fill="pink" stroke-width="5">
    <circle cx="50" cy="35" r="25"/>
    <circle cx="75" cy="35" r="25"/>
    <circle cx="150" cy="35" r="25"/>
    <circle cx="125" cy="35" r="25"/>
    <circle cx="100" cy="35" r="25"/>
 </g>

注意：SVG是嚴(yán)格按照定義元素的順序來(lái)渲染的，這個(gè)與HTML靠z-index值來(lái)控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在后面的元素后被渲染。后渲染的元素會(huì)覆蓋前面的元素，雖然有時(shí)候受透明度影響，看起來(lái)不是被覆蓋的，但是SVG確實(shí)是嚴(yán)格按照先后順序來(lái)渲染的。

2.2  SVG 文件使用

1. 成為 DOM 的一部分

然后用 JavaScript 和 CSS 進(jìn)行操作

<!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <svg
              id="mysvg"
              xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg "http://www.w3.org/2000/svg")"
              viewBox="0 0 800 600"
              preserveAspectRatio="xMidYMid meet">
            <circle id="mycircle" cx="400" cy="300" r="50" />
            <svg>
        </body>
    </html>

2. Img

<img src="apple.svg" />

使用這種方法在交互性上有很多的限制，如不能使用JS來(lái)控制。

3. Background-image

使用背景圖片方法需要注意是：盡量不要使用base64編碼的方式去格式化SVG圖片，因?yàn)樗诩虞d時(shí)會(huì)阻塞其它資源的下載.

background-image: url(bblogo.svg);

Iframe、embed等標(biāo)簽也可以

工作場(chǎng)景中，還有一種常用的繪圖工具：canvas。

3.與canvas對(duì)比如何？

3.1 腳本繪制

var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
    //ctx.fill();
}

ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 繪制
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(順時(shí)針)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    ctx.stroke();

3.2 漸變

顏色填充

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
           Math.floor(255-42.5*j) + ')';
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }

3.3 小結(jié)

4.開發(fā)體驗(yàn)分享

4.1 SVG定位方便

{zeroArr.length && zeroArr.map((num, idx) => (
   <SVGPath
      alignmentBaseline="middle"
      key={`text-${idx}`}
      d={`M x0 y0 L ...`}
      filltype={theme.color.slash}
      strokeWidth="1"
    />
))}

如果用普通的css和html實(shí)現(xiàn)，就要脫離文檔流

<span style="position: relative;">
    <span>22</span>
    <svg width="18.703125" height="18" style="position: absolute; left: 0px; top: 0px;">
        <line x1="0" y1="5" y2="15" stroke="#666" stroke-width="1.2" x2="18.703125">
        </line>
    </svg>
</span>

4.2  組合渲染方式

• 目前文本解題中有些題型是不含有：冪次、分?jǐn)?shù)、劃線、小星星、折線等特殊處理的符號(hào)，可用html標(biāo)簽來(lái)渲染，開發(fā)方便

• 如果有這些特殊圖形，根據(jù)具體情況來(lái)尋找合適的方式渲染，但是渲染文本的時(shí)候，最好不要把svg和html 標(biāo)簽混著使用，因?yàn)樵诓煌松蠒?huì)出現(xiàn)大小不一樣的效果，例如：

  

4.3 svg不折行，可縮放

由于端上屏幕大小不一樣，可以根據(jù)設(shè)備的大小實(shí)現(xiàn)自適應(yīng)縮放效果

4.4 SVG文本是可選，可搜索

png、canvas不可搜索。

4.5 SVG做雪碧圖

• SVG 雪碧圖技術(shù)= PNGs來(lái)制作雪碧圖
• 優(yōu)勢(shì)：不再需要為高清屏準(zhǔn)備額外的2倍圖。因?yàn)镾VG與分辨率無(wú)關(guān)，在任何設(shè)備上SVG都能清晰的顯示。并且使用SVG還能節(jié)省HTTP請(qǐng)求。
• 這里有兩種方法：
• 把所有的圖標(biāo)使用元素來(lái)定義在 SVG 代碼中并且隱藏它。使用元素來(lái)通過(guò)的 xlink:href="#id"來(lái)引用它
• 使用SVG的viewbox屬性來(lái)指定顯示SVG畫布的區(qū)域，跟background-position原理。

4.6 體積優(yōu)化

• 刪除SVG中一些不需要的屬性，積少成多網(wǎng)站的性能會(huì)穩(wěn)步提升

工具：https://github.com/svg/svgo^[5]

4.7 降級(jí)處理

• 大部分的現(xiàn)代瀏覽器都支持SVG。
• 若要支持諸如IE8這樣的老一代的瀏覽器就需要降級(jí)處理，即對(duì)不支持SVG的瀏覽器使用PNGs來(lái)顯示。

4.8 SVG與媒體查詢

如果在嵌入的SVG文件中的樣式中使用來(lái)媒體查詢，通過(guò)設(shè)備的特性來(lái)改變svg的樣式。

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        circle {
            stroke: #000;
            stroke-width: 30;
            fill: #009688;
        }
        @media (max-width: 500px) {
            circle {
                fill: #673ab7;
            }
        }
        @media (min-width:500px) {
            circle {
                fill: #ffc107;
                stroke: pink;
            }
        }
    </style>
</head>
<body onload="draw();">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0" y="0" viewBox="-20 -20 250 250" xml:space="preserve">
    </defs>
    <circle cx="100" cy="100" r="100" />
    <circle cx="100" cy="100" r="50" />
    <rect height="50" width="50" fill="green" x="75" y="75"/>
</svg>
<svg x="50" y="50" width="500" height="500">
    <circle cx="150" cy="150" r="100" fill="#009688"/>
    <circle cx="150" cy="150" r="50" />
    <rect height="50" width="50" fill="green" x="125" y="125"/>
</svg>
</body>
</html>

5.參考文獻(xiàn)

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API^[6]https://www.cnblogs.com/tugenhua0707/p/11279989.html^[7]https://juejin.cn/book/6844733773792313357^[8]https://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/^[9]https://css-tricks.com/understanding-and-manually-improving-svg-optimization/^[10]https://svgontheweb.com/zh/#resources^[11]

參考資料