标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML
body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px"
width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
SVG画圆：
SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D"
stroke-width="2"定义圆周线条颜色和宽度。
SVG矩形:
同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用
fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5"
为 stroke 和 filling 都添加了透明度。
SVG椭圆：
我们同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208stroke:blackstroke-width:3"。
SVG多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63BCF7stroke:blackstroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
方法 1： SVG 图像将占用所有可用宽度和高度的 100%。要制作所需大小的图像，请设置图像的 CSS 高度和宽度属性方法二：直接修改.svg文件，将宽高设置为想要的值。下面是 XML 文件的外观（如果存在 SVG 图像）
如何使用CSS来修改SVG原点和制作SVG动画SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个<div>和一个SVG <rect>元素：
<!DOCTYPE html>
