1
0
mirror of https://github.com/svg/svgo.git synced 2025-07-29 20:21:14 +03:00

plugins/cleanupIDs: renamed from removeUnusedIDs; minify used IDs (fix #7)

This commit is contained in:
deepsweet
2012-12-17 22:26:06 +02:00
parent 45952089d3
commit 40ab77680a
11 changed files with 644 additions and 152 deletions

View File

@ -150,9 +150,12 @@ plugins:
active: true
type: full
- name: removeUnusedIDs
- name: cleanupIDs
active: true
type: full
params:
remove: true
minify: true
svg2js:

194
plugins/cleanupIDs.js Normal file
View File

@ -0,0 +1,194 @@
'use strict';
var referencesProps = require('./_collections').referencesProps,
regReferencesUrl = /^url\(#(.+?)\)$/,
regReferencesHref = /^#(.+?)$/,
styleOrScript = ['style', 'script'],
generateIDchars = [
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
],
maxIDindex = generateIDchars.length - 1;
/**
* Remove unused and minify used IDs
* (only if there are no any <style> or <script>).
*
* @param {Object} item current iteration item
* @param {Object} params plugin params
*
* @author Kir Belevich
*/
exports.cleanupIDs = function(data, params) {
var currentID,
currentIDstring,
IDs = {},
referencesIDs = {},
hasStyleOrScript = false;
/**
* Bananas!
*
* @param {Array} items input items
* @return {Array} output items
*/
function monkeys(items) {
var i = 0,
length = items.content.length;
while(i < length) {
var item = items.content[i],
match;
// check if <style> of <script> presents
if (item.isElem(styleOrScript)) {
hasStyleOrScript = true;
}
// …and don't remove any ID if yes
if (!hasStyleOrScript) {
if (item.isElem()) {
item.eachAttr(function(attr) {
// save IDs
if (attr.name === 'id') {
IDs[item.attr('id').value] = item;
}
// save IDs url() references
else if (referencesProps.indexOf(attr.name) > -1) {
match = attr.value.match(regReferencesUrl);
if (match) {
if (referencesIDs[match[1]]) {
referencesIDs[match[1]].push(attr);
} else {
referencesIDs[match[1]] = [attr];
}
}
}
// save IDs href references
else if (attr.name === 'xlink:href') {
match = attr.value.match(regReferencesHref);
if (match) {
if (referencesIDs[match[1]]) {
referencesIDs[match[1]].push(attr);
} else {
referencesIDs[match[1]] = [attr];
}
}
}
});
}
// go deeper
if (item.content) {
monkeys(item);
}
}
i++;
}
return items;
}
data = monkeys(data);
if (!hasStyleOrScript) {
for (var k in referencesIDs) {
if (IDs[k]) {
// replace referenced IDs with the minified ones
if (params.minify) {
currentIDstring = getIDstring(currentID = generateID(currentID));
IDs[k].attr('id').value = currentIDstring;
referencesIDs[k].forEach(function(attr) {
attr.value = attr.value.replace('#' + k, '#' + currentIDstring);
});
}
// don't remove referenced IDs
delete IDs[k];
}
}
// remove non-referenced IDs attributes from elements
if (params.remove) {
for(var ID in IDs) {
IDs[ID].removeAttr('id');
}
}
}
return data;
};
/**
* Generate unique minimal ID.
*
* @param {Array} [currentID] current ID
* @return {Array} generated ID array
*/
function generateID(currentID) {
if (!currentID) return [0];
currentID[currentID.length - 1]++;
for(var i = currentID.length - 1; i > 0; i--) {
if (currentID[i] > maxIDindex) {
currentID[i] = 0;
if (currentID[i - 1] !== undefined) {
currentID[i - 1]++;
}
}
}
if (currentID[0] > maxIDindex) {
currentID[0] = 0;
currentID.unshift(0);
}
return currentID;
}
/**
* Get string from generated ID array.
*
* @param {Array} arr input ID array
* @return {String} output ID string
*/
function getIDstring(arr) {
var str = '';
arr.forEach(function(i) {
str += generateIDchars[i];
});
return str;
}

View File

@ -1,147 +0,0 @@
'use strict';
var referencesProps = require('./_collections').referencesProps,
regReferencesUrl = /^url\(#(.+?)\)$/,
regReferencesHref = /^#(.+?)$/,
styleOrScript = ['style', 'script'];
function replaceLast(str, char) {
str = str.split('');
str[str.length - 1] = char;
return str.join('');
}
function replaceFirst(str, char) {
str = str.split('');
str[0] = char;
return str.join('');
}
function generateID(prev) {
var next;
if (prev.charCodeAt(prev.length - 1) === 122) {
next = replaceAt(prev, 'A');
} else if (prev.charCodeAt(prev.length - 1) === 90) {
next = replaceAt(prev, 'A');
} else {
next = replaceAt(prev, String.fromCharCode(prev.charCodeAt(prev.length - 1) + 1));
}
// if (prev.length === 1) {
// if (prev.charCodeAt(0) === 122) {
// next = String.fromCharCode(65);
// } else if (prev.charCodeAt(0) === 90) {
// next = 'aa';
// }
// } else if (prev.length === 2) {
// }
}
/**
* Remove unused IDs
* (only if there are no any <style> or <script>).
*
* @param {Object} item current iteration item
* @return {Boolean} if false, item will be filtered out
*
* @author Kir Belevich
*/
exports.removeUnusedIDs = function(data) {
var IDs = {},
referencesIDs = [],
hasStyleOrScript = false;
/**
* Bananas!
*
* @param {Array} items input items
* @return {Array} output items
*/
function monkeys(items) {
var i = 0,
length = items.content.length;
while(i < length) {
var item = items.content[i],
match;
// check if <style> of <script> presents
if (item.isElem(styleOrScript)) {
hasStyleOrScript = true;
}
// …and don't remove any ID if yes
if (!hasStyleOrScript) {
if (item.isElem()) {
item.eachAttr(function(attr) {
// save IDs
if (attr.name === 'id') {
IDs[item.attr('id').value] = item;
}
// save IDs url() references
else if (referencesProps.indexOf(attr.name) > -1) {
match = attr.value.match(regReferencesUrl);
if (match && referencesIDs.indexOf(match[1]) === -1) {
referencesIDs.push(match[1]);
}
}
// save IDs href references
else if (attr.name === 'xlink:href') {
match = attr.value.match(regReferencesHref);
if (match && referencesIDs.indexOf(match[1]) === -1) {
referencesIDs.push(match[1]);
}
}
});
}
// go deeper
if (item.content) {
monkeys(item);
}
}
i++;
}
return items;
}
data = monkeys(data);
if (!hasStyleOrScript) {
// don't remove referenced IDs
if (referencesIDs.length) {
referencesIDs.forEach(function(referencesID) {
delete IDs[referencesID];
});
}
// remove not referenced IDs from elements
if (Object.keys(IDs).length) {
for(var ID in IDs) {
IDs[ID].removeAttr('id');
}
}
}
return data;
};

View File

@ -12,4 +12,7 @@
<circle id="circle001" fill="url(#gradient001)" cx="60" cy="60" r="50"/>
<tref xlink:href="#referencedText"/>
</g>
<g>
<tref xlink:href="#referencedText"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 515 B

After

Width:  |  Height:  |  Size: 577 B

View File

@ -1,15 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient001">
<linearGradient id="a">
<stop offset="5%" stop-color="#F60"/>
<stop offset="95%" stop-color="#FF6"/>
</linearGradient>
<text id="referencedText">
<text id="b">
referenced text
</text>
</defs>
<g>
<circle fill="url(#gradient001)" cx="60" cy="60" r="50"/>
<tref xlink:href="#referencedText"/>
<circle fill="url(#a)" cx="60" cy="60" r="50"/>
<tref xlink:href="#b"/>
</g>
<g>
<tref xlink:href="#b"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 490 B

After

Width:  |  Height:  |  Size: 493 B

View File

Before

Width:  |  Height:  |  Size: 191 B

After

Width:  |  Height:  |  Size: 191 B

View File

Before

Width:  |  Height:  |  Size: 191 B

After

Width:  |  Height:  |  Size: 191 B

View File

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 193 B

View File

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 193 B

View File

@ -0,0 +1,218 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="test01">
referenced text
</text>
<text id="test02">
referenced text
</text>
<text id="test03">
referenced text
</text>
<text id="test04">
referenced text
</text>
<text id="test05">
referenced text
</text>
<text id="test06">
referenced text
</text>
<text id="test07">
referenced text
</text>
<text id="test08">
referenced text
</text>
<text id="test09">
referenced text
</text>
<text id="test10">
referenced text
</text>
<text id="test11">
referenced text
</text>
<text id="test12">
referenced text
</text>
<text id="test13">
referenced text
</text>
<text id="test14">
referenced text
</text>
<text id="test15">
referenced text
</text>
<text id="test16">
referenced text
</text>
<text id="test17">
referenced text
</text>
<text id="test18">
referenced text
</text>
<text id="test19">
referenced text
</text>
<text id="test20">
referenced text
</text>
<text id="test21">
referenced text
</text>
<text id="test22">
referenced text
</text>
<text id="test23">
referenced text
</text>
<text id="test24">
referenced text
</text>
<text id="test25">
referenced text
</text>
<text id="test26">
referenced text
</text>
<text id="test27">
referenced text
</text>
<text id="test28">
referenced text
</text>
<text id="test29">
referenced text
</text>
<text id="test30">
referenced text
</text>
<text id="test31">
referenced text
</text>
<text id="test32">
referenced text
</text>
<text id="test33">
referenced text
</text>
<text id="test34">
referenced text
</text>
<text id="test35">
referenced text
</text>
<text id="test36">
referenced text
</text>
<text id="test37">
referenced text
</text>
<text id="test38">
referenced text
</text>
<text id="test39">
referenced text
</text>
<text id="test40">
referenced text
</text>
<text id="test41">
referenced text
</text>
<text id="test42">
referenced text
</text>
<text id="test43">
referenced text
</text>
<text id="test44">
referenced text
</text>
<text id="test45">
referenced text
</text>
<text id="test46">
referenced text
</text>
<text id="test47">
referenced text
</text>
<text id="test48">
referenced text
</text>
<text id="test49">
referenced text
</text>
<text id="test50">
referenced text
</text>
<text id="test51">
referenced text
</text>
<text id="test52">
referenced text
</text>
<text id="test53">
referenced text
</text>
</defs>
<tref xlink:href="#test01"/>
<tref xlink:href="#test01"/>
<tref xlink:href="#test01"/>
<tref xlink:href="#test02"/>
<tref xlink:href="#test03"/>
<tref xlink:href="#test04"/>
<tref xlink:href="#test05"/>
<tref xlink:href="#test06"/>
<tref xlink:href="#test07"/>
<tref xlink:href="#test08"/>
<tref xlink:href="#test09"/>
<tref xlink:href="#test10"/>
<tref xlink:href="#test11"/>
<tref xlink:href="#test12"/>
<tref xlink:href="#test13"/>
<tref xlink:href="#test14"/>
<tref xlink:href="#test15"/>
<tref xlink:href="#test16"/>
<tref xlink:href="#test17"/>
<tref xlink:href="#test18"/>
<tref xlink:href="#test19"/>
<tref xlink:href="#test20"/>
<tref xlink:href="#test21"/>
<tref xlink:href="#test22"/>
<tref xlink:href="#test23"/>
<tref xlink:href="#test24"/>
<tref xlink:href="#test25"/>
<tref xlink:href="#test26"/>
<tref xlink:href="#test27"/>
<tref xlink:href="#test28"/>
<tref xlink:href="#test29"/>
<tref xlink:href="#test30"/>
<tref xlink:href="#test31"/>
<tref xlink:href="#test32"/>
<tref xlink:href="#test33"/>
<tref xlink:href="#test34"/>
<tref xlink:href="#test35"/>
<tref xlink:href="#test36"/>
<tref xlink:href="#test37"/>
<tref xlink:href="#test38"/>
<tref xlink:href="#test39"/>
<tref xlink:href="#test40"/>
<tref xlink:href="#test41"/>
<tref xlink:href="#test42"/>
<tref xlink:href="#test43"/>
<tref xlink:href="#test44"/>
<tref xlink:href="#test45"/>
<tref xlink:href="#test46"/>
<tref xlink:href="#test47"/>
<tref xlink:href="#test48"/>
<tref xlink:href="#test49"/>
<tref xlink:href="#test50"/>
<tref xlink:href="#test51"/>
<tref xlink:href="#test52"/>
<tref xlink:href="#test53"/>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@ -0,0 +1,218 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="a">
referenced text
</text>
<text id="b">
referenced text
</text>
<text id="c">
referenced text
</text>
<text id="d">
referenced text
</text>
<text id="e">
referenced text
</text>
<text id="f">
referenced text
</text>
<text id="g">
referenced text
</text>
<text id="h">
referenced text
</text>
<text id="i">
referenced text
</text>
<text id="j">
referenced text
</text>
<text id="k">
referenced text
</text>
<text id="l">
referenced text
</text>
<text id="m">
referenced text
</text>
<text id="n">
referenced text
</text>
<text id="o">
referenced text
</text>
<text id="p">
referenced text
</text>
<text id="q">
referenced text
</text>
<text id="r">
referenced text
</text>
<text id="s">
referenced text
</text>
<text id="t">
referenced text
</text>
<text id="u">
referenced text
</text>
<text id="v">
referenced text
</text>
<text id="w">
referenced text
</text>
<text id="x">
referenced text
</text>
<text id="y">
referenced text
</text>
<text id="z">
referenced text
</text>
<text id="A">
referenced text
</text>
<text id="B">
referenced text
</text>
<text id="C">
referenced text
</text>
<text id="D">
referenced text
</text>
<text id="E">
referenced text
</text>
<text id="F">
referenced text
</text>
<text id="G">
referenced text
</text>
<text id="H">
referenced text
</text>
<text id="I">
referenced text
</text>
<text id="J">
referenced text
</text>
<text id="K">
referenced text
</text>
<text id="L">
referenced text
</text>
<text id="M">
referenced text
</text>
<text id="N">
referenced text
</text>
<text id="O">
referenced text
</text>
<text id="P">
referenced text
</text>
<text id="Q">
referenced text
</text>
<text id="R">
referenced text
</text>
<text id="S">
referenced text
</text>
<text id="T">
referenced text
</text>
<text id="U">
referenced text
</text>
<text id="V">
referenced text
</text>
<text id="W">
referenced text
</text>
<text id="X">
referenced text
</text>
<text id="Y">
referenced text
</text>
<text id="Z">
referenced text
</text>
<text id="aa">
referenced text
</text>
</defs>
<tref xlink:href="#a"/>
<tref xlink:href="#a"/>
<tref xlink:href="#a"/>
<tref xlink:href="#b"/>
<tref xlink:href="#c"/>
<tref xlink:href="#d"/>
<tref xlink:href="#e"/>
<tref xlink:href="#f"/>
<tref xlink:href="#g"/>
<tref xlink:href="#h"/>
<tref xlink:href="#i"/>
<tref xlink:href="#j"/>
<tref xlink:href="#k"/>
<tref xlink:href="#l"/>
<tref xlink:href="#m"/>
<tref xlink:href="#n"/>
<tref xlink:href="#o"/>
<tref xlink:href="#p"/>
<tref xlink:href="#q"/>
<tref xlink:href="#r"/>
<tref xlink:href="#s"/>
<tref xlink:href="#t"/>
<tref xlink:href="#u"/>
<tref xlink:href="#v"/>
<tref xlink:href="#w"/>
<tref xlink:href="#x"/>
<tref xlink:href="#y"/>
<tref xlink:href="#z"/>
<tref xlink:href="#A"/>
<tref xlink:href="#B"/>
<tref xlink:href="#C"/>
<tref xlink:href="#D"/>
<tref xlink:href="#E"/>
<tref xlink:href="#F"/>
<tref xlink:href="#G"/>
<tref xlink:href="#H"/>
<tref xlink:href="#I"/>
<tref xlink:href="#J"/>
<tref xlink:href="#K"/>
<tref xlink:href="#L"/>
<tref xlink:href="#M"/>
<tref xlink:href="#N"/>
<tref xlink:href="#O"/>
<tref xlink:href="#P"/>
<tref xlink:href="#Q"/>
<tref xlink:href="#R"/>
<tref xlink:href="#S"/>
<tref xlink:href="#T"/>
<tref xlink:href="#U"/>
<tref xlink:href="#V"/>
<tref xlink:href="#W"/>
<tref xlink:href="#X"/>
<tref xlink:href="#Y"/>
<tref xlink:href="#Z"/>
<tref xlink:href="#aa"/>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB