Post by account_disabled on Jan 28, 2024 23:06:38 GMT -5
设计与用户体验 如何在 Adobe Illustrator 中优化和导出 SVG 画布和 SVG 设计 HTML 和 CSS 插图 表现 草图 用户界面设计 伊瓦伊洛·格尔切夫 2017 年 7 月 4 日 分享 静止无功发生器 Backward Skip 10s Play Video Forward Skip 10s 当您开始使用 SVG 时，了解如何为渲染 SVG 文件的浏览器创建、导出和优化 SVG 文件非常重要。 但是，在我们开始之前，您需要清楚地了解一件事。SVG 文件的优化从其创建开始，一直持续到导出。与任何 HTML 网页一样，构建质量不佳的 SVG 文件在完成后很难修复。 当然，您可以在导出后使用优化工具，但这种自动化方法可能会以各种意想不到的方式破坏您的文件。拥有良好的手动 SVG 优化概念的扎实工作知识将使您从一开始就处于有利地位。 这正是您今天将学到的内容。 在 Illustrator 中创建 SVG Learn to Code with JavaScript 当您在 Illustrator 中创建用于 SVG 导出的图形时，您需要执行一些步骤和注意事项，以使最终输出针对 Web 进行适当优化。
现在让我们来探索一下它们。 设置正确的色彩空间 Illustrator 与大多数矢量插图软件一样，最初是为印刷制作而设计的，因此其颜色空间默认设置为 CMYK。RGB 更适合网络和屏幕使用，并且比 CMYK 具有更宽的色域（颜色范围）。因此，当您创建新文档时，请确保将颜色模式设 WhatsApp 号码数据 置为 RGB - 如下图所示。 给你的画一个适当的结构 SVG 文件与常规位图图像不同——像素网格。它是具有特定结构的文本文档。 与 HTML 文档一样，您可以单独选择和操作各个元素。为此，您需要使用他们的名字作为参考。我发现在 Illustrator 中进行可视化编辑期间创建这些标签总是比稍后创建要容易得多。 因此，在制作每个图形元素时为每个图形元素指定一个有意义的名称非常重要。以下是在 Illustrator 中创建图形时需要了解的内容： Illustrator图层和图层组名称用作 SVG 组的 ID Illustrator符号名称用作 SVG 符号的 ID Illustrator图形样式名称用作 CSS 类 在下图中，您可以实际看到 Illustrator 文件中的名称如何反映到导出的 SVG。
图层和样式 Learn to Code with JavaScript 网页元素 尽可能简化你的形状 SVG 图中的形状是用坐标点来描述的。绘图的点数越多，文件大小就越大，编辑和维护也就越困难。创建小而高效的文件可以让您以后的生活更轻松。 为了解决这个问题，您需要使用尽可能少的点来创建您需要的形状。这可以通过多种方式实现。 尽可能使用主要 SVG 形状而不是 SVG 路径 line使用、rect、 和等简单元素circle具有一些显着的优点。 首先，简单的形状对人类来说更具可读性——当我们在 SVG 代码中看到圆时，不言而喻，圆就是圆，但路径的代码可以是任何东西，直到我们看到它渲染为止。 其次，简单的形状几乎总是会产生较小的文件大小和较少的代码，这使得它们更易于维护和编辑。您还可以使用它们的直接属性（例如x、y、cx、cy）更轻松地控制它们，而不是像路径那样使用点坐标。 为了明白我的意思，在下图中您可以看到一个简单的圆形形状，一次定义为 SVG 圆形元素，一次定义为 SVG 路径。 形状与路径
现在让我们来探索一下它们。 设置正确的色彩空间 Illustrator 与大多数矢量插图软件一样，最初是为印刷制作而设计的，因此其颜色空间默认设置为 CMYK。RGB 更适合网络和屏幕使用，并且比 CMYK 具有更宽的色域（颜色范围）。因此，当您创建新文档时，请确保将颜色模式设 WhatsApp 号码数据 置为 RGB - 如下图所示。 给你的画一个适当的结构 SVG 文件与常规位图图像不同——像素网格。它是具有特定结构的文本文档。 与 HTML 文档一样，您可以单独选择和操作各个元素。为此，您需要使用他们的名字作为参考。我发现在 Illustrator 中进行可视化编辑期间创建这些标签总是比稍后创建要容易得多。 因此，在制作每个图形元素时为每个图形元素指定一个有意义的名称非常重要。以下是在 Illustrator 中创建图形时需要了解的内容： Illustrator图层和图层组名称用作 SVG 组的 ID Illustrator符号名称用作 SVG 符号的 ID Illustrator图形样式名称用作 CSS 类 在下图中，您可以实际看到 Illustrator 文件中的名称如何反映到导出的 SVG。
图层和样式 Learn to Code with JavaScript 网页元素 尽可能简化你的形状 SVG 图中的形状是用坐标点来描述的。绘图的点数越多，文件大小就越大，编辑和维护也就越困难。创建小而高效的文件可以让您以后的生活更轻松。 为了解决这个问题，您需要使用尽可能少的点来创建您需要的形状。这可以通过多种方式实现。 尽可能使用主要 SVG 形状而不是 SVG 路径 line使用、rect、 和等简单元素circle具有一些显着的优点。 首先，简单的形状对人类来说更具可读性——当我们在 SVG 代码中看到圆时，不言而喻，圆就是圆，但路径的代码可以是任何东西，直到我们看到它渲染为止。 其次，简单的形状几乎总是会产生较小的文件大小和较少的代码，这使得它们更易于维护和编辑。您还可以使用它们的直接属性（例如x、y、cx、cy）更轻松地控制它们，而不是像路径那样使用点坐标。 为了明白我的意思，在下图中您可以看到一个简单的圆形形状，一次定义为 SVG 圆形元素，一次定义为 SVG 路径。 形状与路径