SVG基礎篇--SVG簡介｜8月更文挑戰

"不畏懼，不將就，將來的日子好好努力"——你們好！我是小芝麻😄css

攢了多年的草稿箱，本打算完善以後一篇發佈，但爲了參加活動，也只能一點一點發布了，沒辦法才疏學淺，新創做確定是來不及了，爲了遇上進度，只能出此下策了😂html

1、SVG簡介

一、什麼是SVG

SVG 全稱 Scalable Vector Graphics (可縮放矢量圖形)。它是一種用來描述二維矢量圖形的 XML 標記語言。chrome

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

二、特色及優點

與其餘圖像格式相比，使用 SVG 的優點在於：數組

SVG 可被很是多的工具讀取和修改（好比記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不降低的狀況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
SVG 是開放的標準
SVG 文件是純粹的 XML

三、瀏覽器兼容

支持 chrome、Safari、foxfire1.五、Opera九、ie9 及以上瀏覽器，可是SVG SMIL動畫 IE瀏覽器(包括IE11)總體不支持（對於移動端來講，基本支持）瀏覽器

2、SVG的使用方式

對於直接支持SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。markdown

一、內聯到HTML

SVG是標準的HTML元素，直接寫到HTML中就能夠了，像下面這樣：網絡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="black"/>
    <text x="50%" y="50%" fill="yellow" style='dominant-baseline:middle;text-anchor:middle;font-size:36px'>Hello world</text>
  </svg>
</body>
</html>
複製代碼

二、獨立SVG文件

獨立SVG指的是經過使用svg文件擴展名來提供向量圖形文件格式。以下格式：dom

一、在瀏覽器直接打開
二、在HTML中使用 <img> 標籤引入

<img src="./1.svg">
複製代碼

三、做爲 CSS 背景使用

.box{
  width: 300px;
  height: 200px;
  background-image: url('./1.svg');
}
複製代碼

四、使用 <embed> <object> <iframe> 引入

<embed src="1.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
複製代碼

embed 優點：全部主要瀏覽器都支持，並容許使用腳本
embed 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許）

<object data="1.svg" width="300" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
複製代碼

object 優點：全部主要瀏覽器都支持，並支持HTML4，XHTML和HTML5標準
object 缺點：不容許使用腳本。

<iframe src="1.svg" width="300" height="200"></iframe>
複製代碼

iframe 優點：全部主要瀏覽器都支持，並容許使用腳本
iframe 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許）

3、SVG的渲染

一、渲染順序

SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不同。svg

在SVG中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後續元素被繪製在先前繪製的元素之上。=> 「後來居上」工具

<svg style="outline: 2px solid red;" width="200" height="200">
  <rect x="0" y="0" width="150" height="150" fill="yellow"/>
  <rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
複製代碼

二、渲染步驟

渲染單個圖形元素時: (組的渲染同理)

一、建立一個透明黑色的臨時畫布
二、將元素繪製到該臨時畫布上
三、應用相應的濾鏡效果
四、設置相應的剪裁、遮罩、不透明度效果
五、將修改後的臨時畫布組合到背景中

三、支持渲染的三種圖像類型

SVG 支持三種基本的圖像元素：矢量圖形、文字、點陣圖像。

矢量圖形：指直線曲線色塊的組合；
文字：指文本方式的字符
點陣圖像：指一個矩形區域像素點顏色值的描述塊，表現爲一個二維數組。

下一篇《SVG座標系簡介》咱們再見

參考文獻

[1] SVG學習筆錄（一）
[2] w3school