快捷搜索:
来自 新京葡娱乐场网址 2019-06-21 11:48 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

拥抱Web设计新趋势

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

2016/07/30 · HTML5 · 1 评论 · Sprites, SVG

原文出处: 凹凸实验室   

图片 1

图片 2

前言

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

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

关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了。这篇文章主要说明svg图标的使用和制作。

SVG简介

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

  • 演示地址
  • 代码

SVG优缺点:

优点 缺点
1.缩放无损还原,显示清晰 1.SVG在绘制的性能上比PNG要差
2.语义性良好 2.局限性,对应单色或普通渐变没什么问题,但对不规则的渐变以及特效叠加效果显示不全
3.可用CSS控制图标样式以及动画 3.兼容性稍差,android4.1才开始支持
4.减少http请求 4.学习应用成本较高
SVG Sprite

传统的做法
使用AI或者合并SVG图像,然后用background-postion;
打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线.
用AI打开svg文件,然后复制路径到画布上调整大小

图片 3

其他就和css-sprite没有差异了

.icon-bg{
   display: inline-block;
   width: 30px; height: 30px;
   background: url(./res/svg-sprite-background.svg);
   background-size:100% 100%; 
  vertical-align: middle;
}
.icon-facebook-logo{
  background-position: 0 0;
 }
.icon-earth{ 
  background-position: 0 -30px;
}
.icon-like{ 
  background-position: 0 -60px;
}

html 中使用

<p class="btn-group">
   <a href="#" class="btn btn-default">

   </a> 
   <a href="#" class="btn btn-default">

   </a>
   <a href="#" class="btn btn-success">

   </a>
</p> 

效果如下:

图片 4

PS:SVG 为什么没有替代 iconfont?

1.PC 端 SVG 有兼容性问题,因此 PC 端还是用 iconfont 比较靠谱。那么,与其为移动端多弄一套 SVG 方案,为什么不直接公用同一套 iconfont 库?成本问题。

2.知道 SVG Sprite 的人不多,而 iconfont 俨然成为前端面试必考题了。

3.抛开兼容,再就是SVG的局限性:单色或线性渐变(从左向右笔直进行渐变),径向渐变(从内到外进行圆形渐变)都没问题、但是不规则的渐变、就实现不了了。

4.SVG比图片麻烦、设计稿如果不优化节点、直接导出、代码量那个惊人,然而ai导出的SVG代码、节点优化后,也不能直接用、还得小改、总体来说SVG比图片好耗费功力太多。

使用photoshop进行合并

可能很多图标是图形形状。

  • 打开Photoshop 新建一个30 *60 (px)的画布,我们计划30px *30px,设置好网格或者参考线
  • 用AI打开SVG文件,然后Ctrl C 复制路径,然后复制到photoshop文档中,选择图层形状,然后再进行调整
  • 选择 '文件' ->'导出' -> '路径到illustrator'
  • 保存为SVG

效果如下:

图片 5

  • 如果这样做,这似乎浪费了SVG的很多特性.

Web应用中SVG的使用方式

SVG Sprite的另外一种实现思路 <symbol> <use>

  • SVG <symbol>在svg中主要适用于定义可复用的符号,而这些定义在symbol元素的形状将不会被展示出来,
    而是通过use元素引用来显示。

  • 在SVG中<use>可以在任何地方复用svg文件中定定义的的形,包括<g>和 <symbol>已经<defs>。

  • 在使用 use 时,它必须要有一个id,这样 use 通过xlink:href的值找到该形状的引用。注意,一定要在前面加
    一个#,这样才能引用ID成功。

    <svg width="300" height="300"> 
      <defs> 
        <g id="shape"> 
          <rect x="50" y="50" width="50" height="50" />
          <circle cx="50" cy="50" r="50" /> 
        </g>
      </defs> 
    
      <use xlink:href="#shape" x="50" y="50" /> 
      <use xlink:href="#shape" x="200" y="50" />
    </svg>
    

在使用use时,它必须要有一个id,这样use通过xlink:href的值找到该形状的引用.注意,一定要在前面加一个#,这样才能引用ID成功。

首先我们使用PS AI生成带有symbol的 SVG。

前面步骤与生成背景的图类似

图片 6

  • 打开Symbols面板,在Window菜单栏中,或Shift Ctrl F11启用。然后,选中单个元素,点击添加。 图片 7

  • 给符号命名,该名称即为引用的ID 图片 8

  • 保存为SVG时,实际上生成的SVG代码并非我们要使用的,太过臃肿,可以到 http://www.zhangxinxu.com/sp/svg.html 进行处理下,方便使用查看DEMO3处理后的代码

  • 在Html 里将SVG 放入,并隐藏;
    <svg style="display:none;"> <symbol id="earth" ... </path></symbol></svg>

使用:

  <svg class="icon icon-facebook"><use xlink:href="#facebook"></use></svg>

效果如下:

图片 9

可以通过CSS去控制填充(fill)或者描边的颜色(stroke)

  .icon-blue{ 
      fill:#1ba1e2;
   }

图片 10

使用 icomoon 制作SVG Sprite [推荐]
icommon不仅可以生成icon fonts还可以生成SVG Sprite.

图片 11

文件下载完成解压可以得到的文件夹里面会有demo.html 可以直接打开源码参考使用.

图片 12

1.使用img、object、embed 标签直接引用SVG

此方法的缺点主要在于每个图标都需单独保存成一个 SVG 文件,使用时单独请求,增加了HTTP请求数量。

XHTML

<img src="" width="300" />

1
<img src="http://www.w3school.com.cn/svg/rect1.svg"  width="300" />
使用svgstore生成SVG Sprite

svgstore是 grunt的一个插件,用于自动获取文件中的SVG文件并自动合并。

    npm install grunt-svgstore --save-dev

安装成功后,可以在 node_modules中看到grunt-svgstore文件夹

可以新建一个项目,svg-demo1

在文件中新建一个 src 文件夹,并把需要合并的svg文件中放进去

然后新建package.json

{ 
  "name": "svg-store", 
  "version": "0.1.0",
  "private": true, 
  "devDependencies": { "grunt": "^0.4.5", "grunt-svgstore": "~0.5.0" }
}

然后新建Gruntfile.js,里面配置选项大致如下:

图片 13

配置.png

接下来输入命令npm install;
自动加载依赖项目,再输入命令:

  grunt

这个时候可以看到一个合并的dest-svg.svg文件和一个dest-svg-demo.html文件,打开网页文件,你可以快速的使用这些svg icon了.

一些常见的配置说明:

  options.includedemo // 是否生成一个demo的html文件 一般还是写上比较好 
  options.cleanup //是否支持css 控制图标的fill和stroke属性等,可以传入一个数组实现自定义 ['fill','stroke-    width' ...]
  options.svg // 添加svg的一些属性在生成的svg文件中 viewBox: '0,0,100,100'

更多选项:参考这里

小结
借助第三方工具我们可以快速的制作svg sprite,相对其他方案,svg更加灵活,可控制,矢量显示等优点,在移动端以及部分pc站点上非常适用于图标解决方案。
扩展阅读: http://events.jackpu.com/svg/demo.html

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

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

XHTML

<body> <svg width="100%" height="100%"> <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/> </svg> </body>

1
2
3
4
5
<body>
    <svg width="100%" height="100%">
        <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
    </svg>
</body>

3.SVG Sprite

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

XHTML

.icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; } .icon-facebook-logo{ background-position: 0 0; } .icon-earth{ background-position: 0 -30px; } <span class="icon-bg icon-facebook-logo"></span> <span class="icon-bg icon-earth"></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
}
.icon-facebook-logo{
    background-position: 0 0;
}
.icon-earth{
    background-position: 0 -30px;
}
<span class="icon-bg icon-facebook-logo"></span>
<span class="icon-bg icon-earth"></span>

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:拥抱Web设计新趋势

关键词: