Html 简明教程

HTML - SVG

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

HTML SVG (Scalable Vector Graphics) is used to define vector graphics in XML that can be embedded into HTML pages. SVG is different from normal images as it does not lose quality even after zooming it.

What is SVG?

SVG stands for Scalable Vector Graphics.
SVG helps us to draw any types of images using XML coding.
Zooming a XML vector does not lose it’s quality
It is mostly useful for vector-type diagrams like Pie charts, and two-dimensional graphs in an X, Y coordinate system.
SVG became a W3C Recommendation on 14 January 2003.

SVG (Scalable Vector Graphics)

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

The PNG, GIF, and JPG files are bitmap graphics and SVG files are vector graphics. The main difference between these two is that bitmap graphics are made up of a grid of tiny pixels but, vector graphics are defined by coding hence vector graphics does not lose quality after zooming.

Ways to use SVG in HTML?

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

There are two ways of embedding the SVG files in HTML

Using <img> tag
Using <svg> tag

Using <img> tag

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

We can directly embed the SVG files inside our web page using the src attribute of <img> tag as shown below. We can pass either the path or an online link to the svg image.

<img src = "yourfilename.svg"/>

Using <svg> tag

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

HTML allows embedding SVG directly using <svg>…</svg> tag which has the following syntax

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

Tags inside SVG Element

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

There are some predefined SVG elements that are used to draw various shapes like circles, rectangles, lines and so on. They are as follows

Tags

Description

* <rect>*

Used to define a rectangle in vector graphics for given width and height as attribute.

<circle>

Used to define circle for given coordinates of top-left corner and radius as attribute.

<ellipse>

Used to define ellipse for given coordinates of top-left corner, length of major axis and length of minor axis as attribute.

<line>

Used to draw line for for given two coordinates as attribute

<polyline>

Used to define a polyline for given coordinates of series of connected points

<polygon>

Used to define a polygon for given coordinates that joins in straight line.

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

The <svg> tag is the top level (root) element of the above mentioned tags. They are defined inside the svg element.

Attributes of SVG Elements

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

The following table contains a list of attributes of SVG Elements

Attribute

Description

The top-left x-axis coordinate.

The top-left y-axis coordinate.

width

The width of rectangle figure.

height

The height of rectangle figure.

The x-axis' roundness of ellipse.

The y-axis' roundness of ellipse.

style

Indicate an inline style.

Examples of HTML SVG Element

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

Following are some examples that shows how to draw different graphical elements using SVG tag.

Draw a Circle using HTML SVG Tag

以下是 SVG 示例，它使用 SVG 元素中的 <circle> 标记绘制一个圆。cx 是圆左上角的 x 坐标，cy 是圆右上角的 y 坐标

Following is the SVG example which would draw a circle using <circle> tag inside SVG element. Here cx is x coordinate of top-left corner of circle, cy is y coordinate of top-right corner of circle

<!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 属性来创建一个矩形

Following is the SVG example which would draw a rectangle using <rect> tag. We use height and width attributes to make a rectangle

<!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 属性，它允许我们设置附加的样式信息，如描边和填充颜色、描边的宽度等。

Following is the SVG example which would draw a line using <line> tag for provided coordinates of two points(x1,y1, x2,y2). We can also use the style attribute which allows us to set additional style information like stroke and fill colors, width of the stroke, etc.

<!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 轴的半径。

Following is the SVG example which would draw an ellipse using <ellipse> tag. Here cx and cy are coordinates of top-left corner of ellipse, rx is radius along x axis and ry is radius along y axis.

<!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) 指定一个顶点，多边形通过用直线连接这些顶点来绘制。

Following is the SVG example which would draw a polygon using <polygon> tag. The points attribute defines the vertices of the polygon. Each pair of coordinates (x, y) specifies a vertex, and the polygon is drawn by connecting these vertices with straight lines.

<!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”属性中给出连接点坐标。

Following is the SVG example which would draw a polyline using <polyline> tag. We given coordinates of connected points in 'point' attribute of polyline tag.

<!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 径向渐变。

Following is the SVG example which would draw an ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.

同样，你可以使用 <linearGradient> 标记创建 SVG 线性渐变。

Similarly, you can use <linearGradient> tag to create SVG linear gradient.

<!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> 标记绘制一个星星。

Following is the SVG example which would draw a star using <polygon> tag.

<!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>