SVG图标深度解析(1)

来源:网络   作者:热心网友   发布时间:2019-04-15    浏览次数:9
收藏到:

在UI设计中,为了达到视觉效果图的完美呈现,视觉设计师、研发人员,往往要耗费大量的时间、经历。其中之一,就是icon的适配。根据屏幕的不同,要输出不同分辨率的icon切图,增加了工作量,也大大影响了效率。今天小编为大家解决字体(SVG)图标设计过程中的困惑与问题,帮助设计师专业地进行字体图标的设计与输出。


为了解决屏幕分辨率对图标影响的问题,SVG格式的icon出现了,这大大减轻了前端的负担。同时,也对设计师有了新的要求,提供SVG格式的图标。

 

网络上有很多关于SVG的介绍,但基本是针对于开发人员的讲解,对于视觉设计师来说,往往看的云里雾里。所以今天我们就从视觉设计的角度,对SVG图标进行深度解析。



一、什么是SVG

 

简单的说,SVG就是一种矢量图形格式。不像其他一些基于矢量的文件会占用比较大的资源和空间,SVG是纯代码的形式。这意味着它方便,更轻量。

 

SVG有哪些优势呢?

 

1、任意放缩

因为是矢量图形,用户可以任意缩放图像,而不会破坏清晰度与细节等。

 

2、文件较小

矢量图像是用点和线来描述物体,所以与位图(如GIF、JPG、PNG)相比,SVG文件要小很多,并且质量高。

 

3、超强显示

因为是矢量图像,SVG图像在屏幕上总是边缘清晰,显示效果极佳。

 

4、易于编辑

支持 CSS 样式:和普通字体一样,可以利用 CSS 来定义大小、颜色、阴影、hover 状态、透明度、渐变等等…

 


二、SVG图标的运用

 

上面我们讲了SVG的很多优势

 

既然SVG那么优秀,那技术人员是不是可以直接拿来开发使用?

 

我们一起看下图

通过查看前端代码可以看出,单个SVG格式的图标代码已经很长了,这就导致在实际研发中不方便维护。

 

为了解决上面问题,诸如Iconfont之类的平台应运而生。

 

IconFont是什么?

 

Iconfont主要相当于一个字体图标的处理平台。使用SVG代替字体文件,进行转换和封装,优化为webfont格式。使原本冗长的代码轻量化,便于开发使用。

 

同时,他也为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。


 

三、SVG图标的制作

 

我们平时制作图标,主要用Ai、PS、Sketch。

这三种软件,都能支持 SVG 格式导出,但 PS和Sketch 对 SVG 的导出支持的还不是很完善,有时会出现一些奇怪的现象,如图形的路径混乱了,图标倾斜了等不可预知的情况,因此如果想要处理或者生成 SVG 的文件,目前 Ai 仍是较好的选择。

如何定义尺寸?

 

我们知道,平时制作图标,都是基于像素作为尺寸参照。16/24/32/……会有一个大小参照。同一个产品/界面,这里我用16,那里或许就需要用32,其他地方或者又用到别的尺寸……总之,我们会根据页面/场景进行定义。

但是SVG图标,同一图形,视觉设计师只需提供一个SVG格式图标,技术同学通过平台下载就可以随意调用、调整尺寸以及调配颜色。

 

这种方式高效便捷,但对于很多视觉同学,却往往会有这样的困惑:制作过程中如何定义尺寸?因为SVG图标相当于跟具体的页面脱节了。引出另一个问题就是,如何保证视觉呈现的一致性?

 

我们来看字体的设计

设计师在设计字体时,也是和具体页面脱节的。但同一字号的不同文字、符号的搭配,虽大小不一,但并没有违和感。而不同字号的文字、符号放在页面中时,也都很和谐统一。

 

123共3页
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/7810.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!