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 資料夾中，建立 svg2.html 檔案，內容如下：
會發現雖然路徑正確，但確無法正確的呈現 svg，如下圖：
這是因為命名空間的問題，只要加上 xmlns 命名空間屬性及其值即可，故將 rect.svg 內容改成如下(僅加上 xmlns 屬性及其值)：
就可以正確呈現了。
其它參考：
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
結果如下圖：
範例2：QRCode(使用 QR Canvas)
套件名稱： QR Canvas 。
範例3：圖表(使用 Chart.js)
套件名稱：Chart.js。
用途：繪製圖表，就是在 <canvas>...</canvas> 標籤上繪製圖表。
試著建立 chartjs.html 檔案，建立跟以下 Codepen 一樣的結果：
Last updated