extract colors from svg string in javascript

Question

I have svg file which is stored in string format in javascript. I want to extract all the colors mentioned in file and stored it in array.

color information would be denoted as fill:#010101; in file. I want to

search :# characted in file
Extract assosoate hex color
Store it in array
Again search for next color

SVG File could vary from size 1kb to 450Kb. I can use .indexOf to find first occurence of :# but i am stuck in which method to use to get all colors in efficient way.

Here is a fiddle of what i have done : http://jsfiddle.net/mumg81qq/1/ even fiddle gets hanged due to my svg string :(

Edit : How to modify Javascript regex. Need to extract value from a SVG string this answer to get hex/rgb colors from svg string ?

Will the SVG file change frequently, or is this more or less a static list? — robbmj, Apr 23 '15 at 14:13
Could you not process the SVG file once and store the results in a JSON string. When the client needs the colours it could request the JSON from the server. — robbmj, Apr 23 '15 at 14:15
@robbmj : Do u mean color extraction process is handled by server side code ? and extract colors are requested by ajax call ? — Shaggy, Apr 23 '15 at 14:17
Yep that is what I mean. And if the list never changes you only need to process the file once. And even if it does change at least the AJAX call does not block the UI. — robbmj, Apr 23 '15 at 14:18

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

I don't know how efficient a regular expression would be at handling this, but something like this could work (however slow it may be) http://jsfiddle.net/vdugk40m/1/:

var info="fill:#010011;fill:#010012;fill:#010013;fill:#010014;";
var m, regex = /fill\:\#(\[A-F0-9]+)[;]/gi;
var colors = [];

do {
    m = regex.exec(info);
    if (m)
        colors.push(m[1]);
} while (m);

alert(colors);

If you need the # in the string, move the open parenthesis before the \#.

If you want to then reduce the array to only unique values (lifted from https://stackoverflow.com/a/14438954/579148):

colors = colors.filter( onlyUnique );

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

edited May 23 '17 at 11:45

Community

1
1

answered Apr 23 '15 at 14:19

jwatts1980

7,254
2
28
44

@Shaggy I am looking at it now.. That's odd, in my simple example, it returns each of the values. But in the big one it is as you say.. repeating the same one. – jwatts1980 Apr 23 '15 at 14:27
Yeah that would be better – Shaggy Apr 23 '15 at 14:33
This regex can also deal with whitespaces and single quotes: /fill\s*[:=]\s*['"]\#([A-Fa-f0-9]{6})['"]/gi – Stefan Dec 02 '21 at 13:51

score 2 · Answer 2 · answered Apr 23 '15 at 14:30

If you just want to capture hex values (i.e 6 characters following #) regexp groups comes in handy

var r = new RegExp('fill:#([a-zA-Z0-9]{6})','g')
var res= [];
while(result = r.exec(file)) { 
   res.push(result[1]); 
}

In the code piece above, I matched the 6 characters after #, and stored the captured group in an array called res

Here is a modified version of your fiddle to demonstrate

http://jsfiddle.net/mumg81qq/3/

score 2 · Answer 3 · answered Apr 23 '15 at 14:33

I like to keep it short, so here's my attempt:

var colors = [];
file.replace(/fill:(#[abcdef0-9]{6})/ig, function(v, c) { colors.push(c); return v; });

Will populate the array colors as you can see here: http://jsfiddle.net/ks92aau8/

Keep in mind that if you plan to support RGBA (alpha transparency) values, you'll need to use {8} instead of {6} in the regex.

extract colors from svg string in javascript

3 Answers3