实用创作流程
SVG 非缩放描边：用三种尺寸比较图标
把大幅插画中的杯子图标缩小放进工具栏，轮廓可能几乎看不见。保留同一条 SVG 路径，并不一定能保留相同的视觉线条重量。
我们用虚构品牌 Cedar Cup 的杯子轮廓，比较默认缩放与 non-scaling-stroke 在 24、48、96 CSS 像素下的表现。Ciyo 创建了源文件和浏览器渲染预览。这种比较有助于选择行为，但不会自动让细节丰富的图标适合小尺寸显示。
先计算预期线宽
这个 SVG 使用 100×100 的 viewBox，五条路径均设为 stroke-width=2。在等比缩放且没有额外变换时，默认屏幕线宽是 2 × 渲染尺寸 / 100，分别得到 0.48、0.96、1.92 CSS 像素。
为描边路径设置 vector-effect="non-scaling-stroke"，表示要求描边抵抗几何缩放。在本次比较中，目标线宽保持为 2 CSS 像素。SVG 坐标系统规范定义了这种行为；表格仅描述我们选用的具体尺寸。
| 图标尺寸 | 默认描边 | 非缩放描边 |
|---|---|---|
| 24×24 CSS 像素 | 0.48 CSS 像素 | 2 CSS 像素 |
| 48×48 CSS 像素 | 0.96 CSS 像素 | 2 CSS 像素 |
| 96×96 CSS 像素 | 1.92 CSS 像素 | 2 CSS 像素 |
要求两行使用完全相同的几何形状
在 Ciyo 新建项目，要求生成包含六个内联图标的比较 HTML 页面。不同版本的每条路径都应相同，仅更改 vector-effect。如果代理重新绘制小图标，你就在同时比较两项设计决策。
要求提供可编辑 SVG 和 HTML 代码。在我们的会话中，这些源格式先保存在代理工作区，随后被粘贴到聊天中；画布接收了 PNG 预览。链接中的示例保留了交付的图标几何形状和浏览器测量值。
为虚构品牌 Cedar Cup 创建可下载的 HTML 比较页面，使用简单的内联杯子轮廓 SVG，设置 viewBox="0 0 100 100" 和 stroke-width="2"，按 24、48、96 CSS 像素显示。比较默认缩放描边与每条描边路径上的 vector-effect="non-scaling-stroke"。两种版本的路径几何必须相同，不要填充。说明 non-scaling-stroke 保持屏幕线宽，但不保证小尺寸的视觉质量。交付修正后的独立 SVG、比较 HTML 和 PNG 预览，将 PNG 放上画布。只用代码工具，不使用付费图片或视频生成器。通过程序验证几何形状和尺寸。这是虚构的界面图标演示。在真实预览中判断小图标
实际预览中，默认描边一行的线条随尺寸增大而更清晰；非缩放描边一行在 24 像素时轮廓更重。最小尺寸的蒸汽细节挤在一起。固定线宽可能对有限空间来说过于粗重。
Ciyo 在 Chromium 中渲染了比较页面，并报告预期屏幕线宽。我们保留 HTML，另行检查六个 SVG 显示框和五条路径的几何形状。计算值描述的是几何关系；经过抗锯齿处理的边缘像素仍需目视判断。
细节挤合时改用小尺寸专用图形
工具栏图标应简化缩小时闭合的细节，并按实际 CSS 尺寸检查。保持两像素线宽，不会让蒸汽线条之间凭空多出空间。确定缩放行为后，可以考虑减少路径，或单独设计小尺寸版本。
检查 24 像素下的视觉重量
将交互含义与线宽分开考虑。为控件提供无障碍名称，并在真实主题下保证足够对比度。这张预览用于视觉比较，并非对完整界面的无障碍审计。
放置和导出后再检查
将图标放入真实组件，使用实际 CSS 尺寸和变换。检查浅色与深色主题。在把结果作为最终素材之前，确认接收它的编辑器或导出工具会保留 vector-effect。
这个示例比较的是保存在 Chromium 页面中的等比缩放，不能证明所有矢量编辑器、打印机或浏览器的表现。选择适合组件的版本，并在设计交接时保留对应源文件。
常见问题
non-scaling-stroke 能让所有细节保持清晰吗？
不能。它控制描边行为。狭小的内部空隙、紧密间距和抗锯齿处理仍可能让细节难以辨认。
为什么 24 px 时默认线宽只有 0.48 px？
这个示例使用 100 单位的 viewBox，两单位的描边随等比缩放乘以 24/100。
所有图标都应该用非缩放描边吗？
应在检查实际尺寸后选择。固定线宽可能对小图标来说太粗重。
在真正使用的位置比较图标
先在 Ciyo 中完成一个经过检查的示例。保留源文件，在自己的项目中使用前检查导出结果。