svg · 关于我们

我们是谁：把 svg 这件事讲清楚的人

svg图表（域名 svg-tu-biao.cn）是一个围绕 svg 这一主题做内容整理与信息导航的独立站点。我们不是软件厂商，也不是设计工具的代理商，本质上更像一个「较真的编辑小组」——把散落在规范文档、开发者社区、设计实践里的 svg 知识，重新梳理成一条能走通的学习路径。

如果你第一次听说 svg，最省事的解释是：它是一种用文字描述图形的格式。你在文件里写的不是像素点阵，而是「从这里画一条线到那里，再拐个弯」这样的几何描述。浏览器读到这段话，自己把图形算出来。好处很直接——放大不糊、体积往往更小、还能被脚本和样式单独控制。我们做的所有内容，都是围绕这个核心事实展开的。

如果你已经用过 svg 但总觉得「会用不会调」——比如图标在某个尺寸下边缘发虚、导出的文件里塞了一堆用不上的编辑器元数据、动画在某个浏览器上不动——那我们的内容可能更对胃口。我们更愿意花篇幅去讲那些真正卡住人的细节，而不是重复「svg 是矢量图」这种人人都会说的话。

svg我们专注什么

一句话概括：svg 的学习、使用、排错与选型。具体拆开是四件事——第一，把基础概念讲清楚，尤其是 viewBox、坐标系、路径命令这些新手最容易糊过去的地方；第二，整理可用的公开资源与工具，并标注它们的来源和适用场景；第三，把常见的坑写出来，让你少走几次弯路；第四，做不同格式之间的横向对比，帮你在具体项目里做出选择，而不是告诉你「哪个最好」。

我们坚持的理念

不臆造。凡是涉及具体名单、具体日期、具体数量、具体获奖记录这类可以被人反查的信息，我们确认不了就留空，不靠猜补齐。这也是本站的一条编辑底线：宁可少写一句，也不写一句查不到出处的话。你在页面上看到的所有判断，要么来自公开规范与文档，要么来自我们自己动手试过之后的结果。

另外一件事值得提前说清楚：本站是信息导航与内容解析站，不托管、不上传、不代理任何图形文件或流媒体，与任何软件厂商都没有官方隶属关系。我们整理的资源都指向公开可访问的原始出处，尊重原作者的版权；如果你发现某条信息有误或涉及权益，请直接通过 联系我们 里的邮箱反馈，处理方式写在 内容说明 中。

精选内容 · 编辑部的六条优先推荐

这些是我们认为对大多数人有用的入口。它们不是按点击量排的，而是按「读完能立刻用上」排的——每条都对应一类真实会遇到的处境。

以上条目为本页内的主题索引，如需展开阅读，可直接跳到 深度解读 或 常见问题 板块。

深度解读：新手怎么把 svg 真正用起来

这一节不绕弯子。我们按「先建立直觉、再动手写、最后处理麻烦」的顺序讲，每一步都给出具体做法和判断标准。如果你时间紧，只看每段的加粗判断句也够用。

第一步：把 viewBox 当成取景框，而不是尺寸

新手最容易混淆的是 width、height 和 viewBox 三者的关系。可以这样理解：viewBox 是你给图形定义的坐标取景框，width 和 height 只是把这块取景框贴到页面上的物理大小。取景框里写着「我的图形范围是 0 0 24 24」，外面写「贴到页面时占 32 像素宽」，浏览器就会把这块 24 单位的画面等比放大到 32 像素。只要取景框定义对了，放大缩小都不会出问题。

反过来，如果 viewBox 的宽高比和 width/height 的宽高比不一致，而你又没设置 preserveAspectRatio，图形就会被拉伸变形。如果你遇到「图标在某个位置突然变扁」的情况，先去看这两个比例是不是对不上，基本一查一个准。

第二步：手写三个基本形状，建立坐标直觉

不要一上来就啃 path 的一长串命令。先用 rect、circle、line 各画一个，感受坐标数字和画面位置的对应关系。比如 rect 的 x 和 y 是左上角坐标，width 和 height 是宽高；circle 的 cx、cy 是圆心，r 是半径。写错了立刻改数字看变化，这个反馈循环是建立直觉最快的办法。

等你能凭感觉写出一个位置正确的矩形，再去看 path。path 的 d 属性本质上就是「移动到某点、画线到某点、画曲线到某点」的连续指令，M 是移动、L 是直线、C 是三次贝塞尔、Q 是二次贝塞尔、Z 是闭合。它们不是魔法，只是把「抬笔、落笔、连线」这件事写成了字母加数字。

第三步：处理新手最常踩的四个坑

坑一，描边被裁掉。如果图形贴边绘制又加了描边，描边会有一半落在取景框外面，看起来像被切了。解决办法是给 viewBox 留出一点余量，或者把描边改成向内对齐。

坑二，fill 和 stroke 的继承。svg 里的样式会往下继承，父级写了 fill 颜色，子路径如果没覆盖就会跟着变。如果你改不动某个颜色，往上找一层，八成是被父级覆盖了。

坑三，用了编辑器私有属性。从设计软件导出的文件常带着私有命名空间和大量注释，浏览器虽然会忽略，但体积白白变大。清理时注意别把 clipPath、mask 这类真正参与渲染的节点删掉。

坑四，把 svg 当成纯图片用。svg 能被样式和脚本单独操作，这正是它的价值所在。如果你只是把它当 img 塞进去，那和用 PNG 的区别就只剩下清晰度了，有点浪费。

第四步：什么时候不该用 svg

这一点很多教程不讲，但实际项目里很重要。如果是照片、复杂渐变插画、包含大量细节纹理的素材，位图格式通常更合适。svg 的优势在于结构清晰、可缩放、可编程，而不是「什么都能画」。硬把一张照片转成 svg，得到的往往是体积巨大、细节丢失、渲染还慢的文件，得不偿失。

判断标准可以简单一点：如果这个图形放大之后你希望线条依旧锐利，而且它的构成是有限的几何形状，就用 svg；如果你需要表现连续色调和丰富细节，就用位图。两者分工，不存在谁淘汰谁。

第五步：关于「安全」这件事的实话

svg 是文本格式，这既是它的优点也是需要留意的地方。纯图形的 svg 完全安全，它就是一段描述。但如果文件里内嵌了 script 标签、外部引用或者 onload 这类事件属性，在浏览器中打开时是有可能执行脚本的。遇到来源不明的 svg，用文本编辑器打开扫一眼有没有 script 和 on 开头的属性，一分钟就能判断。我们整理资源时也会标注来源，不会提供任何盗版、破解性质的素材。

格式横向对照：svg 到底适合放在哪

下面这张表不是要评出优劣，而是把四种常见格式放在同一套维度下对照，方便你按项目实际情况挑。表格里的判断都基于公开规范与常规实践，不涉及任何具体产品的性能承诺。

如果你正在两个格式之间犹豫，一个简单的判断是：这个素材将来会不会被要求放大到不同尺寸？会，就优先考虑 svg；不会，且内容偏照片性质，位图更省事。

发展历程：一个小站是怎么长起来的

我们没有融资故事，也没有夸张的增长曲线。下面这些节点记录的是内容本身的变化——从一个人随手记笔记，到形成一套相对完整的整理方法。

1. 2021 年 5 月 站点起步，最初只是内部笔记 起因很简单：团队里总有人来问同样几个 svg 问题，索性把答案写成固定页面，省得反复解释。
2. 2022 年 3 月 确定「先讲清楚，再谈技巧」的写作顺序 删掉了早期一批堆砌术语的文章，重新按新手的理解路径组织内容结构。
3. 2023 年 9 月 加入格式对照与选型内容 很多读者卡在「该用哪个格式」而不是「怎么用」，于是补上了横向对比这一块。
4. 2024 年 11 月 建立编辑核对流程 所有涉及具体数据的表述，上线前都要过一遍来源核对；核不到的，直接删掉不写。
5. 2025 年 7 月 常见问题板块重构 把散落在各处的答疑统一收进折叠式问答，读者不用再翻三四个页面找同一件事。
6. 2026 年 10 月 本页上线，公开我们的编辑取舍 把「不臆造、不托管、不代理」这些原则写成可见的文字，而不是藏在角落里。

专题与活动专区

这些是当前正在推进的内容专题，状态会随进度更新。它们都是围绕 svg 的具体子话题展开的，不是泛泛的栏目名。

关于本站内容的几点说明

下面这几条不是法律套话，是我们实际执行的标准。写出来是希望你在引用本站内容时心里有数，也方便你在发现偏差时找到我们。

1. 本站定位是信息导航与内容解析站。我们整理公开可访问的知识、文档与实践经验，帮助读者更快找到方向，本身不生产、不托管、不上传、不代理任何图形文件或流媒体，也不提供任何软件下载。
2. 与任何厂商均无官方隶属关系。页面上出现的产品名、格式名、机构名，仅用于说明与对比，相关名称与权益归各自所有者。我们不宣称任何官方身份或授权。
3. 信息来源以公开页面与规范文档为准。内容中涉及的判断，尽量给出可自行验证的依据。凡是无法核实的具体名单、日期、数量、获奖记录，我们选择留空而不做猜测补齐。
4. 版权归原作者所有。若本站内容无意中使用了你的作品或表述，请通过下方邮箱与我们联系并说明具体页面与位置，我们会在 48 小时内核实处理，该删除的删除，该标注出处的标注出处。
5. 不提供任何未授权资源的获取路径。我们不介绍盗版、破解或规避授权的方式，相关留言与来信我们不予处理，请理解。
6. 未成年人使用提示。本站内容面向具备基本判断力的普通读者，不包含成人向内容；若未成年读者在阅读过程中遇到不理解的技术表述，建议在监护人陪同下查阅相关资料。

投诉与纠错邮箱：hello@svg-tu-biao.cn。写信时请附上页面地址与具体段落，能大幅缩短我们的核实时间。

常见问题：读者问得最多的六件事

这些问题来自读者来信和搜索行为，答案尽量给到能直接用的程度，不写「具体情况具体分析」这种没有信息量的话。

相关推荐与延伸阅读

下面几条都指向本页内已经写好的段落，或者回到首页的整体入口。我们不在这里放任何站外详情页链接，避免点进去发现是空页面。

联系我们

内容纠错、版权沟通、合作咨询都可以走下面的渠道。写信时把页面地址和具体段落一并说明，能让我们更快定位问题；如果只是提一句「有个地方错了」，来回确认会拖慢处理速度。