SVG 是 Scalable Vector Graphics 的縮寫，是一種基于 XML 的圖形格式，它可以實(shí)現(xiàn)可縮放的矢量圖標(biāo)、復(fù)雜的數(shù)據(jù)可視化、交互動(dòng)畫等等。在 Web 應(yīng)用中，我們可以通過 SVG 繪制出各種形狀，例如圓、矩形、多邊形等。這篇文章將介紹如何使用 SVG 繪制輪廓。

要繪制輪廓，我們需要使用路徑元素。路徑元素有一個(gè)叫做 d 的屬性，它描述了路徑的形狀。具體來說，d 屬性是一個(gè)字符串，其中包含了一系列命令和參數(shù)。命令有 M（移動(dòng)到）、L（連線到）、C（三次貝塞爾曲線）、Z（閉合路徑）等等，參數(shù)則是描述這些命令的具體數(shù)值。

<svg width="100" height="100">
<path d="M 10 10 L 90 10 L 50 90 Z" />
</svg>

上面這段代碼使用了路徑元素繪制了一個(gè)三角形。首先使用 M 命令將畫筆移動(dòng)到起始點(diǎn) (10,10)，然后 L 命令將畫筆連線到 (90,10) 和 (50,90) 兩個(gè)點(diǎn)，最后使用 Z 命令將路徑閉合，形成一個(gè)三角形。

當(dāng)我們繪制好路徑之后，就可以使用 CSS 樣式對(duì)其進(jìn)行調(diào)整。例如，我們可以改變路徑的顏色、線條寬度、填充色等屬性。

<style>
path {
stroke: #333;
stroke-width: 3;
fill: #ccc;
}
</style>
<svg width="100" height="100">
<path d="M 10 10 L 90 10 L 50 90 Z" />
</svg>

上面這段代碼將路徑的顏色設(shè)置為 #333，線條寬度設(shè)置為 3 像素，填充色設(shè)置為 #ccc。我們可以根據(jù)實(shí)際需要進(jìn)行調(diào)整。