SVG使用技巧

  1. 提高SVG代码的复用率,可用:
      1. “<symbol>”以及“<use>”
      2. “<def><marker> … </marker></def>”
      3. 可以填充(fill)的“<def><pattern> … </pattern></def>”以及gradient系列
  2. SVG的样式可以放.css里
  3. stroke-dasharray与stroke-dashoffset动画
  4. SVG里面可以放<image>,可用SVG形状给图片加料
     <image x="0" y="0" height="100" width="100" xlink:href="img.jpg"></image>
  5. Adobe Illustrator里的一些常用功能:
    • Trace
    • Create Outlines

SVG FAQs

  1. 为什么用SVG?
    • 很稳定,最近几年长青浏览器们对SVG的支持变得很稳定
    • Scalable Vector graphic:大小可变,图像质量不变
    • 体积小,如果图像比较简单的话
    • 容易学,SVG是基于XML的,可用CSS以及JavaScript控制它
  2. 如何控制SVG的大小?
    • 固定大小:<svg width=”100″ height=”100″> … </svg>
    • 自动伸展(至父元素的大小,不注明固定大小即可)
  3. viewBox的含义?
    viewBox=”100 200 300 400″的含义为,视图左起剪掉100个相对像素,上起剪掉200个相对像素,右起剪掉300个相对像素,下起剪掉400个相对像素。当然,这只是一种理解其运作的方法而已。

SVG工具

  1. 參考
    1. 基础:W3School
    2. 属性:MDN
    3. 实例:CSS-Tricks || CodePen
  2. 现成
    1. Alibaba的:iconfont
    2. 开源:The Noun Project || Feather || 草莓图标库 || jam-icons
    3. 部分免费:The Stocks || icomoon
    4. 需署名 || 付费:icons8
    5. 部分免费之地图:freevectormaps.com
    6. 免费 && 独特:human pictogram 2.0
    7. 加载动画在线制作:loading.io
  3. 编辑
    1. 本地
    2. 云端
    3. JS库
  4. 压缩
    1. 外链
    2. 内联