SVG 缺失的圆角特性2

原创
05/07 16:44
阅读数 122

SVG 实现圆角的局限性

在上篇分享中,我们聊到了 SVG 设计中的一个有趣话题:如何为矩形添加圆角以及实现独立圆角矩形的挑战。我们了解到,尽管在设计软件中添加圆角轻而易举,但将这一设计使用 SVG 代码实现时,却面临着一系列挑战。

今天,我们将在此基础上进一步深入,探讨 SVG 在处理非矩形图形元素时面临的圆角实现挑战及其解决方案,尤其是对于由路径构成的复杂图形。

SVG 中为路径构成的复杂图形添加圆角

**在 SVG 中,圆角化由路径构成的复杂图形是一个技术挑战。**这涉及到将构成 <path> 元素的顶点转换成圆角,从而创建出具有圆滑过渡的曲线形状,而非简单的直线或折角。为了更直观地理解在 SVG 中为开放路径图形添加圆角的过程,下面提供了一个简单的示例。

由路径构成的开放路径图形

示例图使用 Figma 制作

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

由路径构成的开放路径图形的 SVG 代码

圆角开放路径图形

示例图使用Figma制作

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

圆角开放路径图形的SVG代码

我们可以从上面的 SVG 代码中看到,为 SVG 中的 <path> 元素添加圆角并不是一个直接的过程。这是因为标准的 <path> 元素不提供直接添加圆角的属性或方法。相反,我们必须使用 SVG 路径命令来模拟圆角效果。具体来说,可以通过以下步骤实现:

1、使用 M 命令(moveto)来移动到路径中的特定点。

2、使用 Q 命令(quadratic Bézier curve)或其他贝塞尔曲线命令(如 C 表示三次贝塞尔曲线)来创建圆角曲线,从而将直线段转换为平滑的圆弧。

通过这些命令,开发者可以精确控制路径的轮廓,从而实现所需的圆角效果。

SVG 其他属性实现圆角的局限性

**SVG 2.0 规范引入了 stroke-linecap 和 stroke-linejoin 属性,为线条和多边形的样式提供了更多定制选项。**stroke-linecap 的 round 选项可以模拟线条端点的圆角效果,而 stroke-linejoin 的 round 选项则可以模拟线条连接处的圆角外观。这些属性可以在视觉上产生圆润的边缘,为图形添加平滑的过渡效果。

引入了 stroke-linejoin 属性实现的开放路径图形

示例图使用 Figma 制作

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

引入了 SVG stroke-linejoin 属性实现的开放路径图形代码

然而,重要的是理解 stroke-linejoin 属性并不直接在图形的几何形状上创建真实的圆角效果。相反,它通过改变路径的渲染方式来实现圆角的外观。具体来说,当 stroke-linejoin 设置为 round 时,它会在路径中相邻线段的连接处生成一个圆形过渡,从而在视觉上形成圆角效果。

需要注意的是,stroke-linejoin 属性并不接受一个具体的 radius 值来定义圆角的大小。它不是用来指定圆角半径的,而是通过改变渲染算法来模拟圆角的外观。因此,stroke-linejoin="round" 并不直接控制圆角的具体尺寸,而是提供了一种在路径拐点处创建圆滑过渡的方法。 对于需要精确和复杂圆角的设计,开发者通常需要手动操作 SVG 的 <path> 元素。传统 SVG 在模拟圆角时存在限制,特别是在视觉效果和设计灵活性方面,因为这些圆角不是基于真实几何形状,导致在缩放或高分辨率显示时精确性不足。此外,对于非直线路径,如曲线和贝塞尔曲线,SVG 的模拟属性不适用,限制了其应用。手动编辑 <path> 元素对于不熟悉 SVG 路径语法的用户来说具有挑战性,且即使是经验丰富的开发者也可能觉得代码冗长且难以维护。任何微小的数值调整都可能导致路径数据的显著变化。

为了更直观地理解这一点,以下是一组调整圆角数值的示例,展示了如何通过手动编辑 <path> 元素来精确控制圆角的大小和形状。

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

开放路径顶点的圆角数值为3时的SVG代码

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

开放路径顶点的圆角数值为7时的SVG代码

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

开放路径顶点的圆角数值为10时的SVG代码

调整开放路径顶点的圆角数值(从上至下):3;7;10

** VGG: 简化复杂图形的圆角设计**

VGG Specs 采用了一种与 SVG 不同的路径描述方式,它通过声明式地定义所有曲线控制点(curve points),简化了路径的表述,减少了用户在理解和实现时的难度 与传统 SVG 中基于命令式的路径描述相比,VGG Specs 的这种方法更为直观和简洁。

VGG Specs 为创建和调整圆角提供了一种高效的解决方案,它针对不同类型的图形元素设计了灵活的圆角设置方法。

对于矩形图形,VGG Specs 引入了一个 radius 字段,允许开发者通过数组为每个顶点单独指定圆角半径。这种设计简化了圆角的设置,并且提升了灵活性,因为可以为每个顶点应用不同大小的圆角。

对于由 <path> 元素定义的复杂图形,VGG Specs 进一步细化了控制,为每个曲线控制点提供了 radius 字段,接受浮点数值以精确定义每个圆角的半径。这样的设计使得开发者能够对路径图形的每个圆角进行精细调整,实现高度精确的视觉效果。此外,VGG Specs 也适用于多边形图形,如三角形或五角形。它不仅提供了 radius 字段以设置统一的圆角半径,还允许通过曲线控制点(curve points)分别为图形中每个顶点的圆角设置不同的半径,从而满足了多样化的设计需求。

通过这些改进,VGG Specs 显著提升了图形设计的效率和质量,同时降低了技术门槛,使得开发者能够更加专注于创意和设计的实现。

例如,若要为 <path> 元素的顶点添加圆角,只需指定一个像素值至 radius 属性,如 radius="10"。这种方法不仅大大简化了圆角的创建过程,而且使得调整圆角大小变得直观而简单——只需更改 radius 属性的数值即可实现。

使用VGG 快速实现的开放路径的圆角顶点图形

使用 VGG 实现的开放路径圆角代码以及****为每个曲线控制点提供的 radius 字段

了解 VGG Specs 的具体属性和使用方法,可以访问 VGG Docs (https://docs.verygoodgraphics.com/specs/overview) 获取取详细信息。

此外,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
分享
返回顶部
顶部