1️⃣ 15 分鐘：SVG 基礎

<aside> 💡 SVG代表可縮放向量圖形（Scalable Vector Graphics），是一種用於在網頁上顯示圖形的向量圖形格式。與基於像素的圖像格式（如JPEG或PNG）不同，SVG使用數學描述來定義圖形，因此它們可以無損地縮放到不同大小而不失去清晰度。

</aside>

Untitled

SVG 在網頁上怎麼被使用？

在HTML5之前，SVG的支持和整合方式相對有限。在HTML5之後，SVG獲得了更多的原生支持和改進。• 在HTML4和XHTML1等較早的HTML版本中，將SVG圖形直接嵌入HTML文檔中的支持有限，通常需要使用**<embed>或<object>**等標籤引用外部SVG文件。

- 在 HTML 5 之前

<!DOCTYPE html>
<html>
<head>
  <title>SVG Before HTML5</title>
</head>
<body>
  <!-- SVG embedded as an external file -->
  <embed src="example.svg" type="image/svg+xml" />
</body>
</html>

- 在 HTML 5 之後

HTML5 引入了直接在HTML文檔中嵌入SVG的支持。這意味著可以使用**<svg>**標籤直接將SVG圖形放入HTML文檔中，使得SVG更容易包含和操作。

<!DOCTYPE html>
<html>
<head>
  <title>SVG After HTML5</title>
</head>
<body>
  <!-- SVG embedded directly within HTML5 using the <svg> tag -->
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>
</body>
</html>

誰是 HTML5？多了哪些東西？

就像寶可夢遊戲一樣，網頁技術也會改版跟更新，HTML5 指的是 HTML 的第五個主要版本（2014），是一個用於描述網頁結構和內容的標記語言的最新版本。

HTML5是由全球資訊網聯盟（W3C）和網頁技術工作組等國際標準組織制定的，引入了許多新功能和改進，旨在提高網頁的性能、功能性和互動性。這些改進包括更好的多媒體支持、新的語意化標籤、更好的表單控件、本地存儲功能、更好的語意標記、以及 對動畫和向量圖形（如SVG和Canvas）的增強支持 等。HTML5的目標是為網頁開發者提供更多工具和功能，使他們能夠創建更豐富、更互動的網頁。

SVG 的基礎語法跟概念

<aside> 🔍 SVG是一種功能強大的向量圖形語言，讓你能夠創作各種圖形、圖標、圖表和動畫

</aside>

<!DOCTYPE html>
<html>
<head>
  <title>基本SVG範例</title>
</head>
<body>
  <!-- SVG開始標籤 -->
  <svg width="200" height="200">
    <!-- 矩形 -->
    <rect x="50" y="50" width="100" height="100" fill="blue" />

    <!-- 圓形 -->
    <circle cx="150" cy="150" r="30" fill="red" />

    <!-- 文字 -->
    <text x="60" y="180" fill="black">SVG示例</text>
  </svg>
</body>
</html>

viewBox

<aside> 🔍 viewBox 是 SVG 中一個重要的 attribute，就好像相機的觀景窗一樣，用來定義可見的區域和內容，讓 SVG 可以容易縮放。

</aside>

Untitled