如何创建 SVG 文件

平面设计师

在创建网站时,网页设计师必须考虑到 四个要点 考虑网页的布局和视觉设计, 文本、图像、颜色和字体 雇员。

在这四点中,我们将在这篇文章中给出最重要的一点是图像,因为我们将要讨论 如何创建 svg 文件 因为考虑到您使用的图像的质量非常重要。

使用 SVG 文件进行处理, 专业人士一直在增加 而不是设计界的专业人士。

什么是 SVG 文件?

SVG 图标

SVG是英文Scalabe Vector Graphics的缩写,西班牙文是Scalable Vector Graphics。 这是关于一个 开放和自由的格式 用于创建二维图形,二维。

与 JPG 或 PNG 等其他图像格式不同, SVG 是一种可扩展的格式,无论您想增加多少尺寸,都将保持图像质量。 它是网页中放置图形或矢量图像最常用的格式之一。

我们为什么要使用 SVG?

屏幕图像平板电脑

使用这种格式,矢量图像将保持高质量,无论其大小和分辨率如何。 相反,由像素组成的位图组成的图像在调整大小时会丢失质量。 SVG 格式由其轻便性和多功能性定义。

支持使用这种格式的另一点是它的小尺寸,也就是说,多亏了这个 提高它们所在页面的加载速度. 这些图像由浏览器构建,有助于减少服务器的负载和消耗。

此外,他们可以 创建动画 SVG 图像 与它给我们的网站一种亲密的气氛,并引起访问它的观众的注意。

SVG 是一种开放格式,也就是说, 可能会进行改进和更新. 此外,可以使用矢量编辑程序编辑 SVG 文件,例如 Adob​​e Illustartor,而不会降低其显示质量,可以在任何设备上查看。 它还允许我们在不损失质量的情况下打印它。

如何轻松创建 SVG 文件

如果您熟悉它们,创建 SVG 文件的最简单方法可能是通过图形设计程序,例如 Illustrator、Corel Draw 等。

专注于Illustrator程序,当我们要使用SVG格式时,我们必须考虑是否使用了渐变或其他效果,例如艺术效果、模糊、画笔、像素等。 因为它们在以 SVG 文件格式保存时会被光栅化。 建议使用 SVG 滤镜效果,添加效果,以免后期光栅化.

我们给您的另一条建议是使用 插图中的简单符号和路径以获得更好的性能 上述格式。 避免使用带有大量跟踪的画笔,因为这会产生更高的数据负载。

要在此程序中创建 SVG 文件, 我们必须打开的第一件事是一个空白画布,我们将在其中研究我们的想法。

一旦我们的工作完成,我们要做的是转到程序上方显示的工具栏,我们将选择选项 文件,另存为,然后会出现一个弹出屏幕,告诉我们为文件命名 并指明我们要保存的格式。 在最后一节中,我们必须标记 SVG 选项。

保存路径 SVG Illustrator

选择 SVG 类型时,会出现一个对话框,向我们显示必须考虑的不同选项。

SVG 保存选项

作为一般规则,在表格中出现的第一个字段中,会出现 SVG 1.1 配置文件。 在下文中,它为我们提供了选择来源的选项,它们为我们提供了 默认为在 SVG 中标记的文本,子集为无. 在我们的例子中,这项工作没有字体,如果有,则必须将子集选项从无更改为所有象形图。

以下部分非常重要,如果我们指出 嵌入选项,合成的图像将被合并到文件中,如果我们使用大量的位图图像,这将导致它增加权重。 另一方面,如果我们标记链接选项,如果我们要在网站上使用它们,我们必须小心这些图像,因为我们必须包含我们的图像文件,而且非常重要的是,维护它们的小路。 此选项的优点是文件的重量会轻得多。

SVG 选项屏幕

在高级选项部分,我们找到了 SVG 代码,此选项将指示文件在里面的方式,也就是我们工作背后的代码。 如果您想将 SVG 文件添加到您的个人 WordPress 中,则此选项必不可少,您只需复制代码并将其直接添加到您的 WordPress HTML 编辑器中即可。

我们给您的最后一条建议是,以 SVG 格式保存时, 请记住,如果您使用不同的画板,则只会保留活动的画板。

如果我们想更进一步,将 SVG 效果应用到我们的插图中,Illustrator 为我们提供了一组效果。 为此,我们必须选择一个对象或组。 要应用效果,我们必须选择效果窗口、SVG 过滤器并应用它。

Illustrator SVG 效果

应用 SVG 过滤器时,设计程序会向我们显示一个窗口,其中 出现可应用的过滤器列表。,一旦我们选择了一个,Illustrator 就会向我们展示它的外观,但采用的是光栅化版本。

湍流过滤器 SVG Illustrator

如您所见, SVG 格式是一场革命。 由于其潜力和质量 只要它们正确使用所述格式,它就可以使我们发现的网页在不牺牲性能的情况下更具吸引力。 SVG 已成为设计世界和 Web 开发之间的完美结合。


发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。