设计师使用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 条评论
登录 后参与评论

相关文章

来自专栏SDNLAB

P4虚拟化数据平面

背景 现在SDN已经有了在数据平面的编程能力,这使得网络设备(包括硬件)可以被重新编程以解析自己定制的协议和执行定制的功能。 但是,数据平面的编程能力还没有发挥...

3106
来自专栏Brian

Effective Debugging-高效调试

概述 最近在看《Effective Debugging》,作者(Diomidis Spinellis)将30多年的系统开发和调试的经验融入到书中,从策略、方法以...

3428
来自专栏北京马哥教育

分布式文件系统Mogilefs介绍

一、分布式文件系统简介: 什么是分布式存储: 分布式存储系统,是将数据分散存储在多台独立的设备上。传统的网络存储系统采用集中的存储服务器存放所有数据,存储服务器...

2715
来自专栏互联网高可用架构

如何设计一款多场景分布式发号器(Vesta)

2603
来自专栏求索之路

从零开始仿写一个抖音App——日志和埋点以及后端初步架构本项目的 github 地址:MyTikTok

拿 Java 来说:比如我们有两个服务 A、B 在两个服务器上,此时我们要在 A 上调用 B 的服务获取其上的数据 Foo。那么在 A 中可以写成 Foo f ...

1855
来自专栏腾讯Bugly的专栏

Android Patch 方案与持续交付

Android 不仅系统版本众多,机型众多,而且各个市场都各有各的政策和审核速度,每次发布一个版本对于开发同学来讲都是一种漫长的煎熬。相比于 iOS 两三天就能...

2875
来自专栏大数据

Scrapy递归抓取简书用户信息

好久没有录制实战教程视频,大邓就在圣诞节后直接上干货。 之前写过一期【视频教程-用python批量抓取简书用户信息】的文章,是自己造的轮子,今天我趁着刚入门sc...

2437
来自专栏python爬虫实战之路

12306自动刷票下单-查票

上篇写了12306登录,隔了快一个月了,才准备动手写下单篇,真的要非常感谢博客园的 Asimple朋友,如果不是看到你的留言,我几乎都忘了要写下篇了,这一点在简...

3358
来自专栏Python中文社区

100行Python代码实现自动抢火车票

又到一年一度春运大会,2017年春运抢火车票还是那么难,各大互联网公司都推出抢票服务,只要加钱给服务费就可以增加抢到票的几率,有些代售火车票点,说给100元服...

2768
来自专栏IT大咖说

2018年1月份最热门的JavaScript开源项目

本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nh...

2738

扫码关注云+社区