svg 扩展名对应的文件是可缩放矢量图形文件，英文全称是 Scalable Vector Graphics，它本质是基于 XML 文本描述的矢量图片格式，和 png jpg 这类位图不一样，svg 不是像素点阵构成，而是用代码记录线条 路径 颜色 填充 渐变这些图形元素，所以 svg 最大特点就是无限放大不会出现锯齿模糊，文件体积通常很小，网页 图标 logo 插画现在大量使用 svg 扩展名文件，很多新手会把 svg 和普通图片混淆，以为它和 jpg 一样是像素图，实际打开 svg 扩展名文件可以直接看到里面的文本代码，既可以用专业绘图软件导出，也可以手动编写代码生成，浏览器原生支持 svg 扩展名文件，不需要额外安装插件就能直接打开预览。

核心特性说明

无损缩放，不管放大到多大，图形边缘依旧清晰，适合做网站图标 印刷 logo，不会因为尺寸变化失真

文本源码结构，svg 内部是 XML 标记代码，可以用记事本 代码编辑器直接打开编辑

支持动态效果，内部可以嵌入动画 交互属性，还能配合 CSS JavaScript 做动态图形

独立文件，单个 svg 扩展名文件可以包含多层图形 文字 滤镜 蒙版等元素

跨平台，Windows Mac Linux 还有手机端浏览器都可以识别 svg 扩展名文件

svg 和常见位图对比表

项目 svg 扩展名文件 png jpg

图形类型 矢量图形 位图像素图

缩放表现 无限放大不失真 放大之后出现锯齿模糊

文件体积 简单图形体积很小 复杂大图体积偏大

编辑方式 可以修改 XML 代码 依靠绘图软件像素编辑

适用场景 logo 图标 网页矢量插画 照片 写实图像

生成与打开操作步骤

第一步 生成 svg 扩展名文件，可以使用 Illustrator Inkscape Figma 这类矢量软件，绘制图形之后保存选择 svg 格式导出，也可以直接手写 XML 代码，保存的时候把后缀改成 svg

第二步 打开预览，直接把 svg 扩展名文件拖入 Chrome Edge 浏览器，就可以直接查看图形效果

第三步 编辑修改，使用记事本或者 VSCode 打开 svg 扩展名文件，修改里面路径 颜色代码，保存之后图形同步更新

第四步 网页调用，在 html 里面可以通过 img 标签或者内嵌代码方式引入 svg 扩展名文件

常见使用场景

网页前端图标系统，网站导航图标 按钮图标大量使用 svg 扩展名文件

品牌 logo，企业标识需要不同尺寸展示，svg 可以一次制作多尺寸复用

UI 设计素材，APP 界面图标，适配不同分辨率屏幕

数据可视化，图表 动态示意图，svg 可以配合脚本实现动态变化

综合来看，svg 扩展名就是矢量图形标准后缀，核心优势是矢量无损缩放和代码可编辑，适合图标 logo 类图形，写实照片不适合使用 svg 扩展名，需要根据图形类型选择是否使用 svg 扩展名文件。

【常见问题】

问题 1 svg 扩展名文件可以直接打印吗

回答 1 svg 扩展名文件可以直接打印，因为 svg 是矢量图形，打印放大不会模糊，印刷行业经常使用 svg 扩展名文件制作标识和矢量稿。

问题 2 svg 扩展名文件为什么有的打开是代码

回答 2 svg 扩展名文件本身就是 XML 文本格式，用记事本打开就会显示代码，用浏览器或者矢量绘图软件打开就会正常显示图形，这是 svg 扩展名文件本身的特性。

问题 3 svg 扩展名文件可以转成 jpg 吗

回答 3 svg 扩展名文件可以转成 jpg，使用 Inkscape 或者在线转换工具，把矢量的 svg 扩展名文件栅格化导出成 jpg 位图，转换之后就变成像素图，再次放大依然会失真。

【免责申明】

本文为 svg 扩展名相关格式科普，不同软件导出的 svg 存在兼容性差异，部分老旧浏览器对高级 svg 特性支持不全，内容仅作知识参考，不构成设计项目相关专业建议。