SVG 基礎(chǔ)屬性與應(yīng)用

SVG：Scalable Vector Graphics，可伸縮矢量圖形

前言

為了在網(wǎng)絡(luò)設(shè)備上傳播各種聲音、圖像等媒體文件，有了各種針對(duì)不同需求的文件格式——圖片、視頻、音頻等都有各種格式，應(yīng)對(duì)高效傳輸、低空間占用、各類媒體中傳輸使用等場景。

圖片，就有許多格式，例如普通用戶最為熟悉的 JPEG、PNG、GIF。盡管這些格式與大家經(jīng)常見面，但普通用戶根本不知道這些圖片格式的區(qū)別與作用。這里簡單說一下，JPEG 是有損壓縮，對(duì)原圖實(shí)行大幅度的壓縮，以減少圖片的空間占用，但同時(shí)也會(huì)對(duì)畫質(zhì)產(chǎn)生較大的影響。PNG 格式的圖片可以理解為類似剪紙，沒有圖像的區(qū)域是透明的，可以與背景有效融合。有時(shí)你會(huì)在某些地方看到透明頭像，使用的就是 PNG 格式的圖片。至于 GIF ，相信大家都熟悉，就是一個(gè)短暫的高壓縮的動(dòng)圖，大家在某些軟件的搞笑區(qū)或者社交軟件的斗圖區(qū)看得很多。

除上述格式，還有 PSD 類似的圖片格式，有特殊用途，PSD 主要用于 PS 軟件，保存高保真的圖片，一般是商業(yè)化使用，其他軟件基本不支持。

但今天的主題并不是以上這些格式。為了數(shù)字媒體的網(wǎng)絡(luò)化傳播，許多圖像公司參與了 SVG 格式的標(biāo)準(zhǔn)制定。除此之外，人們發(fā)現(xiàn)，上面的圖片格式在網(wǎng)絡(luò)中傳播時(shí)，要么是會(huì)因?yàn)榉糯竽：词潜旧韷嚎s得太厲害，或者是本身就很大，在一些場景下不是特別適用，比如放大畫質(zhì)不損失，且要求空間占用小的時(shí)候。

這種放大圖像不模糊的形式類似于 PDF 文檔。

為了滿足上述需求，2003 年，W3C 與蘋果、柯達(dá)、IBM、Adobe 等公司一起制定了 SVG 矢量圖形標(biāo)準(zhǔn)。SVG 使用 XML （可擴(kuò)展標(biāo)記語言）定義圖像，通過一系列參數(shù)在設(shè)備顯示屏上規(guī)定圖像的坐標(biāo)，坐標(biāo)矢量便會(huì)連接繪制出圖像，放大縮小不影響畫質(zhì)。

因?yàn)槭褂?XML，SVG 圖像很容易在 HTML 網(wǎng)頁中使用。

一、HTML 中使用 SVG

需要強(qiáng)調(diào)的是，HTML 中使用的 SVG 的代碼一般是專業(yè)的繪圖軟件自動(dòng)生成的，在使用時(shí)只需要引入就好，SVG 的標(biāo)簽與屬性非常繁雜，沒有必要進(jìn)行記憶，只需記憶一些常用屬性，在實(shí)際開發(fā)中可以修改屬性改變樣式即可。

1. embed 標(biāo)簽

語法：

<embed src="circle1.svg" type="image/svg+xml" />

優(yōu)勢：所有主要瀏覽器都支持，并允許使用腳本

缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）

該方法不常用。

2. object 標(biāo)簽

語法：

<object data="circle1.svg" type="image/svg+xml"></object>

優(yōu)勢：所有主要瀏覽器都支持，并支持HTML4，XHTML和HTML5標(biāo)準(zhǔn)

缺點(diǎn)：不允許使用腳本。

該方法不常用。

3. iframe 標(biāo)簽

語法：

<iframe src="circle1.svg"></iframe>

優(yōu)勢：所有主要瀏覽器都支持，并允許使用腳本

缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）

該方法不常用。

4. SVG 代碼

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

該方法是最常用的方法，使用 SVG 標(biāo)簽如同普通的 HTML 標(biāo)簽，并且可以對(duì) SVG 圖像進(jìn)行更改，只需要更改相關(guān)參數(shù)即可。但該方法需要對(duì)相關(guān)標(biāo)簽與屬性熟練掌握。

二、SVG 相關(guān)標(biāo)簽與屬性

SVG 使用 <svg> 標(biāo)簽定義圖形的繪制區(qū)域，要繪制的圖形就寫在 <svg> 標(biāo)簽中。其可以設(shè)置寬高等屬性，viewBox 屬性用于設(shè)置 SVG 盒子，其有四個(gè)參數(shù)，例如：

<svg width="200" height="200" viewBox="50 50 50 50"></svg>

其中前兩個(gè)參數(shù)是 SVG 盒子的起始坐標(biāo)，后兩個(gè)代表盒子的寬高。

1. 矩形

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

xmlns 是 XML 的語法，規(guī)定一個(gè)命名空間，用于防止同名原素帶來的歧義。

矩形使用標(biāo)簽 <rect> 定義，其中 x、y 表示開始繪制的橫縱坐標(biāo)，width 與 height 表示圖形的寬高。

2. 圓形

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

圓形使用 <circle> 標(biāo)簽定義，cx、cy 表示圓心坐標(biāo)，r 表示圓的半徑。stroke 表示圖形的邊框，所有圖形都可以使用該屬性。與 CSS 中的 border 類似，后面會(huì)介紹它的相關(guān)屬性。

3. 橢圓

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

橢圓使用 <ellipse> 標(biāo)簽定義，屬性與圓類似，不同的地方在于半徑 r 的屬性設(shè)置不同。橢圓使用 rx、ry 進(jìn)行設(shè)置。fill 屬性意為 “填充”，指圖形的填充模式，類似于背景色。

4. 直線

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

直線使用 <line> 標(biāo)簽定義。兩點(diǎn)確定一條直線，其中 x1、y1 是第一個(gè)點(diǎn)的坐標(biāo)，x2、y2 是第二個(gè)點(diǎn)的坐標(biāo)。這里的 stroke-width 定義線段的寬度。

5. 多邊形

語法：

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

折線使用 <polygon> 標(biāo)簽進(jìn)行定義，points 屬性用于設(shè)置每個(gè)頂點(diǎn)的坐標(biāo)。

6. 折線

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

折線使用 <polyline> 標(biāo)簽進(jìn)行定義，points 屬性用于設(shè)置每個(gè)折點(diǎn)的坐標(biāo)。fill 設(shè)置折線的填充，一般設(shè)為 none，不設(shè)置的話會(huì)是黑色，填充為多個(gè)多邊形。

7. 路徑

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
</svg>

路徑使用 <path> 定義，用于繪制復(fù)雜的圖形。id 表示路徑的唯一身份，d 表示路徑的繪制方式。有以下屬性：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允許小寫字母。大寫表示絕對(duì)定位，小寫表示相對(duì)定位。

8. 文本

語法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

以上就是一些常用的繪制 SVG 圖形的標(biāo)簽，當(dāng)然，還有很多標(biāo)簽，例如 <a> 標(biāo)簽建立一個(gè)連接，<defs> 建立一個(gè)容器，類似 <template>。但是這些標(biāo)簽繁雜難記，不必刻意去記憶，需要時(shí)查閱手冊(cè)即可，使用熟練即可記住。

三、SVG 特效

由于這些屬性都非常復(fù)雜難記，所以不會(huì)詳細(xì)講解，仍然建議遇到時(shí)查手冊(cè)即可。

1. 濾鏡

SVG 大部分特效都是通過濾鏡完成的。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!--容器-->
  <defs>
  <!--濾鏡-->
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <!--過濾陰影-->
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <!--與圖像結(jié)合的濾鏡-->
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

2. 漸變

漸變分線性漸變與放射漸變，與 CSS 類似。

線性漸變

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

放射漸變

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

這里的 <stop> 表示漸變停止的位置。offset 表示偏移量，stop-color 表示停止?jié)u變后的顏色。

3. stroke

stroke，意為行程

stroke 有以下屬性：

stroke
stroke-width
stroke-linecap
stroke-dasharray

stroke

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

stroke-linecap

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

定義 path 繪制的線條的終端的樣式，butt 是會(huì)把兩端截掉一點(diǎn)，round 是半圓平滑，類似于 border-radius: 50%，square 是方形。

stroke-dasharray

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

g 標(biāo)簽，用于把元素組合的標(biāo)簽

結(jié)語

實(shí)際應(yīng)用中，美工會(huì)將設(shè)計(jì)好的 SVG 圖片轉(zhuǎn)換為 XML 代碼，開發(fā)時(shí)直接復(fù)制過來使用，若有什么可以修改的，找到相關(guān)參數(shù)修改即可。

復(fù)雜難記的屬性可以翻閱手冊(cè)，使用多了便會(huì)記住。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容