HTML - SVG

上一個
下一個

HTML **SVG（可縮放向量圖形）** 用於在 XML 中定義向量圖形，這些圖形可以嵌入到 HTML 頁面中。SVG 與普通影像不同，因為它即使在縮放後也不會損失質量。

XML 是可擴充套件標記語言的縮寫，它是一種資料描述語言。它沒有預定義的標籤，因此；使用者需要根據需要定義自己的標籤。

什麼是 SVG？

  • SVG 代表可縮放向量圖形。
  • SVG 幫助我們使用 XML 程式碼繪製任何型別的影像。
  • 縮放 XML 向量不會損失其質量
  • 它主要用於向量型別圖表，如餅圖和 X、Y 座標系中的二維圖形。
  • SVG 於 2003 年 1 月 14 日成為 W3C 建議。

SVG（可縮放向量圖形）

PNG、GIF 和 JPG 檔案是點陣圖圖形，而 SVG 檔案是向量圖形。這兩者之間的主要區別在於點陣圖圖形由一個小畫素網格組成，而向量圖形透過編碼定義，因此向量圖形在縮放後不會損失質量。

如何在 HTML 中使用 SVG？

有兩種方法可以在 HTML 中嵌入 SVG 檔案

使用 <img> 標籤

我們可以使用 <img> 標籤的 src 屬性將 SVG 檔案直接嵌入到我們的網頁中，如下所示。我們可以將 SVG 圖片的路徑或線上連結傳遞給它。

<img src = "yourfilename.svg"/>

使用 <svg> 標籤

HTML 允許使用 **<svg>...</svg>** 標籤直接嵌入 SVG，該標籤具有以下語法

<svg>
   <!-- code to create graphics -->
</svg>

SVG 元素內的標籤

有一些預定義的 SVG 元素用於繪製各種形狀，如圓形、矩形、線條等等。它們如下所示

標籤 描述
<rect> 用於為給定的寬度和高度作為屬性定義向量圖形中的矩形。
<circle> 用於為給定左上角座標和半徑作為屬性定義圓形。
<ellipse> 用於為給定左上角座標、長軸長度和短軸長度作為屬性定義橢圓。
<line> 用於為給定的兩個座標作為屬性繪製線條
<polyline> 用於為給定一系列連線點的座標定義折線
<polygon> 用於為給定的座標定義多邊形，這些座標以直線連線。

**<svg>** 標籤是上述標籤的頂級（根）元素。它們在 svg 元素內定義。

SVG 元素的屬性

下表包含 SVG 元素屬性列表

屬性 描述
X

左上角的 x 軸座標。
Y

左上角的 y 軸座標。
width

矩形圖形的寬度。
height

矩形圖形的高度。
rx

橢圓的 x 軸圓度。
ry

橢圓的 y 軸圓度。
style

指示內聯樣式。

HTML SVG 元素示例

以下是一些示例，展示瞭如何使用 SVG 標籤繪製不同的圖形元素。

使用 HTML SVG 標籤繪製圓形

以下是 SVG 示例，它將使用 SVG 元素內的 **<circle>** 標籤繪製一個圓形。這裡 cx 是圓形左上角的 x 座標，cy 是圓形右上角的 y 座標

<!DOCTYPE html>
<html>

<head>
   <title>SVG-Circle</title>
</head>

<body>
   <h2>HTML SVG Circle</h2>
   <svg height="500" >
      <circle cx="50" 
              cy="50" 
              r="50" 
              fill="red" />
   </svg>
</body>

</html>

使用 HTML SVG 標籤繪製矩形

以下是 SVG 示例，它將使用 **<rect>** 標籤繪製一個矩形。我們使用 height 和 width 屬性來製作矩形

<!DOCTYPE html>
<html>

<head>
   <title>SVG Rectangle</title>
</head>

<body>
   <h2>HTML SVG Rectangle</h2>
   <svg height = "200">
      <rect width = "300" 
            height = "100" 
            fill = "red" />
   </svg>

</body>
</html>

使用 HTML SVG 標籤繪製線條

以下是 SVG 示例，它將使用 **<line>** 標籤為提供的兩點座標 (x1,y1, x2,y2) 繪製一條線。我們還可以使用 style 屬性，它允許我們設定其他樣式資訊，如筆劃和填充顏色、筆劃寬度等。

<!DOCTYPE html>
<html>

<head>
   <title>SVG Line</title>
</head>

<body>
   <h2>HTML SVG Line</h2>		
   <svg  height="200">
      <line x1="0" y1="0" 
            x2="200" y2="100" 
            style="stroke:red;stroke-width:2"/>
   </svg>

</body>
</html>

使用 HTML SVG 標籤繪製橢圓

以下是 SVG 示例，它將使用 <ellipse> 標籤繪製一個橢圓。這裡 cx 和 cy 是橢圓左上角的座標，rx 是沿 x 軸的半徑，ry 是沿 y 軸的半徑。

<!DOCTYPE html>
<html>

<head>
   <title>SVG Ellipse</title>
</head>

<body>
   <h2>HTML SVG Ellipse</h2>
   <svg height="200">
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               fill="red" />
   </svg>
   
</body>
</html>

使用 HTML SVG 標籤繪製多邊形

以下是 SVG 示例，它將使用 <polygon> 標籤繪製一個多邊形。points 屬性定義了多邊形的頂點。每對座標 (x, y) 指定一個頂點，並且透過用直線連線這些頂點來繪製多邊形。

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Polygon</h2>
   <svg height="200">
      <polygon points="20,10, 300,20, 170,50, 130,70" 
               fill="red" />
   </svg>

</body>

</html>

使用 HTML SVG 標籤繪製折線

以下是 SVG 示例，它將使用 <polyline> 標籤繪製一條折線。我們在折線標籤的“point”屬性中給出了連線點的座標。

<!DOCTYPE html>
<html>

<head>
   <title>SVG Polyline</title>
</head>

<body>
   <h2>HTML SVG Polyline</h2>
   <svg height="200">
      <polyline points="0,0 0,30 30,30 30,60 60,60" 
                fill="red" />
   </svg>
</body>

</html>

填充形狀的顏色漸變

以下是 SVG 示例，它將使用 <ellipse> 標籤繪製一個橢圓，並將使用 <radialGradient> 標籤定義一個 SVG 徑向漸變。

類似地，您可以使用 <linearGradient> 標籤建立 SVG 線性漸變。

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Gradient Ellipse</h2>
   <svg height="200">
      <defs>
         <radialGradient id="gradient" 
                         cx="50%" cy="50%" 
                         r="50%" 
                         fx="50%" fy="50%">
            <stop offset="0%" 
                  style="stop-color:rgb(200,200,200);"/>
            <stop offset="100%" 
                  style="stop-color:rgb(0,0,255);"/>
         </radialGradient>
      </defs>
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               style="fill:url(#gradient)" />
   </svg>
</body>

</html>

使用 HTML SVG 標籤繪製星星

以下是 SVG 示例，它將使用 <polygon> 標籤繪製一個星星。

<!DOCTYPE html>
<html>

<head>
   <title>SVG star</title>
</head>

<body>	
   <h2>HTML SVG Star</h2>
   <svg height="200">
      <polygon points="100,5 40,180 190,60 10,60 160,180" 
               fill="red"/>
   </svg>

</body>
</html>
列印頁面
上一個
下一個
廣告