SVG全称是可缩放矢量图形，本质是一种基于XML语法的标记语言，用来描述二维矢量图形。和JPG、PNG这类位图不同，SVG图形不是由像素点组成的，而是通过数学公式定义图形的形状、颜色、位置等属性，所以无论放大多少倍都不会出现模糊失真的问题，而且文件体积通常比位图小，还支持通过CSS和JavaScript动态修改样式和交互，在网页开发、移动端界面、数据图表等场景中都有大量应用。
SVG的基础结构
SVG图形的代码本质是符合XML规范的标签集合，最外层是<svg>根标签，用来定义整个矢量图的画布范围和基本属性，内部嵌套各种图形标签来实现不同的形状。要画一个圆，首先需要先搭建基础的SVG画布结构，代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 这里放圆形相关的代码 -->
</svg>
上面的代码中，<?xml?>是XML的声明头，指定编码和版本；<svg>标签的width和height属性定义画布的宽度和高度，单位是像素，xmlns属性指定SVG的命名空间，是标准写法不能省略。
用XML代码画圆形的核心属性
SVG中画圆使用的是<circle>标签，这个标签有几个必须配置的核心属性，用来确定圆的位置和大小：
- cx：圆心的x轴坐标，相对于svg画布的左上角原点
- cy：圆心的y轴坐标，相对于svg画布的左上角原点
- r：圆的半径，单位是像素
- fill：圆形的填充颜色，支持颜色名、十六进制色值、rgb值等写法
- stroke：圆形的边框颜色
- stroke-width：圆形边框的宽度，单位是像素
完整的画圆代码示例
结合上面的属性，我们可以写出一个完整的可运行的SVG画圆代码，直接在浏览器的HTML文件中运行就能看到效果：
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 画一个圆心在(100,100)，半径80，填充蓝色，边框黑色，边框宽度2像素的圆 -->
<circle
cx="100"
cy="100"
r="80"
fill="#409eff"
stroke="#333333"
stroke-width="2"
/>
</svg>
如果把这个代码保存为circle.svg文件，用浏览器打开就能看到一个居中的蓝色圆形，带有黑色边框。如果是在HTML页面中嵌入，也可以直接把<svg>标签部分放到HTML的body里，不需要XML声明头，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SVG画圆示例</title>
</head>
<body>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle
cx="100"
cy="100"
r="80"
fill="#409eff"
stroke="#333333"
stroke-width="2"
/>
</svg>
</body>
</html>
常见问题说明
很多初学者写代码的时候会遇到圆显示不完整的问题，大多是这几个原因：一是cx和cy的坐标加上半径超过了svg画布的范围，比如画布宽度是200，cx是150，r是80，那圆的右半部分就会超出画布看不到；二是没有写xmlns命名空间，有些浏览器会无法正确解析SVG标签；三是属性名写错，比如把cx写成xc，浏览器会忽略错误的属性，导致圆无法按预期显示。
另外SVG的<circle>标签还支持很多其他属性，比如opacity设置透明度，fill-opacity设置填充透明度，stroke-opacity设置边框透明度，这些都可以通过修改属性值来调整圆形的显示效果，满足不同的设计需求。