SVG 缺失的圆角特性

原创
05/07 08:50
阅读数 231

背景

什么是 SVG:简单来说,SVG 就是一种矢量图形格式。不像其他一些基于矢量的文件会占用比较大的空间资源,SVG 是纯代码的形式。这意味着它方便,更轻量。

但实际使用中,导出的 SVG 在渲染效果上无法精确还原设计师在设计工具中画出来的效果。本篇就 SVG 缺失的圆角特性展开。

多姿多样的矩形

联合圆角、独立圆角

在 SVG 中,通过 <rect> 元素的 rx(水平半径)和 ry(垂直半径)属性可以定义矩形的圆角。当所有边角的圆角半径相同时,我们称之为联合圆角矩形。下图中的右侧图形就是一个联合圆角矩形。

联合圆角矩形(示例使用Figma制作)
以下是一个创建联合圆角矩形的 SVG 示例代码:

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">

但有个特殊情况却是使用 SVG rx 和 ry 属性难以实现的,让我们来看看下面的示例:

独立圆角矩形(示例使用Figma制作)

注意到有什么不同吗?右边矩形的每个角都被赋予了不同的半径。当需要为每个角设置不同半径以创建独立圆角矩形时,SVG 的 rx 和 ry 属性就显得力不从心。这种设计在所有形状中只有矩形可以特殊实现。

在下面的示例中,我们为了在 SVG 中实现类似 Figma 中的设计效果,通常需要使用 <path> 元素来创建和 Figma 中一致的带有独立圆角的矩形。

你可能会注意到,原本在 <rect> 元素中用于定义圆角大小的 rx 和 ry 属性并未出现,取而代之的是一系列复杂的路径指令。这是因为 SVG 的 <rect> 元素并不支持为矩形的每个圆角设置不同的半径值;相反,必须利用路径数据来绘制这种效果。

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">

由此可见,尽管在设计软件中创建具有独立圆角的矩形非常简单,但在 SVG 中实现相同的效果却需要编写较长且不够直观的代码。这种差异在处理更复杂的图形和路径时可能导致显著增加的开发时间和精力。 使用 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">

上图(左)圆角为78像素的SVG代码示例

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">

上图(右)对圆角为28像素的SVG代码示例

正如示例所示,对SVG中的单个圆角数值进行微调是一项极具挑战性的任务。开发者需要具备深厚的 SVG 路径数据知识,才能正确解析并调整复杂的路径指令,这在技术上是非常困难的,几乎可以说是不可行的。

那么,开发人员是否能够使用其他方法创建独立圆角矩形呢?

其他解决方案

你可能会想到使用 HTML 和 CSS 来简化这类问题, 但这要求开发者不仅要熟悉 SVG 的诸多限制,还要掌握其他网页标准,并从中找到合适的解决方法。这种方法虽然可行,但大大增加了难度,并未从根本上解决问题。 而我们期望中的 SV G,需要轻松高效的实现任何在设计工具中设计方案。 如果有其他简便的方法在 SVG 中获得独立圆角的矩形,欢迎分享经验~
更好的解决方案 VGG Specs 提供了一种简化的方法来创建圆角矩形 。通过 radius 属性,开发者可以以一种简洁的方式定义不同角落的圆角半径。了解具体属性详情请前往 Radius | VGG Docs (docs.verygoodgraphics.com)。 例如,要为矩形的四个角落分别设置不同的圆角半径,只需指定像素值:左上角为 96 像素,右上角为 46 像素,右下角为 78 像素,左下角为 122 像素。 VGG 规范使得通过 简单的属性声明式 ,就能快速且轻松地实现具有独立圆角的矩形效果。

使用VGG的代码示例

使用 VGG 快速实现与设计工具一致的独立圆角矩形

那么,什么是 VGG 呢?

什么是 VGG

就像 SVG 是 Scalable Vector Graphics 的缩写,VGG 是 Very Good Graphics 的缩写。

VGG 是一套基于 JSON 的下一代矢量图形标准。 包括设计、布局、动画和交互等多个规范,为显著提高可用性和易用性。VGG 旨在推动矢量图形的未来,并作为一个开放标准供行业使用。 此外,VGG 开源了底层引擎 VGG 运行时,具有跨平台渲染和运行能力。我们后续会出一系列内容讨论 SVG 作为矢量图形存在的问题,并展示 VGG 的图形能力以及相比于 SVG 的优点。请持续关注,更 欢迎大家一起参与 VGG 开源社区的建设~

👏扫码添加小助手进交流群,欢迎社区小伙伴参与共建

**预告:5月份会发布基于 VGG 的商业化产品 ** Daruma Plugin for Figma。 欢迎对 Design as Code 感兴趣的小伙伴报名内测,有机会获得社区大礼包,数量有限,先到先得。(添加小助手回复“内测”即可报名)
🔥 社区活动: Design as Code|VGG 社区邀你参加开源之夏 ,赢万元奖金


关于 VGG

VGG(VeryGoodGraphics)是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念,让开发者可直接基于设计稿编程,快速将设计原型交付为可交互的应用。

特性一:无代码完美还原设计稿VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节,可直接将设计稿作为用户界面,省去前端与客户端开发者使用代码去复原设计稿的开发工作,降低他们与设计师之间的沟通摩擦成本。

特性二:原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式,支持在任意一种已有的 APP 基础上进行增量式开发,主持主流平台与框架。

特性三:脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块,在提供快速业务逻辑开发能力的同时支持高性能计算。

特性四:高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容(Figma/Sketch/Adobe Illustrator),并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具,打通从应用 UI 设计到应用研发的完整流程。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部