Skip to content

Instantly share code, notes, and snippets.

@AndrejGajdos
Last active February 27, 2016 20:52
Show Gist options
  • Save AndrejGajdos/ba6a828dfb33fe63ac0b to your computer and use it in GitHub Desktop.
Save AndrejGajdos/ba6a828dfb33fe63ac0b to your computer and use it in GitHub Desktop.
First part of gulp tak – converting SVG Sprite to separate files
var fs = require('fs');
var DOMParser = require('xmldom').DOMParser;
var timestamp = require('console-timestamp');
var config = require('./config.json');
// open svg sprite file
fs.readFile(config.paths.svg_sprite, 'utf8', function (err, data) {
if (err) {
return console.log(timestamp('[hh:mm:ss] ') + "Read file " + config.paths.svg_sprite + " error: " + err);
}
console.log(timestamp('[hh:mm:ss] ') + "Creating .svg files...");
var parser = new DOMParser();
var svgSpriteContent = parser.parseFromString(data, "image/svg+xml");
var symbols = svgSpriteContent.getElementsByTagName("symbol");
for (var i = 0; i < symbols.length; i++) {
// parse elements from svg sprite
var pathElement = symbols.item(i).getElementsByTagName("path")[0];
pathElement.setAttribute("fill", config.image.color);
var symbolId = symbols.item(i).getAttribute("id");
var viewBoxVal = symbols.item(i).getAttribute("viewBox");
var fileHeader = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\" viewBox=\"" + viewBoxVal + "\">";
var fileFooter = "</svg>";
// create separate svg files
fs.writeFile("./build/svg_files_" + colorName + "/" + symbolId + ".svg",
fileHeader + pathElement.toString() + fileFooter,
function (err) {
if (err) {
return console.log(timestamp('[hh:mm:ss] ') + err);
}
});
}
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment