<svg>
HTML <svg> Tag
The <svg> tag is used as a container for SVG graphics.
SVG (Scalable Vector Graphics) is a language for two-dimensional graphics based on XML with support for animation and interactivity. To draw images, it uses simple geometrical figures (circle, lines, polygon, etc.). （SVG （可缩放矢量图形）是一种基于XML的二维图形语言，支持动画和交互性。为了绘制图像，它使用简单的几何图形（圆形、线条、多边形等）。）
The xmlns attribute can be required only for the outer svg element of SVG documents. It isn’t required for inner svg elements or in HTML documents. （> xmlns属性只能用于SVG文档的外部svg元素。对于内部svg元素或HTML文档，它不是必需的。）
Syntax <svg>
Syntax <svg>
The <svg> tag comes in pairs. The content is written between the opening (<svg>) and the closing (</svg>) tags.
Example of the HTML <svg> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; flex-flow:row wrap;">
<svg width="180" height="180">
<rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
</svg>
<svg width="200" height="200">
<circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
</svg>
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
</svg>
</div>
</body>
</html>
Example of the HTML <svg> tag drawing an ellipse:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
</svg>
</body>
</html>
Differences between SVG and Canvas
Differences between SVG and Canvas （SVG和画布的区别）
At first sight, both SVG and Canvas are doing the same thing, drawing vector artwork using coordinate points. However, there are differences between them. Let’s have a look at them. （乍一看， SVG和Canvas都在做同样的事情，使用坐标点绘制矢量图。但是，它们之间存在差异。让我们来看看它们。）
SVG is a language for describing 2D graphics in XML, whereas Canvas is used to draw 2D graphics on the fly (with JavaScript). （SVG是一种用于在XML中描述2D图形的语言，而Canvas用于动态绘制2D图形（使用JavaScript ）。）
SVG is like a “draw” program. The drawing is a drawing instruction for each shape, and any part of any shape can be changed. Drawings are shape-oriented. （SVG就像一个“绘图”程序。图纸是每个形状的图纸说明，任何形状的任何部分都可以更改。图纸以形状为导向。）
Canvas is like a “paint” program. When the pixels hit the screen, this is your drawing. You can change shapes only by overwriting them with other pixels. Paintings are pixel-oriented. （Canvas就像一个“绘画”程序。当像素击中屏幕时，这是您的绘图。您只能通过用其他像素覆盖形状来更改形状。绘画以像素为导向。）
SVG is based on XML, which means that every element is available within the SVG DOM. In SVG, the drawn shape is remembered as an object. In Canvas, the browser forgets the drawn form immediately after it has been drawn. If you need to make changes in the drawing, you should draw it from scratch. （SVG基于XML ，这意味着SVG DOM中的每个元素都可用。在SVG中，绘制的形状被记住为对象。在Canvas中，浏览器会在绘制完成后立即忘记绘制的表单。如果您需要在绘图中进行更改，则应从头开始绘制。）
Attributes
Attributes （属性）
| Attribute | Value | Description |
|---|---|---|
| baseProfile | none (default)fullbasictiny | Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. |
| Not supported after SVG2. | ||
| contentScriptType | content-type | Specifies the default scripting language for the given document fragment. |
| Not supported after SVG2. | ||
| contentStyleType | content-type | Identifies the default style sheet language used by the SVG fragment.Not supported after SVG2. |
| height | length | percentage |
| preserveAspectRatio | nonexMinYMin,br/> xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMaxxMidYMax xMaxYMax | Defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio. |
| meet (default) | Defines that an image preserves its proportion and is visible. | |
| slice | Defines that an image preserves its proportion and the viewBox is scaled down as much as possible. | |
| version | number | Defines the version of SVG used for the inner content of the element. |
| Not supported after SVG2. | ||
| viewbox | list-of-numbers | Defines the bound of the SVG viewport for the current SVG fragment. |
| width | length | percentage |
| x | length | percentage |
| y | length | percentage |