拥抱Web设计新趋势:SVG Sprites实践应用

html(5)&css(3) admin 272800 0 Comment

svg

前言

随着移动互联网的到来,各种高清屏幕移动设备的层出不穷,导致H5应用在移动设备retina屏幕下经常会遇到图标不清晰的问题。

为了解决屏幕分辨率对图标影响的问题,通常采用CSS Sprite,Icon Font,CSS Icon以及SVG以适应@x1屏、@2屏、@3屏,相对比较而言SVG矢量性、缩放无损等诸多优点,更应受前端设计师的青睐,可在许多公司的移动项目应用中却很鲜见,究其主因在于SVG开发学习成本比较高以及在绘制的性能上比PNG要差。此篇文章将从SVG快速导出到SVG、SVG Symbol组件化在项目中实战进行讲解,并提供SVG Symbol快速导出工具,教你如何提高SVG开发效率减少成本。

SVG简介

SVG是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来浏览。

SVG优缺点:

2.Inline SVG,直接把SVG写入 HTML 中

Inline SVG 作为HTML文档的一部分,不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐,需要在页面中插入一大块SVG代码不适合手写,图标复用起来也比较麻烦。

3.SVG Sprite

这里的Sprite技术,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已,控制SVG大小、颜色需要重新合并SVG文件。

4.使用 SVG 中的 symbol,use 元素来制作SVG Sprite

SVG Symbols的使用,本质上是对Sprite的进一步优化,通过<symbol>元素来对单个SVG元素进行分组,使用<use>元素引用并进行渲染。这种方法的解决了上述三种方式带来的弊端,少量的http请求,图标能被缓存方便复用,每个SVG图标可以更改大小颜色,整合、使用以及管理起来非常简单。

①SVG Symbols作为body的第一个元素插入在HTML中使用:

②使用完整路径引用Icon(此方法涉及到跨域问题)

存在跨域问题,同域可以使用。

③js控制SVG写入body进行引用

推荐使用,有效分离结构和展现、解决缓存以及跨域问题。

svg.js:

svg.html:

SVG快速导出

SVG导出工具:

Photoshop CC 2015 导出SVG使用

Ps可以对矢量图层进行导出,即通过矢量工具绘制所在图层或图层文件夹进行导出,若对不是矢量图形进行导出,可能会引起错误或者导出的文件是位图。

SVG导出,建议图形一定要撑满整个画布,若存在间隙,网页使用时图标居中对齐就会比较麻烦。

1.批量导出SVG
批量导出SVG,只需在矢量图层或失落图层文件夹名后添加相应格式后缀(如.svg),依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选。但是此方法会根据icon实际大小进行导出,若icon图标存在小数导出就不太适用,我们需要手动去调节。

export

2.设置导出为单个导出
设置导出为单个导出,选中矢量图层单击右键,依次点击“导出为->设置参数->导出”,此方法可以设置SVG的图像实际大小,以及画布大小。

导出为:

export2

设置导出SVG图像实际大小,以及画布大小:

export1

SVG Symbol自动化合并生成

Photoshop导出来的是单个SVG文件,需要将这些单个SVG文件进行合并生产symbol的SVG,这样才能通过symbol+use进行引用。可以使用手工合并,推荐使用工具,安利给大家一个专门用于处理SVG Symbols用的glup插件gulp-svg-symbols

下面我们就来以一个实例一步一步来使用下这个插件。

首先新建一个文件夹,目录结构如下图所示:

安装gulp-svg-symbols插件,若没有预先安装gulp请先行安装:

gulpfile.js写入如下执行任务:

执行任务导出svg-symbols:

SVG Symbol可视化工具

为了方便快速批量合成SVG图标生成 SVG Symbol,提高效率,我们开发了简易版的SVG Symbol可视化工具svg tool

svg tool使用:

打开后界面

svgtool

使用范围:

主要支持单层结构SVG进行合并生产symbol,对于多层结构SVG合并注意手动修改对应颜色。

功能:

svg tool下载地址:

mac:http://jdc.jd.com/svg/svgtoolfile/svgtool-1.0.0.dmg

win32: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-ia32.zip

win64: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-x64.zip

参考资料:

Reproduced please indicate the source: 飞嗨_分享互联网 » 拥抱Web设计新趋势:SVG Sprites实践应用

Like (0) or Share (0)
Guest Post my comment   Change account
Cancel comment

emoj
(0)person posted

Effective,Professional,Conform to SEO

Contact us