Question

我有一个svg sprite，如下所示：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;">
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
</svg>

现在我的问题是：我可以通过提取符号然后用svg标签替换符号标签来从符号中生成一个svg吗？或者我如何实现这种转换以分离svg？

我想到了一个小脚本，它可以从上面的svg-sprite中注入几个svg图标，因此图标可以通过css更好/单独地进行样式化。

这里的事情是在精灵中有符号，这些符号（据我所知）只能与<use xlink:href>一起使用。但是这个图标不能像内联svg一样单独设置（因为它是一个克隆）。

修改我找到了开放标志性的svgIncetor，它使用img-src和单个svgs注入到html中。另外值得一提的是，我读过Chris Coyier的以下文章：

基本上我想把那里使用的技术结合起来，有一个图标系统，可以有基于css和icon-sprite的多色图标（通过js-inject内联svg）。开放标志性的注射器只能注射sinlge svgs，而不能注射精灵。

Answer 1

您无需更改（请参阅http://jsfiddle.net/yo8bhxfu/）：

从SVG元素
调整SVG元素的样式以使其可见并指定适当的大小（取自符号的视图框）
将symbol代码转换为g代码

如果您另外删除类属性， id 属性和标题，则可能安全。

<svg xmlns="http://www.w3.org/2000/svg" style="width:500px; height:500px;">
    <g viewBox="0 0 500 500" id="test-icon">
        <title>test</title>
        <ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </g>
</svg>

Answer 2

我使用了Codo的答案，但是在我的情况下，它并没有完全起作用。我遇到了一个适用于SVG的解决方案：（<use xlink:href=和svg已优化为<path> s）

（使用Chrome或类似的开发工具）

检查svg，找到<use xlink:href=元素
展开元素，然后展开#shadow-root（您可能需要在开发工具设置中启用Shadow DOM）
将内部的svg元素复制到文本编辑器中
确保存在包含路径和形状的结构<g>，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
  <g>
    ...
  </g>
</svg>

（可选）使用https://jakearchibald.github.io/svgomg/
将文件另存为.svg

Answer 3

我已经使用 Nodejs 和 svg-parser 创建了一个小脚本，用于拆分SVG图标精灵文件：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="act" viewBox="0 0 48 48">
      <path d="M24 22c0.552 0 1-0.448 1-1v-18c0-0.552-0.448-1-1-1s-1 0.448-1 1v18c0 0.552 0.448 1 1 1z" />
      <path 
        d="M33.027 8.148c0 0-0.010 0.013-0.012 0.015-0.152-0.094-0.322-0.163-0.515-0.163-0.552 0-1 0.448-1 1 0 0.377 0.217 0.693 0.525 0.864 0.004 0.004-0.001 0.015 0.004 0.018 5.503 2.817 9.971 8.868 9.971 16.118 0 9.625-7.866 18-18 18-10.17 0-18-8.375-18-18 0-7.33 4.443-13.31 9.972-16.118 0.005-0.002 0-0.014 0.003-0.018 0.308-0.171 0.525-0.487 0.525-0.864 0-0.552-0.448-1-1-1-0.191 0-0.359 0.068-0.511 0.16-0.002-0.002-0.011-0.015-0.011-0.015-6.513 3.298-10.978 10.055-10.978 17.855 0 11.046 8.954 20 20 20s20-8.954 20-20c0-7.798-4.462-14.553-10.973-17.852z" />
    </symbol>
    ...
  </defs>
</svg>

const fs = require('fs');
const { parse } = require('svg-parser');

// Read from sprite file
fs.readFile('file.svg', 'utf8', function (err, contents) {
  console.log(err);
  const parsed = parse(contents);
  const symbols = parsed.children[0].children[0].children;

  symbols.forEach(symbol => {
    let paths = '';
    const name = symbol.properties.id;
    symbol.children.forEach(path => {
      paths = paths + `<path d="${path.properties.d}" />`
    });

    // Build SVG content
    const newIcon = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
      <g>
        ${paths}
      </g>
    </svg>`

    // White to file
    fs.writeFile(`export/${name}.svg`, newIcon, () => {
      console.log(name);
    });
  });

});

Answer 4

我改进了 Bogdan 的代码并创建了一个脚本来将任何精灵解析为它的原始 svgs。

import {toHtml} from "hast-util-to-html";
import {parse} from "svg-parser";
import * as fs from 'fs';


fs.readFile('input/path/sprite.svg', 'utf8', function (err, contents) {
    const parsed = parse(contents);
    const symbols = parsed.children[0].children;
    symbols.forEach(symbol => {
        const name = symbol.properties.id;
        symbol.tagName = "svg";
        let newIcon = toHtml(symbol);
        fs.writeFile(`output/path/${name}.svg`, newIcon, () => {
            console.log(name);
        });
    });
})

只需添加您的精灵路径和输出路径，它就会在输出文件夹中生成带有 id 的内部 svgs。

您可以在此gist

中找到代码

svg-sprite：符号转换为单个svg图标

4 个答案: