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>
打印页面
上一个
下一个
广告