# 2.4 圖形相關標籤

## \<svg>

* **SVG** = **S**calable **V**ector **G**raphics。
* 向量式圖形，放大都不會產生模糊現象。

在 `html5` 資料夾底下，建立一個 `svg` 的資料夾，然後在 `svg` 資料夾下，建立 `svg1.html` 檔案，以便執行以下的範例。

### 範例1：在 HTML 中顯示 svg 格式的圖片

因為 html5 版本的網頁文件，看得懂 svg 相關標籤，所以可直接用 svg 標籤就可以了。

{% tabs %}
{% tab title="svg1.html" %}
```markup
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      svg{
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <svg>
      <rect x="0" y="0" height="100" width="100" style="stroke:#ff0000; fill: #0000ff" />
    </svg>
  </body>
</html>
```
{% endtab %}
{% endtabs %}

呈現結果：

<figure><img src="https://3693410308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M06XOwutOnxz51nSIWs%2Fuploads%2FAIumjO7gH5mcmlSCSsnW%2Fsvg1.png?alt=media&#x26;token=324900f5-361a-4a5f-86e4-711918aec100" alt=""><figcaption></figcaption></figure>



### 範例2：如何在 html 中使用 img 標籤來顯示 svg

在 VS Code 當中，編輯 SVG 檔案原始碼的方式：

<figure><img src="https://3693410308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M06XOwutOnxz51nSIWs%2Fuploads%2Fz8M4ezVxTkQnjdBKYZP7%2Fsvg_text_editor_hint.png?alt=media&#x26;token=27a071c3-2dd2-40aa-a03e-280c9f3a6ba1" alt=""><figcaption></figcaption></figure>



在 `svg` 資料夾中，建立 `images` 資料夾，然後在 `images` 資料夾中，建立 `rect.svg` 檔案，內容如下：

```markup
<svg>
  <rect x="0" y="0" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
</svg>
```

在 `svg` 資料夾中，建立 `svg2.html` 檔案，內容如下：

```markup
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      img{
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <img src="./images/rect.svg">
  </body>
</html>
```

會發現雖然路徑正確，但確無法正確的呈現 svg，如下圖：

<figure><img src="https://3693410308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M06XOwutOnxz51nSIWs%2Fuploads%2FfjXPwkK7jGI1I6OMAGZ6%2Fsvg2_wrong.png?alt=media&#x26;token=67bbea1a-93e9-49d2-8a93-d69762139461" alt=""><figcaption></figcaption></figure>

這是因為命名空間的問題，只要加上 `xmlns` 命名空間屬性及其值即可，故將 `rect.svg` 內容改成如下(僅加上 xmlns 屬性及其值)：

```markup
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" height="100" width="100" style="stroke:#ff0000; fill: #0000ff" />
</svg>
```

就可以正確呈現了。





其它參考：

* [d3.js](https://d3js.org/) 就是用 **svg** 畫出來的資料視覺化函式庫。
* Font Awesome：試著套用 [Font Awesome](https://fontawesome.com/)。「Start for Free」 → 「Download」 → 「Free For Web」。



## \<canvas>

* 是一種點陣式的畫布，放大會有模糊現象。
* 使用 **`<canvas>...</canvas>`** 標籤之後，剩下全部都要寫 JavaScript 來繪圖或做小遊戲。

在 `html5` 資料夾下，建立 `canvas` 資料夾，然後在其底下，建立 `canvas1.html` 檔案，以便測試。

### 範例1：在 HTML 中使用 canvas

{% tabs %}
{% tab title="canvas1.html" %}
```markup
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      canvas{
        border: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas_item">
      不支援 HTML5 Canvas(如果瀏覽器不支援 canvas，就會顯示此文字)
    </canvas>

    <script>
      // 第一步：取得 id="canvas_item" 元素
      var canvas = document.getElementById("canvas_item");

      // 第二步：從 canvas 中，取得 2D context 物件
      var context = canvas.getContext("2d");

      // 第三步：使用 context 繪圖
      context.fillStyle = "#ff0000";
      context.fillRect(10,10, 100,100);
    </script>
  </body>
</html>
```
{% endtab %}
{% endtabs %}

結果如下圖：



<figure><img src="https://3693410308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M06XOwutOnxz51nSIWs%2Fuploads%2FaujVOcI6uqbROcecKvtd%2Fcanvas1.png?alt=media&#x26;token=0fad3576-ad87-4e60-8e1f-9fb9812f2529" alt=""><figcaption></figcaption></figure>



### 範例2：QRCode(使用 QR Canvas)

套件名稱： [QR Canvas](https://gera2ld.github.io/qrcanvas/docs/) 。

{% embed url="https://codepen.io/carlos411/pen/OJePrpd" %}



### 範例3：圖表(使用 Chart.js)

套件名稱：[Chart.js](https://www.chartjs.org/)。

用途：繪製圖表，就是在 `<canvas>...</canvas>` 標籤上繪製圖表。

試著建立 `chartjs.html` 檔案，建立跟以下 Codepen 一樣的結果：

{% embed url="https://codepen.io/carlos411/pen/ExwojGZ" %}



