什么是SVG？

• SVG英文全称Scalable Vector Graphics，意思为可缩放的矢量图
• 矢量图是用XML格式定义，通过各种[路径]和[填充颜色]来描述渲染的图片

如何编写SVG

• svg标签，默认宽300px，默认高150px
• 与canvas不同，svg既可以由css设置宽高，也可以通过行内属性设置宽高

1. 方式1，在html文件中直接编写

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>

2. 方式2：通过浏览器直接打开svg文件
   html是一种特殊的xml，svg是xml格式，要被浏览器打开svg文件，需要在svg文件中的svg标签中加上这句话：xmlns = "http://www.w3.org/2000/svg"

// 在circle.svg文件中
<svg width="500" height="500" xmlns = "http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>

3. 方式三：使用img标签引用

<img src="circle.svg">

4. 方式四：作为css背景使用

<style>
    div{
        width: 500px;
        height: 500px;
        background: url("circle.svg");
    }
</style>