svg-sprite：符号转换为单个 svg 图标
Posted
技术标签:
【中文标题】svg-sprite：符号转换为单个 svg 图标【英文标题】：svg-sprite: symbol conversion to single svg icon 【发布时间】：2015-03-06 13:51:57 【问题描述】：我有一个像下面这样的 svg 精灵：
<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-tag 替换 symbol-tag 来从符号中制作一个 svg 吗？或者我怎样才能实现这种转换为单独的 svg？
我想到了一个小脚本，它可以像上面一样从 svg-sprite 中注入几个 svg 图标，因此这些图标可以更好地/单独地通过 css 设置样式。
这里的问题是，在精灵中有符号，（据我所知）只能与<use xlink:href> 一起使用。但是图标不能像 inline svg 那样单独设置样式（因为它是一个克隆）。
编辑： 我发现了使用 img-src 和单个 svgs 注入 html 的开放标志性 svgIncetor。 另外值得一提的是，我已经阅读了 Chris Coyier 的以下文章：
http://css-tricks.com/svg-use-external-source/ http://css-tricks.com/svg-symbol-good-choice-icons/ http://css-tricks.com/icon-fonts-vs-svg/ http://css-tricks.com/svg-sprites-use-better-icon-fonts/基本上，我想将那里使用的技术组合成一个图标系统，该系统可以具有基于 css 和 icon-sprite 的多色图标（通过 js-inject 使用内联 svg）。 开放式图标注入器只能注入单个 svgs 而不能从 sprites afaik 注入。
【问题讨论】：
【参考方案1】：您无需进行太多更改（请参阅http://jsfiddle.net/yo8bhxfu/）：
从SVG 元素中移除视图框
调整SVG 元素的样式，使其可见并指定适当的大小（取自符号的视图框）
将symbol标签转换成g标签
如果您另外删除 class 属性、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>
【讨论】：
svg 只是多个符号的包装器，只是添加了一些，使它看起来更像真正的精灵。但是我可以从你的回答中得到基本上是，只需将符号标签替换为 g 标签就可以了，我很高兴。 虽然不太一样，符号更像是 确实viewBox 在g 元素上无效。您可能希望在 svg 元素上使用它？
这适用于我的简单用例。能够实际操作 SVG 并在 Illustrator 中查看图层，这正是我所需要的。谢谢！【参考方案2】：
我使用 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);
);
);
);
【讨论】：
【参考方案3】：我使用了 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
将文件另存为
.svg
【讨论】：
【参考方案4】：我改进了 Bogdan 的代码并创建了一个脚本来将任何精灵解析为它的原始 svg。
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);
);
);
)
只需添加您的精灵路径和输出路径，它就会在输出文件夹中生成带有 ids 的内部 svgs。
你可以在gist找到代码
【讨论】：
以上是关于svg-sprite：符号转换为单个 svg 图标的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Google Maps API v3 中使用 SVG 标记