SVG入門—如何手寫SVG

時間 2019-11-07

標籤 svg 入門如何手寫简体版

原文原文鏈接

歡迎關注富途web開發團隊，缺人從衆css

小編剛來公司的時候，有個需求須要作一個圖形動畫，當時原本想使用圖片作的。Toobug看了需求後，就說可使用SVG作呀。小編當時對與SVG一點都不會呀。Toobug看我那無辜的表情，說沒事。我這有一本書《SVG精髓》（做者：就是Toobug），你拿去看看，邊學邊作唄。html

好吧，小編後面就看了一個星期的SVG精髓，如今也算入門了吧。git

那麼今天小編也不是讓你們來買書的，只但願咱們團隊 WillWang 翻譯的這篇SVG入門文章會對你們入門SVG有幫助。github

正文

可縮放矢量圖形的一大優點（除了它們能夠被無限縮放而沒有質量損失以外）是一旦你知道了基本的原理，無需打開繪圖程序你就能很容易地手寫出一些簡單的形狀。web

只要不多的幾行代碼你就能夠擁有你的自定義圖標，並且你還很清楚每一個圖標是怎麼組合出來的。當你建立本身的 SVG 時，你能夠確保以最有效的方式來編寫它們，而且當你在站點中使用它們時，你擁有最大的控制權。瀏覽器

在本教程中，咱們將涵蓋手寫 SVG 的全部基本原理，但我不會用一個僅僅是丟出一系列相關形狀和屬性的文章來煩大家。相反，大家會經過實踐來學習如何手寫 SVG，建立出本教程開頭那張圖片上所列的6個圖標（在線示例）。在此過程當中，你將會用到手寫 SVG 所需的全部基本元素。併發

說到那些基本元素，讓咱們快速地介紹一下他們每個的狀況。svg

基本的 `SVG` 元素

你能夠深刻 SVG 複雜的細節，但這對咱們即將建立的圖標不是必須的。如下列表涵蓋了咱們將用到的構建塊。學習

<svg> 包裹並定義整個矢量圖。<svg> 標籤之於矢量圖就如同 <html> 標籤之於一個 web 頁面。
<line> 建立一條直線。
<polyline> 建立折線。
<rect> 建立矩形。
<ellipse> 建立圓和橢圓。
<polygon> 建立多邊形。
<path> 經過指定點以及點和點之間的線來建立任意形狀。
<defs> 定義一個可複用的圖形。初始狀況下 <defs> 裏面的內容是不可見的。<defs> 標籤之於矢量圖就如同 <head> 標籤之於一個 web 頁面。
<g> 將多種形狀組合起來。將組合後的形狀置於 <defs> 中可讓它可以被複用。
<symbol> 相似於一個組合，可是擁有一些額外的特性。一般被置於 <defs> 標籤中便於複用。
<use> 獲取在 <defs> 中定義的複用對象並在 SVG 中顯示出來。

當咱們繼續閱讀並建立咱們的圖標時，咱們將以上面所看到的元素列表的順序進行。動畫

起始文件

在咱們開始以前，從這個 GitHub 倉庫取一份起始文件。你能夠下載一個 .zip 格式的文件或者直接將這個倉庫 clone 到本地。

咱們將從一個已經包含了一些基本的 HTML 和 CSS 的文件開始。這會給咱們即將建立的 SVG 以一些樣式，也會在頁面上準備一些小網格。咱們將會在這些網格上建立咱們的圖標，但願它能在你放置你的 SVG 時幫助你肯定座標。

當你打開 Starter Files 目錄下的文件 handcodedsvg.html 時，你應當會看到以下圖所示的樣子：

`x` 和 `y` 值概述

在網站的二維平面上，用 x 表明橫軸，y 表明縱軸。每一個座標軸上的位置都用數字表示。使用遞增的 x 值來讓物體右移，使用遞減的 x 值來讓物體左移。一樣地，使用遞增的 y 值來讓物體下移，使用遞減的 y 值來讓物體上移。

一個經常使用的表示某一點的 x 值和 y 值的簡寫是 (x, y)。例如，一個在 x 軸上的值爲 10，在 y 軸上的值爲 50 的點能夠寫成 (10, 50)。在本教程中，我將不時地使用這個簡寫形式。

注意到咱們網格中的那兩條最粗的線了嗎？咱們將 SVG 的左上角與那兩條直線相交的地方對齊放置。所以，這個交點將在咱們的 SVG 中表明 x=0 和 y=0，即(0, 0) 的位置。

網格背景

每條最細的網格線之間相距 10px，中等粗細的線之間相距 100px。所以若咱們想將一個物體從一箇中等粗細的線向下移動到另外一箇中等粗細的線，咱們只需把 y 軸上的值增長 100px。

若是這聽起來仍然有點不清楚，不用擔憂，在咱們進行建立 SVG 圖標的實際操做時你就會明白了。

默認的 `SVG` 樣式

注意在初始的 HTML 文件中有一些內嵌的 CSS 設置了咱們即將建立的圖標的默認樣式。

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
複製代碼

上述 CSS 設置了咱們的圖標是無填充的，粗細 5px 的黑色線條繪製，邊角平滑。

1. 設置 `SVG`

建立任何 SVG 的第一步是寫下一個 <svg></svg> 元素。你所指望你的 SVG 顯示的全部內容都必須放在這個標籤內部。在這個元素上可使用一些屬性，但爲了保持簡單，咱們只使用寬度和高度。

將下面的代碼添加到你的 HTML 文檔的 <body> 標籤裏去：

<svg width="750" height="500">

</svg>
複製代碼

注意：在咱們的起始文件中的 CSS 會將這個 SVG 向下和向右各偏移 100px，以此保證 SVG 的左上角被置於背景網格中兩條最粗的直線的交點處。在本教程的 CodePen 演示中的值也可能會稍有不一樣——但能夠隨意地對它們進行操做。

2. 建立 `左對齊` 圖標

讓咱們從使用 <line> 元素建立這個左對齊圖標開始：

你會用到 line 元素的4個屬性：

x1：起點的水平軸座標
y1：起點的豎直軸座標
x2：終點的水平軸座標
y2：終點的豎直軸座標

綜上，你會使用屬性 x1 和 y1 來設置直線的起點，使用屬性 x2 和 y2 來設置直線的終點。

讓咱們建立咱們的圖標的第一條線，即頂部的那條。咱們打算讓線長 45px，然而咱們使用的 5px 粗細的筆畫會在咱們的線條外增長一些額外的像素。所以咱們須要將線條向右下角偏移 3px 以確保全部因 stroke 產生的額外像素都不會被剪掉。

基於上述緣由，咱們從 x 軸的座標 3 和 y 軸的座標 3 處開始咱們的直線。咱們能夠用屬性 x1="3" y1="3" 來設置線的起點爲 (3, 3)。

咱們打算讓線長 45px，因此在起點的 x 軸座標值 3 上加上 45 獲得 x2 的值爲 48。咱們想讓直線在水平軸上的相同位置結束，所以設置 y2 等於 3，也就是與 y1 相等的值。經過屬性 x2="48" y2="3" 設置了線的終點 (48, 3)。

這第一根線的完整代碼看起來應該是這樣的：

<line x1="3" y1="3" x2="48" y2="3"></line>
複製代碼

查看你瀏覽器中的預覽，你會看到一條長 45px 的圓潤黑線。

如今咱們能夠繼續給咱們的圖標添加接下來的三條線。咱們打算最終畫出四條線。第一和第三根線長 45px，第二和第四根線長 62px。咱們還想要在每條線之間有 16px 的垂直間距。

咱們能夠經過以下的代碼獲得這個圖標：

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
複製代碼

注意：每條線的 y 值以 16px 遞增來建立所需的垂直間距。

再看一看你的瀏覽器預覽，你應該看到全部的四條線。你也能夠直接在下面的 codepen 中編輯 SVG:

代碼詳情：codepen.io/new4/

在咱們繼續以前先註釋掉你的圖標

有了這些代碼，你的第一個圖標就已經完成了。咱們已經準備好繼續去建立下一個圖標了，咱們想在網格的相同位置上建立這個圖標，但如今 左對齊 圖標占着這個位置。所以，如今須要註釋掉它的代碼來清理空間。稍後當咱們將圖標轉換爲可重用部件時，咱們會回過頭來恢復被註釋掉的代碼。

你須要對咱們以後建立的每個圖標作一樣的事情，即在完成建立以後將其註釋掉。出於這個緣由，在每一個圖標的代碼之上添加一個小提示或許是個不錯的注意，這樣在以後回顧的時候你就知道哪一個是哪一個了。

3. 建立一個 `插入` 圖標

對於這個圖標，讓咱們使用直線 <line> 元素衍生而來的折線元素：即 <polyline>。咱們將會使用它來建立一個指向右方的插入符。

<polyline> 元素只有一個屬性：points。在這裏你會使用一對對的數字來設置一系列的點。點和點之間的線段會自動繪製出來。數值對就簡單地一個接一個的被寫在點屬性裏。可使用逗號分隔，但這不是必須的。爲了便於閱讀，你可能還想在代碼中將每一對值寫成一行。

咱們會在上一個圖標的起始點處開始咱們的 插入 圖標，那就是 (3, 3)，這確保了咱們的筆畫和線的端頭不會被剪掉。咱們想讓第二個點向右移動，並向下移 25px，那麼咱們把它設爲 (30,28)。咱們的第三個點應該與第一個點垂直對齊，同時再向下移動 25px，因此它應被設爲 (3,53)。

你能夠把這些點添加到 <polyline> 的 points 屬性中去，以下：

<polyline points=" 3 3 30 28 3 53 "></polyline>
複製代碼

若是你想要更簡潔的代碼，你也能夠把上面的代碼寫成：

<polyline points="3 3, 30 28, 3 53"></polyline>
複製代碼

或者

<polyline points="3 3 30 28 3 53"></polyline>
複製代碼

看一看你的瀏覽器預覽，你會看到你的 插入 圖標的顯示：另外一個圖標就這樣完成了！

代碼詳情：codepen.io/new4/

一樣地，在進入下一個圖標以前先註釋掉當前這個圖標，並給它加上一個能讓你知道它是什麼圖標的小提示。

4. 建立一個 `瀏覽器` 圖標

如今咱們有了線條，讓咱們從矩形（<rect>）開始建立一些形狀。咱們將把它與一些 <line> 結合起來建立一個 瀏覽器 圖標。

長方形和正方形能夠經過 <rect> 元素來建立。<rect> 有4個須要提供值的屬性：

x：左上角的 x 軸座標值
y：左上角的 y 軸座標值
width：矩形的寬度
height：矩形的高度

注意：你也可使用屬性 rx 和 ry 來指定矩形的圓角半徑。

咱們要建立一個矩形，它的左上角有 3px 的偏移量，一樣是爲了不描邊的截斷，因此咱們會用到 x="3" y="3" 的屬性值。咱們但願它是寬 80px，高 60px 的，因此咱們用到 width="80" height="60" 的屬性值。

所以咱們完整的矩形代碼就應該是：

<rect x="3" y="3" width="80" height="60"></rect>
複製代碼

保存代碼，到瀏覽器裏面進行預覽。你應該看到一個整潔的小矩形。

如今咱們所要作的就是在頂部添加一條水平線，還有在靠近左上角的地方加上一條豎線，就像你在本節開始時所看到圖像中的那樣。咱們將使用與以前繪製線段相同的過程，完整的 瀏覽器 圖標代碼看起來應該是這樣的：

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
複製代碼

花點時間查看一下這兩條線段的屬性所提供的座標，你能夠稍微改變一下它們的值來看看它們在這個圖標中是如何工做的。

代碼詳情：codepen.io/new4/

5. 建立一個 `警示` 圖標

如今咱們能夠控制矩形的建立，咱們再試試使用 <ellipse>。咱們將使用兩個 <ellipse> 以及一個 <line> 來建立這個 警示 的圖標。

相似於矩形，<ellipse> 元素也須要4個屬性，然而這些屬性和矩形的不一樣。咱們使用的是水平和豎直半徑而不是寬度和高度，一樣地，咱們經過中心而不是經過指定左上角來進行定位。

cx：中心位置在 x 軸上的座標
cy：中心位置在 y 軸上的座標
rx：沿 x 軸向的半徑，也就是它會把圖形分割成上下兩部分
ry：沿 y 軸向的半徑，也就是它會把圖形分割成左右兩部分

咱們想要一個寬 80px 高 80px 的正圓，這意味着在兩個軸上它的半徑均爲 40px。咱們用 rx="40" ry="40" 來設置這個值。

咱們還想要這個圓處於與圖上那兩條最粗的線平齊的位置。假定咱們的圓寬高均是 80px，那麼放置圓心的位置就是 40px。同時爲了不圖標被截斷，須要 3px 的偏移量，那麼圓的中心點就在兩軸的 43px 處。咱們用屬性 cx="43" cy="43" 來設定這個值。

將這些設定的屬性值放在一塊兒，就獲得以下代碼:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
複製代碼

查看你的瀏覽器預覽，如今在你的頁面上應該能看到一個圓。

如今咱們要添加第二個圓，建立感嘆號底部的那個點。咱們將以一樣的方式建立它，惟一的區別是咱們將使用內聯樣式來設置黑色的填充：

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
複製代碼

最後，咱們只須要添加感嘆號另外的線段部分。一樣地，咱們使用的技術與咱們以前建立線段的同樣，惟一的區別是咱們將使用內聯風格來將筆畫的寬度從 5px 增長到 8px。

警示 圖標的完整代碼以下：

代碼詳情：codepen.io/new4/

6. 建立一個 `播放` 圖標

如今咱們已經有一些如矩形和橢圓形這樣外形相對固定的形狀，咱們準備使用 <polygon> 元素來生成咱們本身的形狀。從八邊形到五角星，咱們能夠用這個元素建立出咱們想要的多邊形。不過，咱們如今就把事情弄清楚並建立一個三角形。咱們將把它與一個 <ellipse> 元素組合在一塊兒來建立一個 播放 圖標：

<polygon> 元素和 <polyline> 元素幾乎同樣。他們都只有一個 points 屬性，採用一對對的值的形式來設置每個點從而組成一個形狀。不一樣之處在於，折線 <polyline> 不是閉合的而多邊形 <polygon> 是自動閉合的。

讓咱們從下面這個圓開始，咱們的多邊形會放在它裏面。咱們使用的圓與咱們在警告圖標裏面使用的相同：

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
複製代碼

如今咱們來建立多邊形。咱們將會放置三個點，這些點之間會自動生成線段來建立一個三角形。點將是 (35,23)，(60,43) 和 (35,63)。如此，咱們的多邊形代碼將會是：

<polygon points="35 23, 60 43, 35 63" />
複製代碼

播放 圖標的完整代碼以下：

代碼詳情：codepen.io/new4/

7. 建立一個 `下載` 圖標

如今，咱們將學習最複雜的，但同時也是最靈活的生成 SVG 圖形的方法，即 <path> 元素。建立一個路徑有點像建立一個多邊形，每次僅需將你的形狀的一部分展現出來。然而，在路徑中你直接建立每個點，自定義每一條線，你還能夠選擇在點之間建立曲線而不是直線。

路徑能夠用來建立任何東西，但若是超出必定程度的複雜性以後，你最好仍是使用矢量設計應用程序，而不是手寫代碼。出於這個緣由，咱們將重點關注一小部分路徑功能，並使用它來建立這個 下載 圖標：

從技術上講，你可使用多邊形來建立上面這個形狀，可是這個箭頭能夠很好地幫助咱們弄清楚路徑元素是怎麼工做的。

咱們將會只用到 <path> 的屬性 d。d 表明 data，在這裏，你將定義路徑的全部點和線。在這個屬性裏，設置路徑點和在點之間建立連線的命令是由諸如 M 或 L 這樣的單個字母來提供的，而後是一組 x 和/或 y 座標。

這樣的命令有不少，但本文只是介紹 <path> 的使用，咱們將只介紹一些在手動編碼時能夠實際使用的命令。

M 表示移動到（moveto）。它用 x 值和 y 值來給定一條新的路徑的起始點。能夠想象成把你的鼠標放在畫布上的某一點以準備開始繪畫。大寫的 M 表示移動到一個絕對座標集合（小寫的 m 表示移動到一個相對座標集合）。
L 表示劃線到（lineto）。從當前位置到新的位置畫一條線。大寫的 L 表示移動到一個絕對座標集合（小寫的 l 表示移動到一個相對座標集合）。
Z 表示閉合路徑。經過在當前點和路徑的起始點之間畫一條直線來閉合形狀。

你必定要看下這三個命令（以及咱們將用它們建立的圖標）做爲入門 <path> 元素的讀物。要真正掌握它，你能夠自行去熟悉路徑的全部命令。

編寫你的 `下載` 圖標

要對 下載 圖標路徑進行編碼，建議先添加一個空路徑元素：

<path d=" "></path>
複製代碼

從這裏開始，一次添加一個命令，保存並查看圖標形狀的進展，這樣你就能夠看到它是如何被建立出來的。我還建議將每一個命令寫成一行以提升可讀性。

首先，咱們移動到點 (18, 3) 處，這是咱們的箭頭開始的位置。爲了完成這個動做，須要在路徑的屬性 d 中增長命令 M 18 3。
接着咱們想使用 L 命令來從起始點開始沿着 x 軸畫出一條 28px 的線段。爲了完成這個動做，咱們給屬性 d 添加第二個命令：L 46 3。查看你瀏覽器預覽，你會看到一條水平的短橫線。
如今用 L 46 40 直接向下畫一條 37px 的線。
而後用 L 61 40 直接向右進 15px。
接下來，咱們要開始建立箭頭點。咱們須要向左下方畫一條斜線。咱們用 L 32 68 完成它。
而後用 L 3 40 畫一條向左上方的斜線。
如今咱們用 L 18 40 來向右邊畫一條線以完成咱們的箭頭。
爲了使咱們的形狀閉合，咱們無需經過指定一個點來畫一條直線。咱們所要作的就是添加 Z 命令，它會自動閉合咱們的形狀。

最終的箭頭圖標代碼以下：

<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>
複製代碼

關於使用 <path> 的更多信息能夠查看本文末尾附上的引用文章。

代碼詳情：codepen.io/new4/

8. 添加 `<defs>` 元素

咱們已經完成了6個圖標的編碼工做，如今咱們能夠在咱們的 SVG 中準備好放置和重用它們。

爲了作到這個，咱們要將咱們的6個圖標代碼（目前已經被註釋掉了）用 <defs></defs> 包裹起來：

<defs>
<!-- 到目前爲止，你建立的全部圖標都在這裏 -->
</defs>
複製代碼

這樣作會告訴系統，目前咱們完成的全部圖標在咱們明確地去使用它們以前默認都是隱藏的。

如今，你能夠去掉對每一個圖標的註釋，它們不會出如今頁面上。

9. 用 `<g>` 建立組合對象

有兩種方法可使咱們的圖標隨時可用：將它們轉換爲組合，或轉換爲模板。咱們將把前面的一半圖標轉換成組合，而後把剩下的一半變成模板，這樣咱們就能夠說明他們之間的區別。

要把咱們的一個圖標轉換成一個組合，咱們要作的就是用標籤 <g></g> 來包裹它。爲了使這個組合可用，咱們還須要給它一個惟一的ID。

例如:

<g id="leftalign">
    <!-- 左對齊圖標 -->
    <line x1="3" y1="3" x2="48" y2="3"></line>
    <line x1="3" y1="19" x2="65" y2="19"></line>
    <line x1="3" y1="35" x2="48" y2="35"></line>
    <line x1="3" y1="51" x2="65" y2="51"></line>
</g>
複製代碼

用 <g></g> 將你最開始建立的3個圖標分別包裹起來，並添加上惟一ID，以下：

<g id="leftalign">
    <!-- 左對齊圖標 -->
    <line x1="3" y1="3" x2="48" y2="3"></line>
    <line x1="3" y1="19" x2="65" y2="19"></line>
    <line x1="3" y1="35" x2="48" y2="35"></line>
    <line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
    <!-- 插入圖標 -->
    <polyline points=" 3 3 30 28 3 53 "></polyline>
</g>

<g id="browser">
    <!-- 瀏覽器圖標 -->
    <rect x="3" y="3" width="80" height="60"></rect>
    <line x1="3" y1="19" x2="83" y2="19"></line>
    <line x1="20" y1="3" x2="20" y2="17"></line>
</g>
複製代碼

10. 使用 `<use>` 來放置組合

在 <defs> 元素內部咱們如今有三個圖標被定義成組合，咱們準備在 SVG 中使用它們。爲了使用它們，咱們須要作的就是添加一個 <use> 元素（確保在 <defs> 元素之外且以後的地方添加它），並設置一個 href 屬性指向想要的那個圖標的 ID。

例如，添加下面的代碼來使用 左對齊 圖標：

<use href="#leftalign"></use>
複製代碼

經過指定 x 和 y 的值來將圖標放置到特定的位置：

<use href="#leftalign" x="100" y="100"></use>
複製代碼

添加全部三個圖標並把它們分開排放的代碼看起來是這樣的：

<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>
複製代碼

查看瀏覽器，你應該會看到這樣的三個圖標：

11. 使用 `symbols` 建立模板對象

除了組合以外，你也可使用模板來定義你的圖標。模板幾乎和組合同樣，可是你能夠得到額外的設置來控制視口（viewbox）和長寬比。

若是你想要把咱們目前建立的圖標設置爲居中，這將很是有用。咱們將把剩下的三個圖標轉換成模板，而後使它們垂直填充100像素高的空間，並在這個空間中水平居中。

咱們以與建立組合相同的方式來建立咱們的模板，只是將咱們最後三個圖標的代碼包裹進 <symbol></symbol> 模板中。咱們也須要給每一個模板加一個惟一的 ID。

可是咱們也須要添加一個叫作 viewBox 的屬性。該屬性讓咱們能夠定義每一個模板的可見部分應該是什麼。當瀏覽器可以訪問這些信息時，它就能夠正確地縮放和排列模板。

咱們須要給 viewBox 屬性4個值。前兩個定義圖標的左上角，第三和第四分別定義它的寬度和高度。

從咱們的 警示 圖標開始，它的寬高都是 86px，因此咱們設置它的 viewBox 屬性值爲 0 0 86 86，以下：

<symbol id="alert" viewBox="0 0 86 86">
    <!-- 警示圖標 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
    <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
複製代碼

播放 圖標的寬高也是 86px，下載 圖標寬 64px 高 71px。所以咱們圖標模板相應的代碼應該是：

<symbol id="alert" viewBox="0 0 86 86">
    <!-- 警示圖標 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
    <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
    <!-- 播放圖標 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
    <!-- 下載圖標 -->
    <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>
</symbol>
複製代碼

12. 使用 `<use>` 來放置模板

如今，咱們能夠像使用咱們的組合同樣使用咱們的模板圖標。不過咱們也會提供已經設好了寬高屬性爲 100px 的圖標：

<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>
複製代碼

你會看到每一個基於模板的圖標都整齊地填充並居中在長寬 100px 的空間內：

試着給使用基於組合圖標的 <use> 元素上添加寬高的屬性。你會發現沒什麼變化。這是由於瀏覽器依靠的是 viewBox 的值（組合沒有這個值）來肯定如何縮放圖標。

總結

如下是完整的代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style> html, body { height: 100%; width: 100%; background: #e9e9e9; } body { margin: 0; text-align: center; } .grid { width: 750px; height: 500px; margin: 0 auto; padding-top: 100px; padding-left: 100px; background-image: url('grid.png'); position: relative; } .grid::before { content: ""; border-left: 1px solid #7c7cea; position: absolute; top: 0; left: 100px; width: 750px; height: 600px; } .grid::after { content: ""; border-top: 1px solid #7c7cea; position: absolute; top: 100px; left: 0; width: 850px; height: 500px; } svg { stroke: rgb(0, 0, 0); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; } </style>
</head>

<body>
  <div class="grid">
    <svg width="750" height="500">
      <defs>
        <g id="leftalign">
          <!-- Left align icon made with lines -->
          <line x1="3" y1="3" x2="48" y2="3"></line>
          <line x1="3" y1="19" x2="65" y2="19"></line>
          <line x1="3" y1="35" x2="48" y2="35"></line>
          <line x1="3" y1="51" x2="65" y2="51"></line>
        </g>

        <g id="rightcaret">
          <!-- Right caret icon made with a polyline -->
          <polyline points=" 3 3 30 28 3 53 "></polyline>
        </g>

        <g id="browser">
          <!-- Browser icon made with rectangle and lines -->
          <rect x="3" y="3" width="80" height="60"></rect>
          <line x1="3" y1="19" x2="83" y2="19"></line>
          <line x1="20" y1="3" x2="20" y2="17"></line>
        </g>

        <symbol id="alert" viewBox="0 0 86 86">
          <!-- Alert icon made with ellipses and a line -->
          <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
          <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
          <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
        </symbol>

        <symbol id="play" viewBox="0 0 86 86">
          <!-- Play icon made with ellipse and polygon -->
          <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
          <polygon points="35 23, 60 43, 35 63" />
          </g>

          <symbol id="download" viewBox="0 0 64 71">
            <!-- Download icon made with path -->
            <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>
          </symbol>
      </defs>
      <use href="#leftalign" x="100" y="100"></use>
      <use href="#rightcaret" x="300" y="100"></use>
      <use href="#browser" x="500" y="100"></use>
      <use href="#alert" x="100" y="200" width="100" height="100"></use>
      <use href="#play" x="300" y="200" width="100" height="100"></use>
      <use href="#download" x="500" y="200" width="100" height="100"></use>
    </svg>
  </div>
</body>

</html>
複製代碼

這就涵蓋了手寫 SVG 的要點了！讓咱們總結一下咱們所學到的:

設置你的 <svg> 元素來包裹你的整個圖形。
使用 <line> 和 <polyline> 來創造線。
使用 <rect>, <ellipse> 和 <polygon> 來創造閉合的圖形。
使用 <path> 來創造你想要的任何形狀。
使用 <g> 來組合形狀。
對於須要有額外特性的組合使用 <symbol>
使用 <defs> 元素定義組合和模板。
使用 <use> 元素來放置你定義的組合和模板。

經過本教程咱們打下了堅實的基礎，可是你還可使用 SVG 作更多的事情，因此不要止步於此，繼續挖掘並發現更多能夠實現的使人讚歎的東西！

與此同時，但願你再也不徹底依賴於矢量設計應用程序來建立 SVG，而且你有信心能夠手寫一些本身的圖形。對於更復雜的圖形來講，設計類應用仍然是一種可行的方法，可是你能夠利用你所掌握的構建模塊作不少事，得到手寫代碼帶來的速度和控制方面的優點。

SVG入門—如何手寫SVG

正文

基本的 SVG 元素

起始文件

x 和 y 值概述

網格背景

默認的 SVG 樣式

1. 設置 SVG

2. 建立 左對齊 圖標

在咱們繼續以前先註釋掉你的圖標

3. 建立一個 插入 圖標

4. 建立一個 瀏覽器 圖標

5. 建立一個 警示 圖標

6. 建立一個 播放 圖標

7. 建立一個 下載 圖標

編寫你的 下載 圖標

8. 添加 <defs> 元素

9. 用 <g> 建立組合對象

10. 使用 <use> 來放置組合

11. 使用 symbols 建立模板對象

12. 使用 <use> 來放置模板

總結

相關連接

基本的 `SVG` 元素

`x` 和 `y` 值概述

默認的 `SVG` 樣式

1. 設置 `SVG`

2. 建立 `左對齊` 圖標

3. 建立一個 `插入` 圖標

4. 建立一個 `瀏覽器` 圖標

5. 建立一個 `警示` 圖標

6. 建立一個 `播放` 圖標

7. 建立一個 `下載` 圖標

編寫你的 `下載` 圖標

8. 添加 `<defs>` 元素

9. 用 `<g>` 建立組合對象

10. 使用 `<use>` 來放置組合

11. 使用 `symbols` 建立模板對象

12. 使用 `<use>` 來放置模板