背景
什么是 SVG：简单来说，SVG 就是一种矢量图形格式。不像其他一些基于矢量的文件会占用比较大的空间资源，SVG 是纯代码的形式。这意味着它方便，更轻量。
但实际使用中，导出的 SVG 在渲染效果上无法精确还原设计师在设计工具中画出来的效果。本篇就 SVG 缺失的圆角特性展开。
多姿多样的矩形
在 SVG 中，通过 <rect> 元素的 rx（水平半径）和 ry（垂直半径）属性可以定义矩形的圆角。当所有边角的圆角半径相同时，我们称之为联合圆角矩形。下图中的右侧图形就是一个联合圆角矩形。
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="300" rx="60" fill="#0286FF" fill-opacity="0.75"/></svg>
但有个特殊情况却是使用 SVG rx 和 ry 属性难以实现的，让我们来看看下面的示例：
注意到有什么不同吗？右边矩形的每个角都被赋予了不同的半径。当需要为每个角设置不同半径以创建独立圆角矩形时，SVG 的 rx 和 ry 属性就显得力不从心。这种设计在所有形状中只有矩形可以特殊实现。
在下面的示例中，我们为了在 SVG 中实现类似 Figma 中的设计效果，通常需要使用 <path> 元素来创建和 Figma 中一致的带有独立圆角的矩形。
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V222C300 265.078 265.078 300 222 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg>
在设计和开发协作中，一个常见问题是设计师对 SVG 规范的了解不足，他们往往期望在设计软件中绘制的矢量图形能直接通过代码实现。然而，开发人员在用代码复现设计时，尤其是对于特殊图形，如独立圆角矩形，可能会遇到挑战。如果缺乏原始 SVG 文件，这一挑战将会变得更加严峻。
在设计到开发的转换过程中，尽管理论上设计师导出的 SVG 图像应该可以直接被开发者使用，实际情况往往并非那么简单。特别是当需要对单个圆角的数值进行微调时，即便开发者明确知道所需的具体数值，通常还是需要依赖设计师去重新编辑原始设计文件并导出新的 SVG 图像。这种工作流程不仅增加了显著的时间成本，还可能涉及到额外的沟通成本，因为需要在设计师和开发者之间进行需求的传达和确认。
对单个圆角的数值进行微调
此外，尝试绕过设计，直接通过代码修改 SVG 图像中的 <path> 元素也是充满挑战的。例如，假设我们需要修改矩形右下角的圆角半径，从78像素减少到28像素。
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V222C300 265.078 265.078 300 222 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg>
上图（左）圆角为78像素的SVG代码示例
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V272C300 287.464 287.464 300 272 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg>
上图（右）对圆角为28像素的SVG代码示例
正如示例所示，对SVG中的单个圆角数值进行微调是一项极具挑战性的任务。开发者需要具备深厚的 SVG 路径数据知识，才能正确解析并调整复杂的路径指令，这在技术上是非常困难的，几乎可以说是不可行的。
那么，开发人员是否能够使用其他方法创建独立圆角矩形呢？
其他解决方案
使用VGG的代码示例
什么是 VGG
VGG 是一套基于 JSON 的下一代矢量图形标准。
👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建
关于 VGG
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。
特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。
特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。
-
GitHub：https://github.com/verygoodgraphics -
官网：https://verygoodgraphics.com/ -
博客：https://blog.verygoodgraphics.com/
