svg-sprite:符号转换为单个svg图标
我有一个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替换符号标签来制作一个svg吗？或者我如何实现这种转换以分离svg？
我想到了一个小脚本，它可以从上面的svg精灵中注入几个svg图标，这样图标可以更好地/单独地由css设置样式。
这里的事情是，在精灵中有一些符号，（据我所知）这些符号只能与一起使用
编辑：我找到了一个开放的图标svgIncetor，它使用img-src和单个svg注入html。此外，我已经阅读了克里斯·科伊尔的以下文章：
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和图标精灵的多色图标（通过js-inject使用内联svg）。开放式标志性注射器只能注入snhlge svgs，而不能从精灵afaik中注入。
共有3个答案
我使用了Codo的答案，但它在我的情况下并不完全有效。一个适用于我遇到的SVG的解决方案：（这是
(使用Chrome或类似的开发工具)
检查svg，找到
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
<g>
...
</g>
</svg>
我已经使用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);
});
});
});
你不需要改变太多（见http://jsfiddle.net/yo8bhxfu/）：
-
< li >从< code>SVG元素中移除视图框 < li >调整< code>SVG元素的样式，使其可见并指定适当的大小(取自符号的视图框) < li >将< code>symbol标记转换为< code>g标记
如果您另外删除class属性、id属性和title，您可能会很安全。
<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 sprite 概述 SVG（Scalable Vector Graphics）是一种矢量图格式。Adobe Illustrator是专门编辑、制作矢量图的软件。 随着高清视网膜屏幕的出现，Web设计需要根据屏幕输出不同分辨率的图片。在开发中需要准备两套不同的图片应对，一套在普通屏幕上显示；一套在高清屏幕上显示。 现在流行的icon font字体图标，其实质上是SVG的封装。 SVG的优势
-
svg-sprite 是一个低层次的 Node.js 模块，它可以将一堆 SVG 文件进行优化，然后将它们烤成几种类型的 SVG sprites ，并包含合适样式表的资源（例如 CSS, Sass, LESS, Stylus, etc.） 使用模式： // Create spriter instance (see below for `config` examples)var spriter
-
问题内容： 如何以编程方式将SVG文件转换为PDF？（在生成PDF之前，我需要在某些方面进行更改，因此仅使用工具进行预转换就不够了。） 理想情况下，使用Java但Perl或PHP也可以。 显然，我基本上是在考虑使用Java的Apache FOP和Batik。但是，无论我搜索多长时间，都无法找到有关该操作方法的简单介绍。诸如SVGConverter之类的内容具有“为能够转换部分或全部GraphicC
-
我想发送一个内联SVG图像到PHP脚本转换为PNG与Imagick.为此，我必须知道如何在内联SVG上获得一个Base64字符串。对于画布对象，它是一个简单的“. toDataURL（）”，但这不适用于内联SVG，因为它不是元素的全局函数。 http://jsfiddle.net/nikolang/ccx195qj/1/ 但是如何为内联SVG实现这一点？
-
本文向大家介绍svg如何转为字体图标？相关面试题，主要包含被问及svg如何转为字体图标？时的应答技巧和注意事项，需要的朋友参考一下 选择一个支持在线转换的网站 如IconFont或icomoon 上传svg文件的图标 在相应的地方进行下载 好处 字体图标直接用color自由控制颜色； 整合在一起，减少http请求等
-
问题内容： 我有一个外部SVG文件，其中包含一些嵌入的图案图像标签。每当我使用将该SVG转换为PNG时，生成的PNG图像都不包含我已作为图案应用到某些SVG路径的图像。有什么办法解决这个问题？ 问题答案： 是的，有：将svg附加到文档中，并将所有包含的图像编码为dataURIs。 我正在编写一个脚本来执行此操作，还编写了一些其他内容，例如包括外部样式表以及toDataURL失败的其他修复方法（例如