SVG 缩放时,描边可能跟着图形一起变粗。对插画这也许合理,对希望线宽一致的界面图标却可能不合适。先明确设计想保持什么,再改源文件。应比较实际 SVG 在多个目标尺寸下的显示,而非从一张截图推断可编辑线条行为。
先定义需要一致的项目
记录目标尺寸,并确认系统要求比例线宽还是近似固定视觉线宽。小图标与大插画不一定适用同一规则。检查哪些路径真的使用 stroke,哪些看似描边其实已变成填充轮廓;后者不能仅靠描边属性重新获得原先可编辑结构。
保留可编辑源。SVG 里面嵌着 PNG 时,像素仍是位图;在外层加一个矢量效果属性,不会把画在像素上的粗线变成真正 stroke。文件扩展名相同也不能证明内部对象相同,交付前应先确认结构。
对照普通描边和非缩放描边
MDN 的 vector-effect 参考说明 non-scaling-stroke 这一具体渲染行为,它不是所有输出都该开启的增强项。由源编辑器或实施者在适合路径上设置,再检查目标浏览器实际结果。
从相同源建立普通和非缩放两个候选,别同时改 viewBox 或路径形状,否则无法区分是线宽策略还是几何变了。还要看连接、开放端点和内部空隙,固定线宽在很小图形中占的比例不同,不能只检查外缘。
一个三尺寸的假设评审
假设线条图标用于三个大小,测试页面并排放两种候选,使用真实背景和邻近文字,记录视觉线重、内部空隙和整体轮廓。这是待执行比较,不是已测浏览器结果,也不是现成下载样例。
非缩放版本在大图中可能一致,却把小图内部窄缝填满;这时应给最小用途做另外的已审设计,而不是继续无差别叠属性。主图放大漂亮,不代表整套尺寸都可用,审校必须覆盖最小用途。
按整套用途批准
通过条件是每个尺寸都有约定线宽、内部留白和可识别形状。小图过粗、大图过弱、嵌入路径行为不同都应拒绝;组件新增 transform 或改为另一格式后再检查。保存可编辑 SVG 和逐尺寸记录,所需位图回退另行标注。
Imagild 的 Skills可以开发视觉概念,SVG 描边、几何与浏览器渲染在外部流程处理。带矢量外观的生成图和测试过的 SVG 图标是不同交付,也都不能自动证明适用于生产切割路径。