设计师使用SVG的必读文章

导语-“本文适合设计师浅读,适合有追求的设计师和UI开发同学仔细研读“

近来腾讯云业务已经全面拥抱高清高质的SVG,幸福奔跑在全量高清的康庄大道上。

设计师主要是利用AI,和Sketch进行SVGicon,SVG拓扑图的绘制。

但是,单纯依靠软件一键导出的SVG图形,会因为每位设计师的绘制导出方法不同,在实际使用中出现或多或少的应用问题。从无数的坑里摔倒又爬起,身经百战的我们今天来此来探讨一下,绘制一个供Web使用的SVG图形有哪些必备的注意点,以下我们以一个SVG icon为例:

首先,针对图标,我们需要“建立复合路径”

那么什么是复合路径呢? 框选你的SVG元素,右键打开菜单,会出现 “建立复合路径” 的选项。

视觉设计师们使用复合路径,一般是为了处理下图的情况。通过路径复合,让白色菱形方块可以镂空。 但是,很大部分的SVGicon,是不需要处理镂空的,这种情况下,大家是否依旧继续“建立复合路径”这个选项,就是个迷了....

但是,“建立复合路径” 对一个优秀的SVGicon的编写,是很重要的!我们来看下图的2段SVG代码的对比,很明显,使用了复合路径的SVG在相比之下,把所有图标内容都绘制在一个<Path>里了,即缩减了SVG的文件大小,同时,一个icon对应一个唯一路径的结构,大大提升了脚本操作的便利性

再次,Sketch导出不要利用"小画板"

Sketch,Ai 都提供了一个直接在页面中层叠画板,再“按画板导出”SVG图形的功能,面对要“导出大型拓扑图的多个SVGicon”这类需求,直接绘制小画板是很方便的一种方式。

但是,如果通过Sketch操作以上步骤,生成的SVG代码与一个健康SVG代码对比,是下图这样的:重点差别为:外框多了<g transform="122" >这样的重置样式。(transform的意思是指位移,向x位移122px,向y位移122px的意思)。

这就是小画板重叠大画板导致的问题了。因为绘制icon的polygon元素的具体定位,是根据大画板的顶点x,y进行定位的;所以这中间的差值,需要依靠外框的transfom位移回去。

这样导出的代码冗余太多,内部icon的绘制定位也需要依靠外部位移才能正确显示,是不健康的。故,在Sketch中请勿使用小画板导出SVG元素,而AI是可以放心使用的,当然最安全的方式,还是新建一个文件,独立进行icon导出。

最后,敲黑板的导出设置!

你也许觉得上面2个提示比较小众,那么敲黑板的必读环节来了。

在图标导出的设置界面,是设计师们最容易迷茫或出错的部分,首先,这里贴一下最适用于腾讯云业务的SVG选项:

(如果你没空做个好学生,把上图的黄金答案背下来,也是不需要再看后面的习题分析了)

我们再来看看各个选项的真实含义是什么。

A.样式

很多设计师会习惯性选择内部CSS的选项(毕竟是默认),这会带来很多隐患。

如下图所示,左侧是使用“内部css”的代码,右侧是使用“内联样式”的代码。它们的差别在于CSS编写的位置。在单个SVG的时候,2种方式都是健康的,可是如果业务中使用了SVG雪碧图,那图1就存在大大的隐患。

" .a "," .b "的类名,是AI通过默认或用户自定的图层名称添加的,大量SVGicon以雪碧图的形式集合在一起,这些style就被打包在一起了。同类名的样式就必然会发生互相污染;这类污染体现在IE9等低版本浏览器对SVG的读取上。故,针对需要SVG雪碧图合并的业务,选择内联样式的导出方式,更为安全健康。

腾讯云业务就曾经在此处踩过坑,在IE9浏览器上使用SVG雪碧图,会出现大量的颜色尺寸错误,其原因就是有个别icon,在导出的时候,使用了内部CSS的方式。

B.字体

使用 “ 转换为轮廓 ” 或 “ SVG ” 选项,导出的代码差别是什么呢?

很好理解,这是1个保留文字为Text的SVG,和将文字转为路径的SVG的对比。这里,大家就要按需选择了。如果选择维持TEXT版本,我们看到,样式里存了字体的属性,也就是说,如果用户的电脑没有PingFang这个默认字体,是会选择系统的默认字体进行替换的。设计师要考虑是否可以接受这种字体的变化 。当然,全部轮廓的SVG文本,是不能再HTML结构里被SEO找到的,后期维护性也非常低。

C.图像

在SVG导出里,图像是一个巨坑。

首先,嵌入和保留的效果基本是一样的,而嵌入和链接的差别,主要在于:一个是将图标转换为Base64的形式存储,一个是href引用。狭义的理解用链接的方式导出,就是让 “ SVG作为一张图片,引用了一张图片 ”,听起来,就不是个小坑。

很多设计师常迷茫的问题:“ 为什么我导出的SVG图片好好的,但是被UI开发同学引用的时候,就出错了呢?”

其实,这是因为,单独在浏览器中查看这个SVG,嵌入或是链接的方式都没有问题;但如果使用<img>标签来引用这个SVG,浏览器中的 img 是不允许加载外部资源的,也就是我们说的,“一个图片,咋还能还引用了一张图片呢 ”。也就是说,上图 “云服务器” 的例子,在Web kit内核下的浏览器,用作阴影的位图图像不会显示,而IE下则直接是一个图片错误示意。

D.对象ID

这个就跟前面内嵌CSS,还是内部CSS有很大关系了。鉴于选项清晰,我们也不推荐使用内部CSS方式,就不赘述了。

E.小数

不废话了,默认 3,保平安,即保留小数点后三位 ,一般不会有太大的问题。

如果SVG图的体积格外大,可以按需将小数点降到2或者1,但是这回导致导出SVG与源文件的定位吻合度降低,一些Path的图形可能发生形变,请大家按需选择。

F.缩小和响应

缩小:压缩SVG代码,删除不必要的空格,来减小SVG图片体积。因为我们的Maxim工具上传时自动会做一次这样的压缩,所以在日常导出时不需要依靠AI的简易压缩了。但是其他业务的设计师同学,可以按需选择。

响应:如下图差别,勾选响应的SVG图形会被赋予width=“100%”,height=“100%” 的属性,图片内容将根据外框大小进行自动缩放。在腾讯云的日常业务中,我们建议保持固定大小。其他业务的设计师同学,可以按需选择。

Tips

A. 来自 不留名同学  的实践经验补充:

“在新版的AI 2018输出svg图标的时候,新增了通过另存为就可以导出SVG的方式,SVG的设置不会自动保存上次勾选的设置,每次都会回退成系统默认设置。”

所以推荐大家依旧使用导出的方法进行批量SVG的存储:

B. 来自 不留名同学  的实践经验补充:

使用画板导出的时候,设置在比较隐蔽的位置,大家注意:

当然,以上这些方式都是针对AI导出SVG的设置考虑的。若是新建画板的Sketch导出SVG,不支持设置这些选项。若按它默认的导出格式,在腾讯云目前的业务中使用是很合适的,是基本满足下图的黄金答案的。其他业务请按需选择。

最后的最后,不管你是不是个好学生,请把下图的黄金答案背下来,它将助你继续在SVG高清大道上幸福奔跑。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

16820
来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

68690
来自专栏大前端开发

微信小程序之生成图片分享

通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径。小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该...

99730
来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

28140
来自专栏Youngxj

给网页添加一个QQ客服悬浮框

55270
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

39680
来自专栏听雨堂

用多个类别来进行微调

          有时css的类基本设计好了,对于大多数的标签都能够实用,但却又个别的不行。如,菜单项,绝大多数都是2个字的,总体上按照这个宽度来设计,但还有...

23780
来自专栏Python自动化测试

selenium中对富文本的处理

在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是...

36730
来自专栏张戈的专栏

解决SecureCRT的vim中为下划线而无高亮问题,附最佳护眼配色方案。

今天第一天上班,发现新公司也是用的最熟悉的 SecureCRT 终端。领到自己的办公电脑后,第一件事就是下载并安装了 SecureCRT 7.1。并设置了以前最...

62450
来自专栏IMWeb前端团队

移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

1.2K70

扫码关注云+社区

领取腾讯云代金券