2.4 圖形相關標籤

<svg>

SVG = Scalable Vector Graphics。
向量式圖形，放大都不會產生模糊現象。

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

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

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

<!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>

呈現結果：

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

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

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

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

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

<!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，如下圖：

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

<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 就是用 svg 畫出來的資料視覺化函式庫。
Font Awesome：試著套用 Font Awesome。「Start for Free」 → 「Download」 → 「Free For Web」。

<canvas>

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

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

範例1：在 HTML 中使用 canvas

<!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>

結果如下圖：

範例2：QRCode(使用 QR Canvas)

套件名稱： QR Canvas 。

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

套件名稱：Chart.js。

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

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

Previous2.3 media 相關標籤 Next3. History

Last updated 11 months ago

hashtag<svg>

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

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

hashtag<canvas>

hashtag範例1：在 HTML 中使用 canvas

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

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