设计师使用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 删除。

发表于

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏Java3y

常用的CSS框架

常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的C...

3278
来自专栏IMWeb前端团队

Tetris Game / 俄罗斯方块 JavaScript/TypeScript源码

Tetris Game / 俄罗斯方块 浏览器兼容 ie8+, chrome, firefox ... 小时候穷,买不起游戏机,现在用js写一个来弥补一下童...

17810
来自专栏有趣的Python

验证码爬取并识别-云大urp教务系统大作战(1)

1. 穷举爬取urp的验证码 因为小道消息得知urp的验证码是有限数量的,因此通过数百万次的请求,下载所有验证码图片到本地,并生成了一份验证码图片的文件名的文...

3138
来自专栏应用案例

RIOT 与 ImageOptim - 两款 Win 和 Mac 上好用的免费图片优化无损压缩工具

不管你是网站站长、自媒体、博客作者、摄影师、设计师,还是需要在网上分享传输图片/照片的人,都希望自己上传图片耗时更短、图片体积更小,别人浏览时又能更快下载显示出...

2995
来自专栏用户2442861的专栏

如何评价 GitHub 发布的文本编辑器 Atom?

https://www.zhihu.com/question/22867204#answer-31728806

592
来自专栏DeveWork

前端页面中 iOS 版微信长按识别二维码的bug 与解决方案

iOS 版微信(目前为6.2.2版本)内置浏览器中长按识别二维码有一个bug 会导致无法识别,安卓下就可以。本文将为你重现这个bug 并给出实际中的解决方案。 ...

2438
来自专栏尾尾部落

把Safari当chrome用(插件篇)

主页:http://markdown-here.com 点评:在网页的编辑器中用markdown的语法输入内容,然后右击选择Markdown Toggle或者...

782
来自专栏CDA数据分析师

那人的Excel技巧好烂,他做1个小时,别人29秒搞定

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 ”智能表格“在Excel中就是叫表格,恐怕是Excel当中最不起眼最受人忽视,却极其实用的功能之一,可以...

1755
来自专栏菩提树下的杨过

整理了二个基本的css库(高手请绕道)

前一阵公司唯一的前端开发人员走掉了,短期内也没人顶上来,所以切页面/js这种活儿只能咱自个儿揽过来了,花了大半天捣鼓了下css,整理了二个基本的css库,方便以...

17110
来自专栏数据小魔方

SPSS竟然都能做数据地图了~~~

数据地图SPSS篇 ▼▼▼ 最近在做数据地图专题,搜集了好多能够实现数据地图可视化的软件操作技巧,唯独漏掉了SPSS。 总觉得SPSS作为一个傻瓜式菜单操作的...

4607

扫码关注云+社区