HTML5 SVG

Created: October-16, 2018

SVG 代表可縮放向量圖形。

什麼是 SVG

可縮放向量圖形（SVG）是一種基於 XML 的影象格式，用於為 Web 定義基於二維向量的圖形。向量影象可以放大或縮小到任何程度而不會丟失影象質量。

SVG 影象及其行為在 XML 檔案中定義 - 這意味著可以使用任何文字編輯器建立和編輯 SVG 影象。與其他影象格式（如 JPEG，PNG，GIF 等）相比，使用 SVG 還有其他一些優點。

可以搜尋、索引、編寫指令碼和壓縮 SVG 影象。
可以使用 JavaScript 實時建立和修改 SVG 影象。
SVG 影象可以任何解析度高質量列印。
可以使用內建動畫元素對 SVG 內容進行動畫處理。
SVG 影象可以包含指向其他文件的超連結。

提示： 向量影象由一組由數學定義的固定形狀組成，而點陣圖或光柵影象由一組稱為畫素的固定點組成。

將 SVG 嵌入到 HTML 頁面中

你可以使用 HTML5 <svg> 元素將 SVG 圖形直接嵌入到文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 SVG</title>
</head>
<body>
    <svg width="300" height="200">
        <text x="10" y="20" style="font-size:14px;">
            Your browser support SVG.
        </text>
        Sorry, your browser does not support SVG.
    </svg>
</body>
</html>

注意： 所有主要的現代 Web 瀏覽器（如 Firefox，Chrome，Safari，Opera 和 Internet Explorer 9+）都支援內聯 SVG 渲染。

使用 SVG 繪製路徑和形狀

以下部分將介紹如何使用 HTML5 <svg> 元素在網頁上繪製基本的基於向量的路徑和形狀。

劃線

Line 是你可以使用 SVG 繪製的最基本路徑。以下示例將向你展示如何使用 SVG 元素 <line> 建立直線：

<svg width="300" height="200">
    <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>

<line> 元素的屬性 x1 ， x2 ， y1 和 y2 從 (x1,y1) 到 (x2,y2) 畫一條線。

繪製一個矩形

你可以使用 SVG <rect> 元素建立簡單的矩形和方形。以下示例將向你展示如何使用 SVG 建立和設定矩形形狀：

<svg width="300" height="200">
    <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>

<rect> 元素的屬性 x 和 y 定義了矩形的左上角的座標。屬性 width 和 height 指定形狀的寬度和高度。

畫一個圓圈

你可以使用 SVG <circle> 元素建立圓形。以下示例將向你展示如何使用 SVG 建立和設定圓形形狀：

<svg width="300" height="200">
    <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>

<circle> 元素的屬性 cx 和 cy 指定了圓的中心的座標，屬性 r 指定了圓的半徑。如果屬性 cx 和 cy 被省略或沒有指定，則圓的中心被設定為 (0,0) 。

使用 SVG 繪製文字

你還可以使用 SVG 在網頁上繪製文字。SVG 中的文字呈現為圖形，因此你可以將所有圖形轉換應用於它，但它仍然像文字一樣 - 這意味著它可以被使用者選擇並複製為文字。

<svg width="300" height="200">
    <text x="20" y="30" style="fill:purple; font-size:22px;">
        Welcome to Our Website!
    </text>
    <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
        Here you will find lots of useful information.
    </text>
</svg>

<text> 元素的屬性 x 和 y 定義了左上角的絕對位置，而屬性 dx 和 dy 指定相對位置。

你還可以使用 <tspan> 元素重新格式化或重新定位 <text> 元素中包含的文字範圍。文字包含在單獨的 tspans 中，但在同一文字元素中可以一次選擇 - 當你單擊並拖動以選擇文字時。但是，無法同時選擇單獨文字元素中的文字。

<svg width="300" height="200">
    <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
        <tspan style="fill:purple; font-size:22px;">
            Welcome to Our Website!
        </tspan>
        <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
            Here you will find lots of useful information.
        </tspan>
    </text>
</svg>

SVG 和 Canvas 之間的差異

HTML5 引入了兩個圖形元素 Canvas 和 SVG，用於在 Web 上建立豐富的圖形，但它們有著根本不同。下表總結了這兩個元素之間的一些基本差異，這將有助於你瞭解如何有效和適當地使用 Canvas 和 SVG 元素。

SVG	畫布
基於向量（由形狀組成）	基於光柵（由畫素組成）
多個圖形元素，它們成為 DOM 的一部分	單個 HTML 元素類似於行為 `<img>`
通過指令碼和 CSS 修改	僅通過指令碼修改
使用較少數量的物件或較大的表面或兩者都能提供更好的效能	使用較小的表面或較大數量的物件或兩者都能提供更好的效能
更好的可擴充套件性 - 可以在任何解析度下以高質量列印	可擴充套件性差 - 不適合在更高解析度下列印