SVG HTML

HTML SVG 是 **可缩放矢量图形 (Scalable Vector Graphics)** 的缩写。在本文中，我们将详细了解 **SVG HTML**。

什么是 SVG？

SVG，即 **可缩放矢量图形**，它是一种图像格式，但与光栅图像（如 **.png**、**.jpg** 和 **.gif**）不同。光栅图像使用像素网格来创建图像。当放大 .png 和 .jpg 图像时，像素会变大，图像会变得模糊。然而，矢量图像可以缩放到任何尺寸而不会丢失分辨率，因为它的外观基于几何而不是固定的像素。

HTML SVG 是一种用于在 **XML 格式**中描述图形的模块化语言。它描述了二维矢量图形和混合矢量/光栅图形。W3C 推荐使用它。

SVG 主要用于矢量类型图表，例如饼图和 X 和 Y 坐标系统中的二维图表。

<svg> 元素指定了 SVG 片段的根。我们可以为 SVG 文件中的每个元素和每个属性设置动画。

我们可以使用 **Figma** 或 **Illustrator** 等工具创建 SVG 图像，或者直接在 HTML 中编写代码，后者更容易。

SVG HTML 演示

我们将通过各种 SVG HTML 示例来理解 SVG 在 HTML 中的用法。

演示 1

在本例中，我们将使用 <line> 标签的 "x1"、"y1"、"x2" 和 "y2" 属性来创建一个倾斜的线条。

代码

输出

在这里，在输出中，我们可以看到倾斜的线条。当我们放大时，这条线不会模糊，其尺寸将保持不变。

演示 2

让我们看一个使用 <svg> 标签绘制圆的示例。在这里，我们使用 <circle> 标签的 "cx"、"cy" 和 "r" 属性。

代码

输出

在这里，在结果中，我们可以看到使用 SVG 在网页上绘制了一个圆。

演示 3

让我们看一个使用 <svg> 标签绘制矩形的示例。我们在这里使用 <rect> 标签的 "width" 和 "height" 属性。

代码

输出

在结果中，我们可以在此看到使用 SVG 在 Web 浏览器上绘制的矩形。

演示 4

让我们通过使用 <svg> 标签来演示如何形成一个多边形。在这里，我们使用 <polygon> 标签的 "points" 属性。

代码

输出

在输出中，我们可以看到一个使用 SVG 在网页上绘制的多边形。

演示 5

让我们通过使用 <svg> 标签来演示如何创建一个椭圆。在这里，我们使用 <ellipse> 标签的 "cx"、"cy"、"rx" 和 "ry" 属性。

代码

输出

在输出中，我们可以看到使用 SVG 在 Web 浏览器上绘制的椭圆。

演示 6

让我们通过使用 <svg> 标签来演示如何编写文本。我们将使用 <text> 标签编写一个简单的文本和一个旋转的文本。

我们在这里使用 <text> 标签的 "x" 和 "y" 属性。

代码

输出

在输出中，我们可以看到使用 SVG 在网页上编写的文本。

演示 7

让我们通过使用 <svg> 标签来演示如何创建折线。在这里，我们使用 <polyline> 标签的 "points" 属性。

代码

输出

在这里，我们可以看到使用 SVG HTML 在 Web 浏览器上创建的折线。

演示 8

让我们使用 <svg> 标签演示如何绘制圣诞装饰球。在这里，我们将使用 <circle> 和 <rect> 标签来绘制一个圣诞装饰球。

代码

输出

在这里，我们可以看到用 SVG HTML 创建的圣诞装饰球在网页上。

演示 9

让我们来看一个使用 <svg> 标签绘制圣诞树的示例。在这里，我们将使用 <polygon> 和 <rect> 标签来绘制一棵圣诞树。

代码

输出

在这里，我们可以看到用 SVG HTML 制作的圣诞树在网页上。

演示 10

让我们来看一个演示 <path > SVG 元素的用法。<path > 标签用于描述一个形状，在这里我们将定义一个心形。

代码

输出

在这里，我们可以看到用 SVG HTML 在网页上创建的心形。

为什么 SVG 比其他图像格式更受青睐？

1. **JPEG**、**GIF** 和 **PNG** 等格式的图像称为 **位图图像**。这些图像由像素组成，因此它们的宽度和高度是预定义的。如果放大位图图像，像素会变得模糊，图像质量会下降。另一方面，**SVG 图像**是矢量图像，没有固定的宽度和高度，因此当放大 SVG 图像时，SVG 图像不会变得模糊，这意味着 SVG 图像可以缩放到一定程度而不会降低图像质量。因此，在任何分辨率下进行高质量打印也很容易。
2. 位图图像不可缩放，而 SVG 图像可缩放。
3. 位图图像文件大小较大，而 SVG 图像文件大小较小。
4. SVG 图像可以保存为尽可能小的尺寸。与 JPG 或 PNG 等位图图像格式不同，它不包含固定的点集。
5. SVG 图像及其行为定义在 XML 文本文件中，因此可以使用任何文本编辑器创建和编辑它们。

浏览器支持

以下是支持 SVG HTML 的浏览器

• 火狐
• Safari
• Microsoft Edge
• 谷歌浏览器
• Opera

结论

在本篇文章中，我们已经了解了 **SVG HTML**。以下是一些需要记住的要点：

1. 在 **<svg> 标签**内使用各种标签来形成不同类型的形状，例如圆形、矩形、星形等。
2. 用于创建不同形状的标签如下：
   • **<line> 标签：** 在 Web 浏览器上创建一条线。
   • **<circle> 标签：** 在 Web 浏览器上创建一个圆。
   • **<rectangle> 标签：** 在 Web 浏览器上绘制一个矩形。
   • **<polygon> 标签：** 在网页上创建一个多边形。
   • **<ellipse> 标签：** 在网页上形成一个椭圆。
   • **<polyline> 标签：** 在网页上构建一个折线。
   • **<path> 标签：** 用于在 Web 浏览器上创建不同的形状。
3. 我们可以混合使用不同的标签来创建 SVG 图像，例如圣诞装饰球或圣诞树。
4. SVG 比其他图像格式更受青睐，因为它具有可缩放性，可以放大而不会降低图像质量，并且文件大小可以很小。