svg是html5的标签么
SVG，即Scalable Vector Graphics（可缩放矢量图形），它虽常与HTML5结合使用，但严格来说，SVG并非HTML5的标签。SVG是一种基于XML的图像格式，用于定义二维矢量图形。在HTML5中，可以直接嵌入SVG元素来绘制矢量图形，只需定义好XML属性，就能获得一致的图像元素。
使用SVG的准备工作
在使用SVG之前，需要将SVG标签加入到HTML的<body>中。和其他HTML标签一样，我们可以为SVG标签添加ID属性，也能为其添加CSS样式，例如设置边框样式和宽度：border-style:solid;border-width:2px;。同时，SVG标签与其他HTML标签有一些通用属性，比如可以使用height="100px"和width="200px"为其添加高度和宽度。
SVG绘图形状
SVG提供了多种绘图形状，下面为你详细介绍不同形状的绘制方法及示例代码。
SVG线条
SVG线条使用<line>标签定义，在该标签内还可以定义其他属性。<line>标签包含起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性，通过指定x1、y1、x2、y2的值来设定起点和终点坐标。指定好坐标后，可以通过style属性为线条添加样式，例如使用stroke:Green;为线条指定颜色，使用stroke-width:2为线条设置宽度。
示例代码：使用SVG画线
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>
SVG画圆
SVG提供了<circle>标签来画圆。下面的示例代码中，<circle>的id为myCircle。为了定义圆的中心以及半径，使用cx="55"、cy="55"以及r="50"属性分别定义圆心坐标和半径。使用fill="#219E3E"为圆填充颜色，使用stroke="#17301D"和stroke-width="2"定义圆周线条颜色和宽度。
示例代码：使用SVG画圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>
SVG矩形
使用<rect>标签来画矩形。下面的示例中，设置了id属性为myRectangle，使用width="300"和height="100"定义矩形的高和宽，使用fill属性定义填充颜色，使用stroke定义边框。另外，使用fill-opacity="0.5"和stroke-opacity="0.5"为填充和边框都添加了透明度。
示例代码：SVG画矩形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
</body>
</html>
SVG椭圆
使用<ellipse>标签绘制椭圆。在下面的示例中，设置其id="myEllipse"，给定椭圆的中心坐标cx="120"、cy="60"，长轴和短轴半径rx="100"、ry="50"，并使用style="fill:#3F5208;stroke:black;stroke-width:3"设置填充颜色、边框宽度以及边框颜色。
示例代码：SVG画椭圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
SVG多边形
使用<polygon>标签绘制多边形，points属性用来定义多边形的顶点，用坐标对来定义，例如points="10,10 75,150 150,60"，这里定义了三个顶点(10,10)、(75,150)、(150,60)。同样，使用style="fill:#63BCF7;stroke:black;stroke-width:3"定义多边形填充颜色、边框以及边框宽度。
示例代码：SVG画多边形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
通过以上示例，你可以在HTML中使用SVG绘制各种矢量图形，利用SVG的特性实现高质量、可缩放的图形效果。