草庐IT

html - 从 Illustrator 为 Web 导出 SVG 的最佳设置？

coder 2023-07-30 原文

我希望为网站使用 SVG 徽标 - 使其在适用于所有设备的响应式设计中看起来很棒。

但由于 there are issues ，我想支持尽可能多的设备和浏览器。加载速度也是一个重要的考虑因素。 Adobe Illustrator 中的导出设置如何适应所有这些？

在 Illustrator 中，有多种 SVG 导出选项。首先，哪个 SVG 配置文件最好？



我认为 SVG Tiny 的文件大小较小？是否有许多设备支持 SVG Tiny？最重要的区别是什么？ (无需阅读 this W3 monster 。)

其次，我认为图像位置的最佳选择是“链接”？ (见感叹号后的说明。)



或者，浏览器如何支持“嵌入”选项？



谢谢!

P.S. There will be a fallback alpha-PNG option, but I want the SVG to be supported as best as possible. (Come to think of it, a fallback option — like a JPG — would probably be the best served in this case since alpha-PNG itself needs a solution for older IE.)



更新:还有更多选项可以配置。我没有处理文本，所以我看到的唯一相关的是小数位。对于徽标，要显示为最大 200x200 像素(因此在 Retina 显示器上为 400x400 像素)，“3”是最佳设置吗？或“2”以最小化文件大小？

最佳答案


SVG 配置文件

  • SVG 1.0:所有现代桌面和移动浏览器都支持 SVG 1.1，所以永远不要选择这个选项。
  • SVG 1.1:你几乎总是想要这个。
  • SVG Tiny/Basic:这是用于移动设备的 SVG 子集。只有少数设备支持 SVG Tiny 而不是完整的规范，所以选择 SVG 1.1。

    • 注意:SVG Tiny 不会减小文件大小，它只是 SVG 的一个子集，足以满足低处理能力设备的需求。它将丢弃渐变、不透明度、嵌入字体和过滤器。
    埃里克·达尔斯特伦 说:

    All SVG 1.1 full viewers should be able to display all of the SVG 1.1 Tiny/Basic content (according to spec), and probably all of the SVG 1.2 Tiny content that Illustrator produces too.


    字体 注意:如果图像中没有任何文字，则此设置无关紧要。
  • Adobe CEF:如果您打算在浏览器中显示它，请不要使用此选项。这是 Adob​​e 在 SVG 文件中嵌入字体的方式，据我所知，这仅受 Adob​​e 的 SVG 查看器插件支持。
  • SVG:这会将字体嵌入为 SVG，Firefox 不支持它，但如果您打算仅支持移动设备(通常运行 webkit)，这是一个不错的选择。
  • 创建轮廓:大部分时间您都希望这样做 ，除非您有大量文本。如果您有大量文本，您将需要使用 WOFF 嵌入字体，但您必须手动执行此操作。

    • 子集 :
  • 无:这将否定之前的设置，并且不会嵌入任何字体，如果您不关心字体回退到用户计算机中的其他字体，请选择此项。
  • 仅使用 Glyphs:大多数情况下您会想要这个 如果您选择嵌入字体。它只嵌入使用的字符，因此它不会增加您的文件大小。
  • [子集的其余部分]:这很清楚，您可以选择包含整个字体或它的子集。只有当您的 SVG 是动态的并且文本可能会根据用户输入而更改时，它才有用。

    • 图片 :这仅在您包含位图图像时才重要
  • 嵌入:这通常是您想要的 ，它将图像编码为数据 uri，以便您只需上传一个文件而不是带有它的伴随位图图像的 svg 文件。
  • 链接:仅当您有多个引用一个位图文件的 svg 文件时才使用它(因此它不会在每次渲染 svg 文件时下载)。

    • 请注意，如果 SVG 通过 <img> 显示，则链接的位图图像将不会显示。标签，因为 img不允许加载外部资源。此外:webkit 有一个错误，即使您嵌入它们，也不会在 svg 文件中显示位图图像。简而言之:使用普通 <svg>如果您打算嵌入或链接位图图像，请不要使用 <img> .
    保留 Illustrator 编辑功能
    我更喜欢将 .ai 文件保存为我的源图像，并将 SVG 文件视为 Export for web特征。这样您就可以专注于减小文件大小并拥有具有所有编辑功能的矢量文件的原始副本。所以不要选择这个。
    小数位
    默认3是一个理智的设置，你几乎可以忘记它。
    然而，如果你有一个非常复杂的路径，有很多点，将这个设置降低到 1 甚至 0 将大大减少文件大小。但是你必须小心，因为贝塞尔曲线段对这个设置非常敏感，它们可能看起来有点扭曲。因此，如果您降低此设置，请始终确保它在浏览器中看起来可以接受。
    编码
    字符编码背后的解释相当技术性，它只涉及带有文本的 svg 文件。 您最可能需要的编码是 UTF-8 ，除非您知道自己在做什么，否则请勿更改此设置。
    包含切片数据
    这会给您的 SVG 文件增加元数据膨胀，除非您打算稍后在 Illustrator 中打开您的 SVG 文件并找到您的切片(如果您有切片)，不检查这个
    包括 XMP
    有关文件的更多元数据，您可以 read on XMP here . 不检查这个
    响应式
    请注意，此设置将消除 svg 根节点的高度和宽度属性，假设您将通过 css 缩放包含的图形。但是，在某些情况下，您希望单个图形声明其大小。请确保在这些情况下取消选中此设置。
    输出较少 <tspan>元素
    如果您没有文本，这将显示为灰色。 SVG 不支持字距调整表，因此，某些字符序列看起来间隔太大，即 AVA . Illustrator 通过添加 tspan 来解决问题元素和稍微调整字符位置。这给文件 增加了一些膨胀。除非您更关心文件大小而不是文本外观，否则不要检查此项 .
    使用 <textpath>路径上文本的元素
    如果路径上没有文本，这将显示为灰色。在将文本放置在路径上时，浏览器往往会有很大差异，因此 Illustrator 试图通过将旋转和位置应用于 Angular 色而不是将工作留给浏览器来提供帮助。 除非您更关心文件大小而不是文本外观，否则不要检查此项 .

    一般来说，我建议您查看 SVG，您会发现它看起来很像 HTML，它允许您调整在 Illustrator 中无法完成的事情。

    关于html - 从 Illustrator 为 Web 导出 SVG 的最佳设置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13236365/

    IllustratorhtmlstrongbrSVGcssimageadobe-illustrator

    有关html - 从 Illustrator 为 Web 导出 SVG 的最佳设置？的更多相关文章

    1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    2. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

      很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

    3. ruby-openid:执行发现时未设置@socket - 2

      我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

    4. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    5. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    6. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

      我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

    7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

    8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

      所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

    9. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

      我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

    10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    随机推荐