Html 简明教程

HTML - SVG

HTML SVG (Scalable Vector Graphics) 用于定义可嵌入 HTML 页面的 XML 中的矢量图形。SVG 与普通图像不同，即使在缩放后也不会损失质量。

What is SVG?

  1. SVG 代表可缩放矢量图形。

  2. SVG 帮助我们使用 XML 编码绘制任何类型的图像。

  3. 缩放 XML 矢量不会损失其质量

  4. 它主要用于像饼图和 X、Y 坐标系统中的二维图形这样的矢量类型图表。

  5. SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准。

SVG (Scalable Vector Graphics)

PNG、GIF 和 JPG 文件是位图图形，而 SVG 文件是矢量图形。这两者之间的主要区别在于位图图形由网格状小像素组成，而矢量图形由编码定义，因此在缩放后矢量图形不会损失质量。

Ways to use SVG in HTML?

有两种方法可以将 SVG 文件嵌入到 HTML 中

  1. Using <img> tag

  2. Using <svg> tag

Using <img> tag

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

<img src = "yourfilename.svg"/>

Using <svg> tag

HTML 允许使用具有以下语法的 <svg>…​</svg> 标签直接嵌入 SVG

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

Tags inside SVG Element

有一些预定义的 SVG 元素用于绘制圆形、矩形、线条等各种形状。它们如下所示

Tags

Description

* <rect>*

用于在矢量图形中使用给定的宽度和高度（作为属性）定义一个矩形。

<circle>

用于定义具有给定的左上角坐标和半径（作为属性）的圆形。

<ellipse>

用于定义具有给定的左上角坐标、长轴长度和短轴长度（作为属性）的椭圆形。

<line>

用于根据给定的两个坐标（作为属性）绘制线条

<polyline>

用于定义由一系列连接点的给定坐标的多条折线

<polygon>

用于定义相连成直线的给定坐标的多边形。

<svg> 标签是上述标签的顶级（根）元素。它们在 svg 元素内定义。

Attributes of SVG Elements

下表包含 SVG 元素属性的列表

Attribute

Description

X

The top-left x-axis coordinate.

Y

The top-left y-axis coordinate.

width

矩形图形的宽度。

height

矩形图形的高度。

rx

椭圆形的 x 轴圆度。

ry

椭圆形的 y 轴圆度。

style

Indicate an inline style.

Examples of HTML SVG Element

以下是演示如何使用 SVG 标签绘制不同图形元素的一些示例。

Draw a Circle using HTML SVG Tag

以下是 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>

Draw a rectangle using HTML SVG Tag

以下是 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>

Draw a line using HTML SVG Tag

以下是 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>

Draw a Ellipse using HTML SVG Tag

以下是 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>

Draw a Polygon using HTML SVG Tag

以下是 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>

Draw a Polyline using HTML SVG Tag

以下是 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>

Filling Color Gradient for Shapes

以下是 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>

Draw a star using HTML SVG Tag

以下是 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>