是否值得学习 SVG 路径属性,还是应该使用绘图工具?

平面设计 墨景 svg 小路
2022-02-14 20:16:21

使用 path 元素和 d 属性手动创建图形(我猜是借助数学?)比使用 Inkscape 之类的工具绘制图形有优势吗?Inkscape 会生成效率更低的 SVG 代码吗?

4个回答

嗯,这里有两所学校......

  • 问一个印刷设计师他/她是否会写后记代码,他们会嘲笑你。印刷设计师从来没有对学习如何手动编写 postscript 文件进行输出感兴趣。他们完全依赖所见即所得的编辑器(Photoshop、Indesign、Illustrator 等)。所以答案是肯定

  • 询问网页设计师他/她是否可以编写标记或代码来创建网站,您通常会在这里回答“是”。大多数所见即所得网络编辑器不如人类熟练。当然它们可以更快,但它们在某些领域并不总是那么彻底或详细。许多精通网页设计师/开发人员更喜欢手动创建标记/代码。所以问这个小组,你会得到一个普遍的肯定

现在,直接编写 svg 代码对是否有价值是另一回事。我个人并不关心 SVG 代码是如何编写的,只要它按我的预期显示即可。我也知道我可以使用 WYSIWYG 编辑器,然后在需要时在文本编辑器上手动打开 svg 以“调整”。所以我不知道,也不想知道 svg 代码的所有来龙去脉。我根据需要学习。

  • 编写自己的 svg好处是control手动编写通常比任何自动方法都更加详细和结构化。请参阅上面的网络项目符号。如果您是细致的类型,您可能会发现能够从文本编辑器构建 svg 图形非常满意。

  • 威慑时间。使用 WYSIWYG 编辑器通常要快得多。或者使用编辑器然后进入并手动更改 svg 代码。

所以这真的是你的电话。

至于对他人(雇主/客户等)的好处很难说,很大程度上取决于您的熟练程度和速度。如果您可以在打开 Illustrator/inkscape draw 并保存的同时创建手动编写的 svg 图形,那么它可能对某些第三方有价值。但是,如果编写代码需要两到三倍的时间,那么,我不知道有谁想要以两倍的价格获得同样的东西。

SVG 不是很难手写。就我个人的口味而言,它有点过于冗长,但除此之外。

取决于你做什么

了解如何手动编写矢量文件有几个原因。

  1. 您可以访问某些数据,并且需要能够在图形编辑器中打开它。将数据转储为 SVG、EPS 或 DWG 相对容易。然后,您可以在任何应用程序中进一步处理它。

    在某些情况下,这可以使您的工作效率提高很多倍。但是,如果您从不费心学习格式,您将永远无法获得生产力。如果您是程序员,您绝对应该因此而学习。

    示例问题和用例:import-vector-data-into-illustrator

  2. 你做的事情你的编辑做得不好。在非图形编辑器中仍然有一些更容易做的事情。最值得注意的是数学排版,但有时还有其他事情,如自定义半色调生成等。

    这里的一个大 SVG 用例是为一些交互使用生成 CSS。或者编写svg动画。但它不仅限于此。在许多情况下,一个 for 循环或一个简单的查找和替换,或一些文本复制粘贴都可以创造奇迹,而手动完成这些奇迹是非常乏味的。能够组合嵌套变换可用于分形生成,这在您的 GUI 中将是一场噩梦。

但是,如果您知道如何做到这一点,那么就会出现各种奇怪的原因。如:

  1. 你需要画一幅画,但你只有一个终端。除了你描述一个序列是如何发生的之外,能够阅读我所做的也是一个奖励。这种类型的例子可以在这里找到

一般来说

对于大多数用户来说,学习没有意义。所以不行。但是知道这一点并没有什么坏处,所以如果你觉得它有趣,你可能会花几个星期来研究这个主题。它可能会带来巨大的回报。

诚然,即使对我来说,这种需求也不会经常出现。

要回答您的字面问题:

使用 path 元素和 d 属性手动创建图形(我猜是借助数学?)比使用 Inkscape 之类的工具绘制图形有优势吗?

非常稀有。我通常从不使用 WYSIWYG 工具,但在设计图形时,我会使用。此外,如果您愿意,您可以从 Inkscape 的界面手动调整节点位置和类似内容。

但是,了解如何手动生成路径可能非常有价值:

  • 了解幕后发生的事情有助于您更好地了解使用所见即所得工具时所做的事情。与以下密切相关:图形设计需要数学吗?. 对于直接与数学基础曲线有关的示例,我想参考我的这个答案

  • 如果您知道如何手动生成路径,那么您也知道如何自动操作 SVG,即使用程序。Joojaa 的回答已经为此提供了一些很好的例子。

Inkscape 会生成效率更低的 SVG 代码吗?

是的。Inkscape 的代码不以小为目标。有一些特定的工具可以减少 SVG 的文件大小,但它们只能做到这一点,因为它们不知道什么是重要的。如果您出于某种原因需要更进一步,则必须手动“打高尔夫球”您的 SVG,请参阅此答案以获取示例。尽管如此,如果您这样做,您通常会从所见即所得的 SVG 开始,而不是从头开始。

答案是两者兼而有之。这就是为什么这两种选择都存在的原因。

我并不是说有些图形是在绘图应用程序中制作的,有些是用代码制作的,我的意思是,对于您创建的每个图形,您都准备好了这些工具:

  • 矢量绘图工具
  • UTF-8 代码编辑器

…因为是 SVG 工具包。一般来说,您按顺序使用它们。

对于您创建的每个图形,您可以使用 99% 的绘图和 1% 的代码,或者 10% 的绘图和 90% 的代码,或者 50:50。但是,如果您想制作出最好的图形,那么您不太可能仅使用绘图或仅使用代码。

代码部分可能只是优化,也可能是动画,或者它可能正在获取一个简单的图形并创建一个带有旋转的复杂图形,或者它可能只是在检查以确保您没有意外创建一个刚刚具有的 SVG一个嵌入的位图。但归根结底,您是在创建和发布代码,因此您至少要签署您所交付的内容。

另一方面,如果你想制作一个有趣的图形,其中包含一些艺术,一些生命,你将通过使用你的眼睛和视觉皮层至少创建最终图形的初稿来获得很多。您可能希望导入剪贴画作为起点,或使用以前制作的图形作为模板。这些和其他久经考验的矢量图形制作方法不会被抛弃,因为 SVG 被存储为文本可编辑的 XML Web 文档。XML 文档是矢量图形制作的附加功能,而不是绘图的替代品。

简而言之:使用整个工具包。不要将一只手绑在背后。