SVG in HTML5
SVG in HTML5 （HTML5中的SVG）
In HTML5, the SVG elements can be embedded directly into your HTML page. （在HTML5中， SVG元素可以直接嵌入到HTML页面中。）
If the SVG is written in XML, all elements should be appropriately closed! （>如果SVG是用XML编写的，则应适当关闭所有元素！）
Shape elements in SVG
Shape elements in SVG （SVG中的形状元素）
SVG has some predetermined shape elements. Here they are: （SVG有一些预定的形状元素。具体如下：）
rectangle <rect>
circle <circle>
ellipse <ellipse>
line <line>
polyline <polyline>
polygon <polygon>
path <path>
Example of embedding SVG into HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
</svg>
</body>
</html>
Now let’s understand the code: （现在我们来了解一下代码：）
An SVG image always starts with an <svg> tag.
The SVG image’s width and height are specified by the width and height attributes of the <svg> element.
The <circle> element draws a circle.
The cx and cy attributes specify the x and y coordinates of the circle’s center. If cx and cy are absent, the center of the circle is set to (0, 0). （- cx和cy属性指定圆心x和y坐标。如果cx和cy不存在，则圆的中心设置为(0, 0)。）
The r attribute is used to specify the radius of the circle. （- r属性用于指定圆的半径。）
The stroke and stroke-width attributes control the appearance of the outline of a shape. In our code example, we have set the outline of the circle to a 5px purple “border.” （-描边和描边宽度属性控制形状轮廓的外观。在我们的代码示例中，我们将圆的轮廓设置为5px的紫色“边框”。）
The fill attribute sets a color within the circle. We set it to pink. （-填充属性在圆内设置颜色。我们将其设置为粉红色。）
The SVG image is closed with the closing </svg> tag.