Skip to content

Instantly share code, notes, and snippets.

@dennishall1
Created March 17, 2016 19:06
Show Gist options
  • Save dennishall1/3e96d52e73db20b27cd0 to your computer and use it in GitHub Desktop.
Save dennishall1/3e96d52e73db20b27cd0 to your computer and use it in GitHub Desktop.
Split SVG Spritesheet into individual SVG files
var fs = require('fs');
var path = require('path');
var markup = fs.readFileSync('sprite.svg').toString();
var lines = markup.split(/\n/g);
var symbols = {};
var currentSymbol = null;
lines.forEach(function(line){
var open = line.match(/symbol.*?id="(.*?)"/);
var close = line.match(/<\/symbol>/);
if(currentSymbol){
symbols[currentSymbol].push(line);
}
if(open){
currentSymbol = open[1];
symbols[currentSymbol] = [line];
}
if(close){
symbols[currentSymbol] = symbols[currentSymbol].join('\n').replace('<symbol', '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"').replace('</symbol', '</svg');
fs.writeFileSync(path.join(__dirname, 'src/svg/' + currentSymbol + '.svg'), symbols[currentSymbol]);
currentSymbol = null;
}
});
console.log( Object.keys(symbols) );
@Brachacz
Copy link

Thanks man <3

@bustapaladin
Copy link

How to use this?

@Brachacz
Copy link

How to use this?

  • Save to a file
  • have your sprite.svg in the same directory
  • might need to create src/svg/ path in the directory you have this script and sprite
  • execute using nodeJS
    -> your files will be in src/svg/

@bustapaladin
Copy link

bustapaladin commented Aug 31, 2020

How to use this?

  • Save to a file
  • have your sprite.svg in the same directory
  • might need to create src/svg/ path in the directory you have this script and sprite
  • execute using nodeJS
    -> your files will be in src/svg/

I've tried alot of things can you write this? So its a question of copy pasting and running a command in nodejs for that location.

I'm a noob here.

@skali-traffic
Copy link

Thanks, man. <3

@vdespeisse
Copy link

Worked very well thanks a lot!

@WindowsFan2006
Copy link

I can't use it. It gives me an error.
Line: 3
Character: 1
Error: It was waiting for an object
Code: 800A138F

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment