SVG Sprite

一、Sprite技术

Sprite技术,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。

二、SVG Sprite与symbol元素

SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢,可以翻译成元件
对于一个集合了两个SVG图标的SVG元素的代码结构会是这样:

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
</svg>

三、SVG中的use元素

use元素是SVG中非常强大,非常重要的一个元素,尤其在Web开发中
两点:

  1. 可重复调用;
  2. 跨SVG调用;

1. 可重复调用

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

2. 跨SVG调用

SVG中的use元素可以调用其他SVG文件的元素,只要在一个文档中。

symbol + use => SVG Sprite

. 四 react loadSprite 例子

// inspried by https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js
// Much simplified, do make sure run this after document ready
const svgSprite = contents => `
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    id="__ANTD_MOBILE_SVG_SPRITE_NODE__"
    style="position:absolute;width:0;height:0"
  >
    <defs>
      ${contents}
    </defs>
  </svg>
`;

// both minified by https://github.com/svg/svgo
const icons = {
  check:
    '<svg viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></svg>',
};


const renderSvgSprite = () => {
  const symbols = Object.keys(icons)
    .map((iconName) => {
      const svgContent = icons[iconName].split('svg')[1];
      console.log('svgContent', svgContent);
      return `<symbol id=${iconName}${svgContent}symbol>`;
    })
    .join('');
  return svgSprite(symbols);
};

const loadSprite = () => {
  /* istanbul ignore if */
  if (!document) {
    return;
  }
  const existing = document.getElementById('__ANTD_MOBILE_SVG_SPRITE_NODE__');
  const mountNode = document.body;

  if (!existing) {
    mountNode.insertAdjacentHTML('afterbegin', renderSvgSprite());
  }
};

export default loadSprite;

推荐阅读更多精彩内容

  • SVG 格式在前端领域越来越流行,它的特性使得各种高清屏幕都不会失真。于是我收藏一篇个人觉得比较好的 SVG 文章...
    BenzLeung阅读 1,984评论 0 3
  • 演示地址 代码 SVG Sprite 传统的做法使用AI或者合并SVG图像,然后用background-posti...
    饥人谷_米弥轮阅读 811评论 0 0
  • 概述 SVG(Scalable Vector Graphics)是一种矢量图格式。Adobe Illustrato...
    daoyidao阅读 1,050评论 0 2
  • 以前我们项目中使用矢量图,通常的做法是由设计师提供SVG,然后通过 http://fontello.com/ 生成...
    二驸马阅读 2,390评论 0 1
  • 1.先在package.json中引入,安装,npm install svg-sprite-loader --sa...
    刘予安阅读 7,242评论 0 1