HTML - SVG（可缩放矢量图形）_HTML 菜鸟教程

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> 标签
使用 <svg> 标签

使用 <img> 标签

我们可以使用 <img> 标签的 src 属性直接将 SVG 文件嵌入到我们的网页中，如下所示。我们可以将路径或在线链接传递给 svg 图像。


 <img src = "yourfilename.svg"/>

使用 <svg> 标签

HTML 允许使用 <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 示例</title>
</head>

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

</html>

使用 HTML SVG 标签绘制矩形

以下是使用 <rect> 标签绘制矩形的 SVG 示例。我们使用 height 和 width 属性来制作矩形


<!DOCTYPE html>
<html>
<head>
	 <title>启科普 svg 示例</title>
</head>
<body>
	 <h2>HTML SVG 矩形</h2>
	 <svg height = "200">
			<rect width = "300" height = "100" fill = "red" />
	 </svg>
</body>
</html>

使用 HTML SVG 标签画一条线

以下是 SVG 示例，它将使用 <line> 标签为提供的两点坐标（x1，y1， x2，y2）绘制一条线。我们还可以使用样式属性，它允许我们设置其他样式信息，例如描边和填充颜色、描边宽度等。


<!DOCTYPE html>
<html>
<head>
	 <title>启科普 svg 示例</title>
</head>
<body>
	 <h2>HTML SVG 直线</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 示例</title>
</head>
<body>
	 <h2>HTML SVG 椭圆</h2>
	 <svg height="200">
			<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
	 </svg>
</body>
</html>

使用 HTML SVG 标签绘制多边形

以下是使用 <polygon> 标签绘制多边形的 SVG 示例。points 属性定义多边形的顶点。每对坐标（x， y）指定一个顶点，通过将这些顶点与直线连接来绘制多边形。


<!DOCTYPE html>
<html>
<head>
	 <title>启科普 svg 示例</title>
</head>
<body>
	 <h2>HTML SVG 多边形</h2>
	 <svg height="200">
			<polygon points="20,10, 300,20, 170,50, 130,70" fill="red" />
	 </svg>
</body>
</html>

使用 HTML SVG 标签绘制折线

以下是 SVG 示例，它将使用 <polyline> 标签绘制折线。我们在折线标签的“点”属性中给出了连接点的坐标。


<!DOCTYPE html>
<html>
<head>
	 <title>启科普 svg 示例</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 示例</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>

<< HTML - 样式指南 HTML - 画布 canvas 元素 >>