1. 首页
  2. css

CSS从adobeillustrator中获取SVG的不同方法

假设您在Adobe Illustrator中创建了一个可爱的矢量插图。或者你已经使用Illustrator精巧一些现有的图形。或者出于某种原因,您在adobeillustrator中打开了一个文件,您最终希望将其作为SVG在web上使用。

从Illustrator中获取SVG有几种不同的方法,每种方法都有点不同。让我们看一下。

TL;DR:导出,如File>Export>Export As…SVG然后优化是web的最佳选择。

\”另存为…\”方法

Illustrator支持SVG作为一流的文件格式。您可以文件>另存为…并选择\”SVG\”作为选项,以替代默认的`.ai`文件格式。

使用Illustrator中的编辑>另存为…

在\”保存SVG选项\”中甚至还有一个按钮,称为\”SVG代码…\”您可以单击,让Illustrator在保存代码之前向您显示代码,可能是出于复制和粘贴的目的。

如果你在网上搜索一下Illustrator中不同格式保存的区别,你会发现大量的通用信息告诉你SVG是在万维网上使用的,所以如果你打算在那里使用这个图形,那就是你应该保存的格式。

在这里要小心。从Illustrator保存为SVG是可以的,但该文件绝对不能在web上直接使用。当您将Illustrator中的\”另存为…\”作为SVG时,Illustrators主要关心的是您可以在Illustrator中再次打开该文件,就像您离开它一样。

例如,Illustrator的专有功能不是SVG的一部分。一个简单的例子:指南。这样保存为SVG的向导就不会丢失,它们保存得很好。但是指南在web上的SVG中是没有意义的,因此如果使用这种方式直接在web上保存的SVG,您将发送无用的数据。

保存的Illustrator SVG的\”另存为…\”文件大小可能比真正支持web的版本大几个数量级。看看CSS技巧徽标\”另存为…\”d和一个为web导出的徽标。

410 KB用于\”另存为…\”版本,而3 KB用于导出版本。

我们还不完全清楚为什么\”另存为…\”作为SVG是个好主意。您可能只想将文件保留为\”.ai\”,直到您要实际导出到web。或者,如果确实另存为SVG,则不妨使用\”保留Illustrator编辑功能\”复选框,并使用一种命名约定,即这是一个\”原始\”文件,而不是一个可供web使用的文件。

等等,\”导出版本\”?让我们接下来看一下。

方法\”导出为\”

File>Export>Export As…非常不同。您正在\”导出\”,这意味着生成的文件不再是Illustrator友好的可编辑文件,而是专门用于其他用途的新文件。例如,JPG就是其中一个选项。在将矢量艺术导出为JPG之后,您不希望能够编辑它。

SVG也是一个选项。输出与\”另存为…\”有很大不同。导出的SVG实际上非常接近web就绪。没有奇怪的doctype,大量的元数据,或者专有的Illustrator之类的东西。导出的SVG可能不会在Illustrator中以与在原始文件中完全相同的方式打开。

您将得到一个最小的导出选项屏幕,如下所示:

导出SVG时的SVG选项。

显示的选项有很好的默认值。快速概述:

  • 样式:\”表示属性\”表示填充:红色;而不是SVG中的\”内联样式\”,内联样式表示<lt;样式&gt;块,这在具有大量类似元素的SVG中可能是有效的。
  • 字体:\”SVG\”表示使用元素(和朋友),这是非常有效,前提是您使用的字体在您打算使用它的网站上可用\”转换为大纲\”将在导出时将文本转换为矢量形状,确保它看起来完全正确,但会失去效率、可访问性、可搜索性和复制能力。
  • 图像:\”链接\”意味着如果SVG中恰好有光栅图形,它将链接到它们,而不是将它们嵌入到SVG中,而不是\”嵌入\”它们。
  • 对象ID:唯一确保每个ID都是唯一的(对web很好),但是您也可以选择使它们非常短(\”最小\”)或基于层名称。
  • 十进制:2可能很好。只有当你知道你使用的是一个非常小的viewBox并且需要非常高的精度时,你才会上升;如果你使用的是一个巨大的viewBox,你才会下降。
  • 缩小:我们

    CSS从adobeillustrator中获取SVG的不同方法 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bb%8eadobeillustrator%e4%b8%ad%e8%8e%b7%e5%8f%96svg%e7%9a%84%e4%b8%8d%e5%90%8c%e6%96%b9%e6%b3%95/

发表评论

您的电子邮箱地址不会被公开。