SVG-Edit 在线编辑器

SVG 入门：5 分钟看懂矢量图

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用 XML 文本描述图形的格式。和 JPG、PNG 这类由像素点组成的位图不同，SVG 记的是「形状的数学公式」——圆心在哪、半径多大、线条怎么弯。所以它放大多少倍都不糊，文件还往往更小，这正是图标、Logo、插画都爱用它的原因。

一个最小的 SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#2563eb"/>
</svg>

viewBox 是画布坐标系，circle 是圆，cx/cy 是圆心，r 是半径，fill 是填充色。把这段代码存成 .svg 文件，用浏览器打开就是一个蓝色的圆。

最常用的 6 种形状

rect 矩形、circle 圆、ellipse 椭圆、line 直线、polygon 多边形、path 路径（任意形状，功能最强）。在本站编辑器左侧工具栏里都能直接拖出来画，不用手写代码。

动手练习

打开编辑器 → 选圆形工具画一个圆 → 在顶部改填充色 → 用「文件 → 导出」存成 SVG。然后把浏览器窗口拉大拉小，你会发现图形永远清晰——这就是矢量。

SVG 适合做什么

网站图标与 Logo、App 图标、产品插画、图表、印在衣服/海报上的大图。照片类的复杂画面不适合 SVG，那是 JPG/WebP 的地盘。