我希望使用一个网站的SVG标志-让它在所有设备的响应性设计看起来很棒.

但是从there are issues开始,我想要支持尽可能多的设备和浏览器.加载速度也是一个重要的考虑因素.Adobe Illustrator中的导出设置如何适应这一切?

在Illustrator中,有几个用于SVG导出的选项.第一,which SVG profile is best?

在此处输入图像描述

我想SVG Tmall的文件大小要小一些吧?很多设备都支持SVG Tiny吗?最重要的区别是什么?(无需阅读this W3 monster.)

其次,我假设图像位置的最佳 Select 是"链接"?(请参阅感叹号后的说明.)

在此处输入图像描述

或者,浏览器如何支持"嵌入"选项?

在此处输入图像描述

谢谢!

附注:将有一个后备alpha-png选项,但我希望SVG 得到尽可能好的支持.(想想看,这是一种退路 选项(如JPG)在这种情况下可能是最好的服务,因为alpha-PNG本身需要一个针对较旧IE的解决方案.)

Update:还可以配置更多选项.我不是在处理文本,所以我看到的唯一相关的是小数位.对于徽标,最大显示为200x200px(因此在Retina显示屏上为400x400px),"3"是最佳设置吗?或"2"以最小化文件大小?

在此处输入图像描述

推荐答案

enter image description here

SVG profiles

  • SVG 1.0:所有现代桌面和移动浏览器都支持SVG 1.1,所以千万不要 Select 此选项.
  • SVG 1.1: You will almost always want this.
  • SVG Tiny/Basic:这是用于移动设备的SVG的子集.只有少数设备支持SVG Tmall而不是完整的规范,所以还是 Select SVG1.1吧.

注意:SVG Tiny不会减少文件大小,它只是SVG的一个子集,适用于低处理能力的设备.它将丢弃渐变、不透明度、嵌入字体和过滤器.

埃里克·达尔斯特伦说:

所有SVG 1.1完整查看器应能够显示所有SVG 1.1 微小/基本内容(根据规范),可能是所有SVG 1.2也是Illustrator制作的微小内容.

Fonts注:如果您的图像中没有任何文本,则此设置无关紧要.

  • Adobe CEF:如果你想在浏览器中显示,千万不要使用这个选项.这是Adobe在SVG文件中嵌入字体的方式,据我所知,只有Adobe的SVG查看器插件才支持这种方式.

  • SVG:它将字体嵌入为SVG,Firefox不支持该字体,但如果您打算只支持移动设备(通常运行Webkit),则这是一个很好的 Select .

  • Create outlines: you will want to do this most of the time,除非您有大量的文本.如果你有大量的文本,你会想要用WOFF嵌入字体,但是你必须手动完成.

Subsetting:

  • 无:这将否定先前的设置,并且不会嵌入任何字体,如果您不关心字体是否会退回到用户计算机中的其他字体,请 Select 此选项.

  • 如果 Select 嵌入字体,则为Only Glyphs used: you will want this most of the time.它只嵌入使用的字符,所以不会增大文件大小.

  • [子集睡觉]:这个比较清楚,可以 Select 包含整个字体或者子集.只有当您的SVG是动态的,并且文本可能会根据用户输入更改时,它才有用.

Images:这仅在包含位图图像时才重要

  • Embed: this is usually what you want时,它将图像编码为数据uri,这样您只需上传一个文件,而不是将SVG文件与其伴随的位图图像一起上传.

  • 链接:仅当您有多个引用一个位图文件的SVG文件时才使用此选项(这样就不会在每次呈现SVG文件时都下载该文件).

请注意,如果SVG通过<img>标记显示,则不会显示链接的位图图像,因为img不允许加载外部资源.此外:webkit有一个漏洞,即使嵌入了svg文件,也无法在其中显示位图图像.简而言之:如果你想嵌入或链接位图图像,不要使用<img>.

Preserve Illustrator Editing Capabilities

我更喜欢将.ai文件保存为我的源图像,并将SVG文件视为Export for web特性.这样,您就可以专注于减小文件大小,并拥有具有所有编辑功能的矢量文件的原始副本.所以不要 Select 这个.

Decimal Places

默认的3是一个正常的设置,你几乎可以忘记它.

但是,如果您的路径非常复杂,并且有很多点,则将此设置降低到1甚至0将大大减小文件大小.但您必须小心,因为贝塞尔曲线段对此设置非常敏感,它们可能看起来有点扭曲.因此,如果您降低此设置,请始终确保它在浏览器中看起来可以接受.

Encoding

字符编码背后的解释是相当技术性的,它只涉及包含文本的SVG文件.The most likely encoding you need is UTF-8,除非你知道自己在做什么,否则不要改变这一点.

Include slicing data

这会将元数据inflating 到SVG文件,除非您计划稍后在Illustrator中打开SVG文件并找到切片(如果有),do not check this

Include XMP

更多关于该文件的元数据,您可以read on XMP here.do not check this

Responsive

请注意,假设您将通过CSSzoom 包含的图形,此设置将从SVG根 node 中删除Height和Width属性.但是,在某些情况下,您希望单个图形声明其大小.在这些情况下,请确保取消选中此设置.

Output fewer 100 elements

如果您没有文本,此选项将灰显.SVG不支持字距调整表,因此,某些字符序列看起来间距太大,即AVA.Illustrator通过添加tspan个元素并稍微调整字符位置来解决问题.这给文件do not check this unless you care more about file size than text appearance增加了一点inflating .

Use 100 element for text on a path

如果路径上没有文本,则此选项将灰显.浏览器在将文本放置在路径上时往往会有很大不同,因此Illustratortry 通过对字符应用旋转和位置来提供帮助,而不是将作业(job)留给浏览器.do not check this unless you care more about file size than text appearance美元.


一般说来,我建议您大致了解一下SVG,您会发现它看起来很像HTML,并且允许您对Illustrator中无法完成的事情进行调整.

Html相关问答推荐

将小文本放在输入字段的右侧

HTML图像无法正确放大和缩小规模

css网格区域的布局不展开,也不显示滚动条

Xpath:提取标签之间的文本,但一旦出现嵌入标签就停止

子元素以元素X开始和结束的元素的XPath?

需要帮助实现悬停动画效果

如何将CSS滤镜仅应用于背景图像

如何使用CSS在<;表格中<;SVG&>?

如何将内容元素放在侧边栏旁边?

带有图标和悬停过渡的CSS按钮

Chatbox底部显示新消息,并向上推送旧消息

浏览器是否可以呈现存储在代码点0x09处的字形?

获取标准的Python脚本,以便使用FASK对网站进行Flask

如何在 Bootstrap 5 中将两个导航栏元素放在末尾?

:invalid Select 器的惰性判断

如何使用CSS Select 表亲元素

在锥形渐变进度条内创建空白的问题

从右到左支持百分号

如何创建带有偏移边框线的双色边框?

Bootstrap Grid System col 无法正常工作