HTML - SVG: 開始者的向量圖形縮放指南

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入HTML中的SVG世界。別擔心如果你是新手——我會成為你的友好導遊，我們將一步一步地探索這個主題。所以，來一杯咖啡，讓我們一起潛入水中！

HTML - SVG

SVG是什麼？

SVG代表可縮放向量圖形。我知道這可能聽起來有點專業，但讓我為你用一種容易理解的方式來解釋。

想像你在繪圖。當你使用像JPEG或PNG這樣的常规圖像格式時，這就像是用彩色筆繪圖。圖片看起來很棒，但如果你試著讓它變大，它會開始變得模糊。這是因為這些圖像是由微小的點——像素——組成的。

另一方面，SVG就像是用魔法彩色筆繪圖。無論你的圖片變得多大都小，它總是保持清晰。這是因為SVG使用數學公式來創建形狀和線條，而不是像素。

SVG（可縮放向量圖形）

讓我們更深入地了解一下什麼使SVG如此特別：

縮放性：正如其名，SVG圖像可以縮放到任何大小而不會損失質量。無論你是在小手機上還是巨大看板上查看它們，它們都會看起來很清晰。
小文件大小：因為SVG使用數學公式而不是像素，所以文件大小通常遠小於傳統圖像格式。
可編輯性：你可以使用代碼編輯SVG圖像，這意味著你可以更改顏色、形狀和大小，而不需要圖像編輯軟件。
無障礙性：SVG圖像可以包含屏幕閱讀器可閱讀的文本，這使得你的網站對視覺障礙人士更加無障礙。

在HTML中使用SVG的方法

現在我們知道了SVG是什麼，讓我們看看我們如何在HTML中使用它。有幾種方法可以做到這一點：

內聯SVG：這意味著直接將SVG代碼放入你的HTML文件中。

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

使用<img>標籤：你可以像其他圖像一樣使用SVG。

<img src="circle.svg" alt="一個帶有綠色輪廓的黃色圓圈">

使用CSS background-image：你可以在CSS中將SVG設置為背景圖像。

<div style="background-image: url('circle.svg');"></div>

使用<object>標籤：這允許你包含外部的SVG文件。

<object data="circle.svg" type="image/svg+xml"></object>

SVG元素內部的標籤

SVG有一套自己的標籤，你可以用來創建各種形狀和設計。以下是一些最常見的：

標籤	描述
`<circle>`	創建一個圓形
`<rect>`	創建一個矩形
`<line>`	創建一條線
`<path>`	創建複雜的形狀
`<text>`	在SVG中添加文本
`<g>`	將SVG元素分組

讓我們看一個使用這些標籤的例子：

<svg width="200" height="200">
<rect x="0" y="0" width="100" height="100" fill="red" />
<circle cx="150" cy="50" r="40" fill="blue" />
<line x1="0" y1="150" x2="200" y2="150" stroke="green" stroke-width="4" />
<text x="10" y="180" fill="purple">Hello, SVG!</text>
</svg>

在這個例子中，我們創建了一個紅色正方形、一個藍色圓形、一條綠色線條和一點紫色文本，所有這些都在一個200x200像素的SVG畫布內。

SVG元素的屬性

SVG元素具有各種控制它們看起來和行為方式的屬性。以下是一些常見的：

屬性	描述
`width` 和 `height`	設置SVG的尺寸
`fill`	設置形狀內部的顏色
`stroke`	設置形狀輪廓的顏色
`stroke-width`	設置形狀輪廓的厚度
`x` 和 `y`	設置元素的位置
`cx` 和 `cy`	設置圓形的中心點
`r`	設置圓形的半徑

HTML SVG元素的例子

讓我們將所有這些結合起來，用一些更複雜的例子：

一個微笑的臉：

<svg width="200" height="200">
<circle cx="100" cy="100" r="90" fill="yellow" />
<circle cx="70" cy="80" r="20" fill="black" />
<circle cx="130" cy="80" r="20" fill="black" />
<path d="M 50 140 Q 100 180 150 140" stroke="black" stroke-width="5" fill="none" />
</svg>

這創建了一個黃色的臉部圓形，兩個黑色的眼睛圓形，以及一條曲線表示微笑。

一個簡單的房子：

<svg width="200" height="200">
<rect x="50" y="100" width="100" height="80" fill="lightblue" />
<polygon points="50,100 100,50 150,100" fill="red" />
<rect x="80" y="130" width="40" height="50" fill="brown" />
</svg>

這創建了一個淺藍色的矩形表示房子，一個紅色三角形表示屋頂，以及一個棕色矩形表示門。

記住，精通SVG的關鍵是練習。試著修改這些例子，更改顏色、大小和位置。嘗試不同的形狀，看看你能創造出什麼！

總結來說，SVG是創建網頁上可縮放、高效圖形的有力工具。在你繼續網頁開發的旅程中，你會發現SVG為創建有吸引力、互動性和響應式設計打開了無限的可能性。繼續練習，很快你就能創造出自己令人驚奇的SVG圖形！

Credits: Image by storyset