SVG 是“可缩放矢量图形”的缩写，是用 XML 描述形状、路径、文字等内容的图像格式。它适合图标、Logo、线条插画和图表：放大时，矢量轮廓可以重新计算，不必像位图那样放大原有像素。不过，SVG 也能内嵌照片；文件后缀是 .svg，不代表里面所有内容都能无损放大或逐块改色。
在 UI 设计中，需要编辑路径、统一图标颜色或复用图形时，可以用 Pixso 的矢量绘制与界面设计工具处理 SVG；需要上传到只接受 PNG、JPG 的平台，则应保留 SVG 原稿，再另行导出位图。
SVG、PNG和JPG怎么选
先看图形由什么构成，再看它将用在哪里。一枚由圆和线组成的搜索图标，适合保留为 SVG；人物照片本身是像素数据，包进 SVG 也不会变成可随意修改的矢量人物。PNG 和 JPG 并不是低质量格式，它们与 SVG 解决的是不同问题。
| 任务 | 优先考虑 | 选择时看什么 |
|---|---|---|
| 图标、Logo需要多尺寸显示 | SVG | 图形是否以路径构成，目标平台是否接受SVG |
| 保留透明背景，按固定像素交付 | PNG | 导出尺寸是否足够，透明区域是否保留 |
| 发布照片，不需要透明背景 | JPG等位图格式 | 实际压缩后的体积与细节损失 |
| 包含大量纹理、复杂滤镜的插画 | 比较SVG与位图成品 | 不能只看扩展名；还要比较文件体积、渲染效果和使用环境 |
例如，同一枚24像素图标要显示在24像素和48像素位置，路径型 SVG 可以按目标尺寸重新渲染；一张24×24像素的 PNG 放大到48×48像素，则需要插值，可能出现模糊边缘。反过来，细密的矢量纹理如果包含大量节点，也可能比合适压缩的位图更大。需要转换时，可继续看SVG转PNG、JPG的尺寸设置。
什么是SVG：从一个矩形看懂文件结构
SVG 的全称是 Scalable Vector Graphics，由万维网联盟（W3C）制定。它既是一种图像格式，也是一套基于 XML 的图形描述方式。浏览器读取其中的坐标、形状和颜色后，把它们绘制出来；因此可以用设计工具生成 SVG，也可以用文本编辑器查看其源码。
矩形、圆、线条和路径都能用相应的元素表达。下面以 Pixso 中的蓝色矩形为例，观察画布上的图形怎样对应到代码。
图中矩形宽331、高166，填充颜色为 #0044FF。选中矩形后，在导出区域选择 SVG，就能保存一份矢量图形文件；这里导出的是矩形本身，不是包含白色背景的整个画板。
打开导出的 SVG，可以找到描述矩形的 <rect> 元素。它的 width 和 height 对应宽高，fill 对应填充；x、y 用于指定矩形在当前坐标系中的起点。下面的代码片段与画布中的331×166蓝色矩形对应。
只看形状元素还不够，外层 <svg> 通常还定义显示尺寸和坐标范围。用一个完整的小例子，可以把两层关系分开：
<svg xmlns="http://www.w3.org/2000/svg"
width="331" height="166" viewBox="0 0 331 166">
<rect x="0" y="0" width="331" height="166" fill="#0044FF" />
</svg>viewBox="0 0 331 166" 表示内部坐标区域从（0，0）开始，宽331、高166。外层宽高控制显示窗口，viewBox描述这个窗口映射到哪一块坐标区域；它不是图片的DPI。保持宽高比例，将显示尺寸设为662×332，图形仍可使用同一组内部坐标。若viewBox范围比图形大很多，四周可能出现空白；范围太小，则可能裁掉图形。
矩形的宽高相等时会得到正方形，但复杂图形不一定使用基本形状元素，也可能被导出为 <path>。不能因为源码里没有 <rect>，就认为矩形一定不是矢量对象。
SVG的优势，以及容易误解的边界
缩放清晰，指的是矢量内容
SVG通过坐标和路径描述轮廓，缩放时可以重新绘制，因此适合在不同尺寸下显示的图标与标志。但“矢量轮廓不依赖原始像素”不等于“任何内容、任何尺寸都一样清晰”。文件中的 <image> 可以嵌入PNG或JPG，这部分仍受源图像素限制；极细描边缩到很小，也可能难以辨认，需要在实际显示尺寸下调整。
可以编程，不代表所有引用方式都能交互
把SVG代码内联写进HTML时，页面可通过CSS或JavaScript控制内部元素，例如改变某条路径颜色、响应点击或更新图表。把SVG放在普通 <img> 中，则是把它作为一张图片使用，不能直接用外层页面的CSS选择器修改内部路径，脚本能力也受限制。要做什么交互，需要先决定怎样嵌入，而不是仅更换文件后缀。
图像是文本描述，仍然需要无障碍说明
SVG源码可以包含文字与描述，但仅使用该格式不会自动让图形获得完整的无障碍信息。作为有意义的图片使用时，<img> 需要合适的 alt；内联SVG应提供可访问名称，例如通过 <title> 配合相应语义关联。复杂图表还需要文字说明关键结论，不能把重要答案只画在图里。
是否更轻，要看内容与实现
简单图标用少量路径就能表达，SVG可能很轻；大量节点、重复路径、嵌入图片和复杂滤镜则会增加体积或渲染成本。照片也不会因为保存进SVG就更小。用于网页前，既要比较文件字节数，也要看实际显示和动画表现；减少重复节点、移除不需要的隐藏内容，比简单认定“SVG一定更快”更有意义。
常见的SVG应用
插画与图形素材
边界清晰、主要由形状和路径构成的插画适合用矢量方式制作。下方插画中的人物轮廓、色块和装饰线条，都是这类视觉元素的典型应用。照片或复杂纸张纹理则不一定适合自动描摹成大量路径，是否转换要看后续是否需要修改轮廓、颜色或尺寸。
Logo与图标
同一Logo往往要出现在导航栏、手机页面和大幅展示区，路径型SVG能减少为不同显示尺寸准备多套位图的工作。下图展示了网页通过 <img> 引用SVG标志的方式。图标还应检查小尺寸下的线宽和留白；只有包含在可点击控件里并具备明确名称，才是完整的交互入口。
动画与线条效果
SVG可结合CSS动画、JavaScript或SMIL动画描述变化，例如让火箭位移、让圆环旋转，或逐步显示一条线。图形本身与动画逻辑是两个部分：静态SVG导出不代表会自动带上设计工具里的原型交互。
路径也适合表现连续的曲线与几何图形。下面画布中的波浪线、色带和点阵可以分别组织为图层，再由具体实现决定哪些元素发生位移、缩放或颜色变化。
图表、信息图与地图
柱状图可以用矩形或路径绘制，折线图可以用路径绘制；文字与刻度则与数据一起组织。网页中的程序根据数据改变坐标和高度，才能形成动态更新的图表。单独导出一个SVG文件，并不会自动获得数据接口或实时刷新功能。
阴影与滤镜效果
SVG不只能画纯色轮廓，也可以描述模糊、阴影等滤镜。下面的椭圆在Pixso中带有外阴影，导出后的文件包含滤镜相关内容。使用此类效果时要留出足够的显示范围，避免阴影边缘被裁切。
复杂效果应在最终使用环境中检查，而不是只看编辑器预览。网页上的图形、文字和交互控件也不必全部用SVG实现；一般页面布局仍可以由HTML与CSS完成，SVG负责其中适合矢量表达的部分。
浏览器能打开，为什么导入后还会有差异
Chrome、Edge、Firefox和Safari等现代浏览器普遍支持SVG的基础图形显示。不过，基础形状、滤镜、字体、动画和外部资源不是同一个兼容性问题。遇到显示异常，应先缩小到具体元素和引用方式，确认目标浏览器对这项功能的支持，再测试实际文件。
浏览器打开SVG，是按网页图形规则进行渲染；设计工具导入SVG，是将它转换为可编辑的图层。两者目标不同：浏览器看起来完整，不代表其中的脚本、外部字体或滤镜都能转换成对应编辑能力。Pixso支持导入SVG，复杂文件仍需比较导入前后的轮廓、字体、遮挡和效果。
- 先比较外观。用浏览器打开原文件，与导入画布后的图形并排看，确认没有少字、裁切或丢失效果。
- 再检查结构。展开图层，分清路径、文字与图片。路径和基础形状可以调整填充与描边；需要修改节点时，再检查对象能否进入矢量编辑。已有位图不会因导入而自动恢复成路径。
- 最后检查交付。保留源文件，再打开导出成品确认显示效果。要复用为图标组件时，先统一边界与命名，再组织组件，不能靠组件化修复源文件缺陷。
如果只是颜色改不动，可按SVG填充、描边与图片排查步骤找到真正控制颜色的对象；若只需固定尺寸图片，则无需强行把所有效果拆成可编辑路径。
练习时可以从一个矩形、一枚图标开始：在画布里观察图层和属性，在源码里识别形状与坐标，再回到真实使用尺寸查看效果。需要寻找可编辑的插画、图标与界面素材，可以到Pixso社区选择适合任务的资源。
