响应式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;
  }

• 复用外部图形对象资源
  • <use xlink:href="defs.svg#icon-home"></use>
  • 意为链接到外部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标签前加<?xml-stylesheet href="styles.css" type="text/css"?>

  <?xml-stylesheet href="styles.css" type="text/css"?> 
  <svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

• 内部样式表

  <defs>
      <style type="text/css"> 
          <![CDATA[ 
              #star_Path { 
                  stroke: red; 
              } 
          ]]> 
      </style> 
  </defs> 

 + 上例代码中的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（元素的左上角）。如果不指定该属性，星形会围绕左上角进行旋转。

  <div class="wrapper">
      <svg width="198" height="188" viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Star 1</title>
          <defs>
              <style type="text/css">
              <![CDATA[ @keyframes 
                  spin {
                      0% {
                          transform: rotate(0deg);
                      }
                      100% {
                          transform: rotate(360deg);
                      }
                  }
                  .star_Wrapper {
                      animation: spin 2s 1s;
                      transform-origin: 50% 50%;
                  }
                  .wrapper {
                      padding: 2rem;
                      margin: 2rem;
                  }
              ]]>
              </style>
              <g id="shape">
                  <path fill="#14805e" d="M50 50h50v50H50z" />
                  <circle fill="#ebebeb" cx="50" cy="50" r="50" />
              </g>
          </defs>
          <g class="star_Wrapper" fill="none" fill-rule="evenodd">
              <path id="star_Path" stroke="#333" stroke-width="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.894 73.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.226 65.453z" />
          </g>
      </svg>
  </div>

• 使用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，你可以切换不同的优化插件，并且可以看到即时的优化反馈。