Adobe Illustrator导出选项

这不是一小段代码，而是提醒我经常查找的内容。 在Adobe Illustrator中创建SVG文件时，有两种不同的导出文件的方法。 两种方法都包含一些选项，其中一些我完全忘记了它们的含义和选择内容。

方法1：另存为...

您可能不会使用此方法来保存SVG以便在网络上使用。 这主要是为了保存主文档。 实际上，您可能只想直接以Illustrator格式保存。 您将使用其他一些导出选项导出到Web。

在Adobe Illustrator中将File > Save As...为SVG的最常见方法是从主菜单中选择“ File > Save As...选项。

Illustrator将启动一个对话框，询问您如何命名文件以及将文件保存在何处。 更重要的是，它还会询问将哪种类型的文件另存为SVG。 未压缩SVG（svgz）。 普通SVG。

单击保存按钮，将出现另一组选项。 这是我的记忆力常常使我失望的地方，我必须在网上搜寻答案。 这是在Adobe Illustrator中保存SVG文件的最佳方法的屏幕截图。

选择文件>另存为…时，Adobe Illustrator CC（2017）中的SVG选项。

• SVG配置文件 ：这在开始的<svg>标记上设置XML文档类型。 SVG 1.1是最新版本，涵盖了最广泛的支持，并且可能是最合适的选择。 其他所有内容都是旧版本或SVG 1.1的子集，在选择它时我还没有遇到任何问题。
• 字体>类型 ：选择“转换为轮廓”将确保导出文件中的所有键入文本都是矢量路径而不是字形。 字形有可能不会被渲染，但是矢量路径始终是个大大拇指。
• 选项>图像位置 ：如果在文件中使用了光栅图像（读取：JPG，PNG，GIF），则我们要选择“链接”选项。 否则，光栅图像将被嵌入文件中，并通过增加文件大小以包括那些额外的资产而从SVG中吸走性能优势。 最好将它们引用为链接，并确保将那些源文件包括在与SVG文件相同的目录中。
• 选项>图像位置> Preserve Illustrator编辑功能 ：这对SVG文件的输出有很大的影响。 由于您可能在此处保存了“原版”副本，而不是在网络上供我们使用，因此请选中此复选框。 这将在下一次打开文件时保留Illustrator专有内容（例如指南）。 未经检查将意味着类似的东西将被剥夺并丢失。
• 高级选项> CSS属性 ：我为此选择了“ Presentational Attributes”，因为它会将属性（例如填充，笔触等）置于最低的特异性水平。 例如<path stroke="black" stroke-width="2" ... /> 。 这会设置元素的样式，但是在CSS中很容易覆盖。
• 高级选项>小数位数 ：如果您浏览了<path>的代码，那么您知道指定这些形状的值可以是非常精确的。 但是，很多时候这些都太精确了，会增加SVG文件的整体大小。 由于您可能会在此处保存一个主文件，因此可以将其保持在较高水平，因为文件大小并不重要。
• 高级选项>编码 ：我对UTF编码不是很满意，但是将其保留为“ Unicode UTF-8”确实可以确保向后兼容。 同样，UTF-8文件的大小往往小于UTF-16，因此这本身就是一个胜利。
• 高级选项>响应式 ：取消选中此选项将在SVG上设置固定的height和width属性。 我检查此选项，因为它使我可以在代码或CSS中设置这些属性。

方法2：导出为

从Adobe Illustrator获取SVG的另一种方法是从主菜单中选择“ File > Export > Export As...选项。 但是，还有第二种方法可以通过使用Illustrator工作区中的“动作”面板来实现。

如果您知道要直接在Web上使用此文件并且以后不打算修改设计，则此选项非常理想。 它提供较少的设置方式和几个选项，这些选项使文件可以进一步优化文件以提高性能。 实际上，最佳做法是在文件的副本上而不是在主文件本身上执行此操作，因此有一个版本可以稍后在Illustrator中打开和编辑，而另一个版本更适合在生产网站上使用。

选择文件>导出>导出为...时，Adobe Illustrator CC（2017）中的SVG选项...

• 样式 ：前面我们在方法1设置中介绍了此样式 ，但是在这里选择“演示属性”是因为这是一种在最高级别的属性上组织属性的方法。 这增加了标记的顺序，提高了我们使用CSS设置后续属性样式的能力的灵活性，并且通常导致文件较小。
• 字体 ：这是我们上面介绍的另一种字体 ，但是选择“转换为轮廓”会将字形替换为字符的矢量路径，以确保文本正确呈现。
• 图像 ：这是我们上面介绍的另一种图像 ，但是选择“链接”将阻止将嵌入的光栅图像打包到SVG中，这会使文件更大。
• 对象ID ：此设置为Illustrator的行进顺序提供了如何在标记中命名ID的方法。 您可以告诉它根据文件中图层的命名方式来命名ID。
• 十进制 ：代码中的小数位数较少意味着文件较小。 在很多情况下，将其设置为1是理想且可以的，并且在设计上不会有明显的不同，但是2通常是安全的。 无论哪种方式，都值得检查SVG的呈现方式。
• 缩小 ：是的，请！ 像缩小CSS一样，这使代码缩减以减少空格并提高Web性能。
• 响应式的 ：与第一种方法完全一样，选择此选项非常理想，因为否则会将固定的height和width属性放置在SVG上。

翻译自: https://css-tricks.com/snippets/svg/abobe-illustrator-export-options/