瞭解SVG

時間 2019-11-17

標籤瞭解 svg 简体版

原文原文鏈接

教程細節javascript

· 語言: JavaScript,HTML, SVGhtml

· 難度: 中等前端

· 估計閱讀時間: 30 分鐘java

SVG-可縮放矢量圖形 ，是一個XML風格標記驅動的矢量圖形的瀏覽器渲染引擎。除了IE 9.0和Android V3以前版本號外的所有瀏覽器都支持SVG。Canvas也有相同的支持狀況，因此問題每每表現爲：咱們應該使用哪一種方案？ajax

今天，咱們將全面介紹SVG，並且解釋爲何「我應該使用哪個」這個問題一般的答案是「我要用它們來作什麼」。要獲得SVG的完整信息，請查看Mozilla關於此主題的文檔。你還可以看看SVG DOM API。編程

概述

咱們將首先概述SVG的一些獨特的優點。而後，用不着通讀SVG所有長達80頁的節點類型，咱們將說明怎樣經過Illustrator高速的把SVG文檔加入到網頁中。咱們還會講講D3.js，一個強大的、SVG控制的JavaScript庫。canvas

「SVG並不只僅用於像素處理。」瀏覽器

SVG的主要長處

除了用於某些應用上跨圖像或者基於Canvas的渲染以外，SVG還有至關多的長處。 SVG並不只僅用於進行像素處理，但是它可以很是好地處理矢量圖形和可編程性的矢量。網絡

分辨率無關

你可能不知道，分辨率無關和瀏覽器不可知論是近來前端開發中熱議的話題（想一想「響應式設計」）。大多數用來解決分辨率問題（好比視網膜屏幕上）的方案既致使了大量沒必要要的數據下載（高清圖像替換）又爲一個或者其它瀏覽器進行了妥協。這使得無線網絡中更高分辨率圖像的傳輸每每受限於數據下載速度的瓶頸。這並不理想。編輯器

SVG提供了一種方法來提供全分辨率的圖形元素：不管什麼大小的屏幕，縮放比例或着分辨率。直到SVG出現以前，咱們僅僅能經過CSS和文本渲染看到清晰的元素樣式。在SVG裏不需要使用div和:after元素來建立簡單的形狀和其它效果。相反你可以建立各類矢量形狀。

「SVG提供了一種方法來提供全分辨率的圖形元素：不管什麼大小的屏幕，縮放比例或着分辨率」

基於DOM節點的API

你寫HTML嗎？ JavaScript和CSS呢？是的。現在你已經知道了很是多關於編寫SVG的信息。 SVG實際上使用和XML兼容的格式來定義其呈現的形狀。除此以外，你可以用CSS爲形狀加入樣式，使它們與JavaScript進行交互。有多個像D3.js和Raphael的JS庫可以協助你。如下是一組SVG元素的樣例（Envato葉子）。你也可以在JSFiddle上看到這個演示樣例。

<svg>
<g>
   <g>
      <path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
         c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
         c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
         C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
         C282.657,200.806,278.797,11.28,278.797,11.28z"/>
   </g>
   <g>
      <path fill="#B1C982" d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
         c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
         C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
         z"/>
   </g>
</g>
</svg>

SVG 基於 DOM 節點的 API 比起client側的 CanvasAPI 來講，無疑具備更高的可訪問性。你可以由此作到：

在server端建立基於SVG文檔的圖像
像其它HTML元素同樣檢查SVG元素
經過你熟悉的技術（JS和CSS）編程來處理形狀、樣式和位置
爲SVG節點綁定事件函數

DOM API爲使用SVG提供了不少其它一系列明顯的優點。

無須沒必要要的HTTP請求

當你在HTML中使用<img>標籤來引入圖像時，就是定義了一個用戶瀏覽器需要請求的文件。這個請求會佔用帶寬，需要不少其它寶貴的時間來下載。假設你的圖像用一組DOM節點來取代，可以下降額外的HTTP請求，使你的站點速度更快，對用戶更加友好。

簡單交互腳本

儘管現在瀏覽器大戰，跨瀏覽器的DOMAPI在腳本的交互性方面提供了普遍的靈活性，可以延伸到SVG元素上。可以經過CSS爲SVG加入樣式；SVG元素支持瀏覽器事件API使得的經過腳本進行交互不在話下；還可以輕鬆的將一個事件函數綁定到SVG元素的節點上。

這不是真正在畫布上繪製的元素。因爲畫布是一個簡單的像素渲染引擎，繪製的元素不能在內存中保存爲對象。腳本將保持這些元素的收集工做，並監管所有相關的位置和大小信息來在事件循環中尋找和觸發事件。除此以外，Z-index也由腳本處理。

讓咱們來看看一個樣例。請注意：爲了保持簡潔，咱們將使用jQuery。

var circleCenter = [200, 300], radius = 50;
$(window).on("mousemove", function(e){
   var mx = e.pageX, my = e.pageY;
   if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){
      // now we are hovering
   }
 
});

相比之下，咱們可以看到使用SVG可以更簡單的完畢相同任務。

$("svg path#circle").on("hover", function(event){
   // That's all.
});

顯然開發人員編寫簡單交互的腳原本說效率更高。

實際應用

有大量的Canvas相關的JS庫（好比KineticJS，可以讓你實現一些酷炫的功能）。但假設你像我同樣，就不會在你的Web應用裏使用全然的物理引擎。做爲替代，我最常常需要可擴展的圖標、交互圖以及具體的、美觀的方式來把信息呈現給用戶。大多數我需要的圖形就是簡單易用的公式。這些圖形元素很是easy的使用SVG來建立，不少簡單的物理方程可以處理你的這些需求。因此讓咱們來看看SVG的一些實際應用。

圖形
因爲SVG最大的優點是主要的矢量形狀，天然很是適用於圖形和信息圖表。它不只很是適合用來從給定的數值建立靜態的圖表，還適用於「實時的」圖形：經過AJAX請求、用戶輸入或者隨機生成的數據生成。

路線圖
路線圖由堅硬的線條和精確的形狀組成。這些形狀可以用向量圖形很是好的展現。

複雜的UI元素

好比現在你需要一個UI元素，看上去像圓圈金字塔。你怎樣用HTML和CSS來實現？好吧，你要先爲每一個洞建立一堆的div，爲它們每一個賦予肯定的圓角邊框和邊框樣式。而後你要使用一個div容器來定位它們。現在你假設想要一個整體的漸變該怎樣實現？你可能必需要使用Mask，或者一些其它技術。咱們寧肯不使用圖像，因爲它們不可擴展，並且不能用可編程的方式來又一次渲染或者改變。相反，爲何不在Illustrator中繪製元素，並且將它保存爲一個SVG文件？這將會讓你有一個單獨的、可擴展的元素，並且不用操心多個div的管理。

Logos
多數標誌都是基於矢量的。你可以爲你的Logo定義一個SVG文檔，並且把它放到不論什麼地方，隨時縮放爲不論什麼尺寸，而全然不需要犧牲質量或者佔用過多的帶寬。

簡單遊戲
Canvas適合遊戲渲染，這並不是祕密。另外的緣由是遊戲每每不依賴於矢量圖形，相反它們使用基於像素的藝術字和動畫。然而，SVG對於需要更少字符動畫和不少其它信息展現的遊戲來講是一個很是棒的選擇（好比數獨遊戲）。

爲何你可能不使用SVG

現在咱們已經看過了不少SVG的長處，讓咱們來看看不少開發人員爲何仍然選擇不使用SVG。最主要有兩個緣由：

一、他們歷來沒有據說過SVG或者從沒想過需要它，因此都忽略了（這再也不是藉口！）

二、 SVG XML文檔看起來相對古老和複雜，好像使用圖像更加簡單。

固然沒有不論什麼人想手動編輯SVG XML裏的一個個點。幸運的是，沒有人需要這麼作。這是人們常常沒有意識到的部分，這裏有不少工具來編輯SVG，因此你永遠不需要手動來作這件事。

SVG工具

Illustrator,Inkscape

這個矢量編輯器最有可能把你的文件保存爲SVG。立刻來試試吧！打開Illustrator，畫一兩個圓，並且把文件保存爲SVG。而後在Sublime或者其它文本編輯器中打開，你可以立刻看到，除了一些額外的元數據，SVGXML可以立刻應用到HTML中。你最有可能看到<g>標籤（group），<path>標籤（path）以及<svg>元素。

D3.js

儘管你全然可以把SVG XML直接拖放到一個HTML文件裏，但是當你想要動態建立SVG時怎麼辦？D3.js是一個基於數據操做文檔的JS庫。換句話說，它的偉大之處在於可以基於一系列的數據生成好比條形圖和線狀圖的SVG元素。咱們選擇展現D3是因爲它符合瀏覽器裏SVG實際實現的詞彙，請注意另外另外一些很是棒的非標準SVG庫（值得注意的是Raphael.js）。