《响应式Web设计：HTML5和CSS3实战(第2版)》07章 - 学习笔记

响应式Web设计:HTML5和CSS3实战(第2版)

第七章 SVG与响应式Web设计

• SVG可伸缩矢量图是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术
• SVG的大小比位图要小很多

7.1 SVG特点

• SVG是XML中用于描述二维图形的语言
• SVG仅仅保存矢量点

7.2 SVG的关键点（实现方法）

• 根元素：宽、高和视口
  • viewbox定义了SVG中所有形状都需要遵循的坐标系
  • viewbox属性可以让你伸缩图片

7.3 SVG制作工具

• Adobe Illustrator
• Sketch
• InkScape（免费开源）

7.4 Web中插入SVG

• 使用img标签
• 使用object标签
  • 建议不要省略data和type属性
• 作为背景图
  • 对于老旧机型可以有后备策略

  .item{
      background: url('aa.png') no-repeat;
      background: url('aa.svg') left top / auto no-repeat;
  }

• Modernizer对不支持svg的浏览器会有“no-svg”的类
• data URI的介绍
  • 将url的图片地址换为一串“统一资源标识符”
  • data URI有很多编码方式，建议不要使用base64格式，因为它对SVG的压缩不如text好
  • 推荐工具：Iconizr
• 如果想为它加上动画效果，或者使用js来插入数据，最好还是把SVG内联到HTML上

7.5 内联SVG

• 由于SVG是XML文档，所以可以直接插入到HTML中

  • 如果删掉宽高，SVG就会自动缩放，充满容器

• 利用符号复用图形对象

  • defs元素中的symbol元素是定义一个形状以供后期使用
  • 后文中可以用use标签来将已经定义好的图形对象使用起来，通过xlink属性来选择引入的对象

• 根据上下文改变svg颜色

  .svg{
      fill: #f90;
  }

• 复用外部图形对象资源
  • 意为链接到外部defs.svg文件，选用其中id为icon-home的图形
  • 好处为
    • 可以为浏览器缓存
    • 防止代码中有一堆svg符号
  • IE9-11不支持，可以用"svg for everybody"的ployfill脚本解决限制
• 浏览器兼容性
  • IE9-11中无法引用外部svg资源
  • IE中无论采用什么方式插入svg，都会把外部样式表的样式应用到svg上
    • 其他浏览器都是只有在object标签引入svg时才会应用那些样式
  • IE不允许css为svg添加动画，只能通过JS为svg添加动画

7.6 为svg添加样式

• 外部样式表
  • 在svg标签前加

• 内部样式表

 + 上例代码中的stroke属性。它并不是CSS属性，而是SVG属性。
 + 在样式中可以使用不少的SVG属性（无论是内联样式抑或外部样式表）。例如
     * 对于SVG，你不用指background-color，而是需要定义fill。
     * 你无需定义border，而是定义stroke-width。

• 用CSS为SVG添加动画
  • 注意SVG上的transform-origin被设置为50% 50%。这是因为与CSS不同，SVG默认的transform-origin不是50% 50%（元素的正中间），而是0 0（元素的左上角）。如果不指定该属性，星形会围绕左上角进行旋转。

• 使用JavaScript添加SVG动画
  • 当一个SVG是通过内联或者object标签的方式插入到页面时，我们可以通过JavaScript直接或者间接地控制它。
  • 间接的意思是指我可以通过JavaScript来改变它或者它的父类的class，从而触发动画效果。

  svg { 
  /* 没有动画效果*/ 
  } 
  .added-with-js svg { 
  /* 动画*/ 
  }

• 推荐使用:
  • GreenSock动画平台（http://greensock.com/）
  • Velocity.js（http://julian.com/research/velocity/）
  • Snap.svg（http://snapsvg.io/）

7.9 优化SVG

• 推荐使用:
  • SVGO（https://github.com/svg/svgo）
  • SVGOMG（https://jakearchibald.github.io/svgomg/）
    • 这是一个浏览器版本的SVGO，你可以切换不同的优化插件，并且可以看到即时的优化反馈。