svg-cleaner

<!DOCTYPE html> <html> <head> <title>svg-cleaner.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> svg-cleaner.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <h2>SVG Cleaner</h2> A tool for cleaning SVG Files - (yet partial) port of Scour to JavaScript. Visit the original <a href="http://codedread.com/scour/">Scour - an SVG scrubber, http://codedread.com/scour/</a> Scour was created by Jeff Schiller. Please note that this is a partial port, which means it is not finsihed at all. For thoose who want to clean their SVG files and have them as clean as possible as I highly recommend to use the original Scour.py. (Please see the list of implemented and missing processing steps below.) <h2>License</h2> SVG Cleaner Copyright 2012 Michael Schieben Scour Copyright 2010 Jeff Schiller Copyright 2010 Louis Simard Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. <h2>About the port</h2> I needed a library to work with <a href="http://github.com/preciousforever/SVG-Stacker">SVG-Stacker</a>, that could rename IDs and keep the references inside the SVG document structure intact. SVG-Stacker merges different svg files and needs to make sure that the ids from different files are unique in the merged version. If found that Scour implemented that feature. The goal of the port was to bring the power of Scour to the JavaScript world, make it available as commandline tool and usable as module for node.js. I tried to keep the ideas and way how Scour cleans SVG files. I translated the processing steps and copied most of the original comments from scour into the new source code, as they describe the original ideas best. I marked all of these orginial comments by putting 'Scour:' in the first line an used the markdown syntax for quotes (>). <ul> <li>Missing processing steps are marked with an comment '@missing'.</li> <li>Changed processing steps are marked with an comment containern '@extended' or '@changed'</li> <li>Some functions and variable names are changed to (hopefully) be more descriptive.</li> </ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Implemented</h2> <ul> <li>Removal of namespaced elements and attributes</li> <li>Removal of comments</li> <li>Repairation of styles</li> <li>Removal of unreferenced elements</li> <li>Removal of empty elements</li> <li>Removal of unused attributes</li> <li>Shortening of id attribute values</li> </ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Missing</h2> <ul> <li>remove the xmlns: declarations now</li> <li>ensure namespace for SVG is declared</li> <li>check for redundant SVG namespace declaration</li> <li>convert colors to #RRGGBB format</li> <li>remove <metadata> if the user wants to</li> <li>flattend defs elements into just one defs element</li> <li>removeDuplicateGradientStops();</li> <li>remove gradients that are only referenced by one other gradient</li> <li>remove duplicate gradients</li> <li>createGroupsForCommonAttributes()</li> <li>move common attributes to parent group</li> <li>remove unused attributes from parent</li> <li>moveAttributesToParentGroup</li> <li>remove unnecessary closing point of polygons and scour points</li> <li>scour points of polyline</li> <li>clean path data</li> <li>scour lengths (including coordinates)</li> <li>reducePrecision</li> <li>removeDefaultAttributeValues</li> <li>optimizeTransforms</li> <li>convert rasters references to base64-encoded strings</li> <li>properly size the SVG document</li> </ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h2>Original Notes from Scour</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> Scour: <blockquote> Notes: rubys' path-crunching ideas here: <a href="">http://intertwingly.net/code/svgtidy/spec.rb</a> (and implemented here: http://intertwingly.net/code/svgtidy/svgtidy.rb ) </blockquote> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <blockquote> Yet more ideas here: <a href="http://wiki.inkscape.org/wiki/index.php/Save_Cleaned_SVG">Inkscape Wiki</a> <ul> <li>Process Transformations <ul><li>Collapse all group based transformations</li></ul></li> </ul> </blockquote> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <blockquote> Even more ideas here: <a href="">http://esw.w3.org/topic/SvgTidy</a> <ul> <li>analysis of path elements to see if rect can be used instead? (must also need to look at rounded corners)</li> </ul> </blockquote> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <blockquote> Next Up: <ul> <li>why are marker-start, -end not removed from the style attribute?</li> <li>why are only overflow style properties considered and not attributes?</li> <li>only remove unreferenced elements if they are not children of a referenced element</li> <li>add an option to remove ids if they match the Inkscape-style of IDs</li> <li>investigate point-reducing algorithms</li> <li>parse transform attribute</li> <li>if a <g> has only one element in it, collapse the <g> (ensure transform, etc are carried down)</li> </ul> </blockquote> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h2>Implementation</h2> </td> <td class="code"> <div class="highlight"><pre>var _ = require('underscore') , fs = require('fs') , cheerio = require('cheerio') , CSSOM = require('cssom') , $ ;</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> Namespace Prefixes that should be removed </td> <td class="code"> <div class="highlight"><pre>var namespacePrefixes = ['dc', 'rdf', 'sodipodi', 'cc', 'inkscape'];</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <hr /> <h2>Sanitize References</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> Scour: Removes the unreferenced ID attributes. </td> <td class="code"> <div class="highlight"><pre>function removeUnreferencedIDs() { var identifiedElements = $('[id]'); var referencedIDs = findReferencedElements(); _(identifiedElements).each(function(node) { var $node = $(node); var id = $node.attr('id'); if(!_(referencedIDs).has(id)) { $node.removeAttr('id'); }; }); }</pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> Style-Properties and Element-Attributes that might contain an id, a reference to another object </td> <td class="code"> <div class="highlight"><pre>var referencingProperties = ['fill', 'stroke', 'filter', 'clip-path', 'mask', 'marker-start', 'marker-end', 'marker-mid']; var REFERENCE_TYPE = { STYLE_TAG: 0, XLINK: 1, STYLE_ATTRIBUTE: 2, ATTRIBUTE: 4 }; function addReferencingElement(ids, id, referenceType, node, additionalInfo) { var id = id.replace(/#/g, ''); if(!_(ids).has(id)) { ids[id] = []; } if(_(additionalInfo).isUndefined()) { additionalInfo = []; } ids[id].push([referenceType, node, additionalInfo]); return ids; }</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> extracts #id out of CSS url('#id') </td> <td class="code"> <div class="highlight"><pre>function extractReferencedId(value) { var v = value.replace(/[\s]/g, ''); if(v.indexOf('url') !== 0) { return false; } return value.replace(/[\s]/g, '').slice(4, -1).replace(/["']/g, ''); }</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> replaced #fromid in CSS url('#fromid') to url('#toid') </td> <td class="code"> <div class="highlight"><pre>function replaceReferencedId(value, idFrom, idTo) { var re = new RegExp('url\$[\'"]?#' + idFrom + '[\'"]?\$', 'g'); return value.replace(re, "url(#" + idTo + ")"); }</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> Scour: <blockquote> Returns the number of times an ID is referenced as well as all elements that reference it. node is the node at which to start the search. The return value is a map which has the id as key and each value is an array where the first value is a count and the second value is a list of nodes that referenced it. </blockquote> </td> <td class="code"> <div class="highlight"><pre>function findReferencedElements() { var ids = {}; _($('*')).each(function(node) { var $node = $(node); if(node.name == 'style') { var styles = CSSOM.parse($node.text()); _(styles.cssRules).each(function(rule) { _(referencingProperties).each(function(referencingProperty) { if(_(rule.style).has(referencingProperty)) { var id = extractReferencedId(rule.style[referencingProperty]); if(id) { addReferencingElement(ids, id, REFERENCE_TYPE.STYLE_TAG, node); } } }); }); return; }</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> if xlink:href is set, then grab the id </td> <td class="code"> <div class="highlight"><pre> var href = $node.attr('xlink:href'); if(href) { addReferencingElement(ids, href, REFERENCE_TYPE.XLINK, node); }</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> now get all style properties </td> <td class="code"> <div class="highlight"><pre> var styles = parseStyles($node.attr('style')); _(referencingProperties).each(function(referencingProperty) {</pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> first check attributes </td> <td class="code"> <div class="highlight"><pre> var value = $node.attr(referencingProperty); if(!_.isUndefined(value)) { var id = extractReferencedId(value); if(id) { addReferencingElement(ids, id, REFERENCE_TYPE.ATTRIBUTE, node, referencingProperty); } }</pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> then inline styles </td> <td class="code"> <div class="highlight"><pre> if(_(styles).has(referencingProperty)) { var id = extractReferencedId(styles[referencingProperty]); if(id) { addReferencingElement(ids, id, REFERENCE_TYPE.STYLE_ATTRIBUTE, node); } } }); }); return ids; }</pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> scour: <blockquote> Shortens ID names used in the document. ID names referenced the most often are assigned the shortest ID names. @missing scour: If the list unprotectedElements is provided, only IDs from this list will be shortened. </blockquote> </td> <td class="code"> <div class="highlight"><pre>function shortenIDs(startNumber) { if(_.isUndefined(startNumber)) { startNumber = 1; } var $identifiedElements = $('[id]'); var referencedIDs = findReferencedElements();</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> scour: <blockquote> Make idList (list of idnames) sorted by reference count descending, so the highest reference count is first. First check that there's actually a defining element for the current ID name. (Cyn: I've seen documents with #id references but no element with that ID!) </blockquote> </td> <td class="code"> <div class="highlight"><pre> var idList = _(_(referencedIDs).keys()).filter(function(id) { return ($identifiedElements.find('#' + id).size() > 0); }); idList = _(idList).sortBy(function(id) { return referencedIDs[id].length; }).reverse(); _(idList).each(function(id) { var shortendID = intToID(startNumber++);</pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> scour: <blockquote> First make sure that this element isn't already using the ID name we want to give it. </blockquote> </td> <td class="code"> <div class="highlight"><pre> if(id == shortendID) { return; }</pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> scour: <blockquote> Then, skip ahead if the new ID is already in identifiedElement </blockquote> </td> <td class="code"> <div class="highlight"><pre> while($identifiedElements.find('#' + shortendID).size() > 0) { shortendID = intToID(startNumber++); }</pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> scour: <blockquote> Then go rename it. </blockquote> </td> <td class="code"> <div class="highlight"><pre> renameID(id, shortendID, $identifiedElements, referencedIDs); }); }</pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> scour: <blockquote> Returns the ID name for the given ID number, spreadsheet-style, i.e. from a to z, then from aa to az, ba to bz, etc., until zz. </blockquote> </td> <td class="code"> <div class="highlight"><pre>function intToID(num) { var idName = ''; while (num > 0) { num--; idName = String.fromCharCode((num % 26) + 'a'.charCodeAt(0)) + idName; num = Math.floor(num / 26) } return idName; }</pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> scour: <blockquote> Changes the ID name from idFrom to idTo, on the declaring element as well as all references in the document doc. Updates identifiedElements and referencedIDs. Does not handle the case where idTo is already the ID name of another element in doc. </blockquote> </td> <td class="code"> <div class="highlight"><pre>function renameID(idFrom, idTo, $identifiedElements, referencedIDs) { var $definingNode = $identifiedElements.find('#' + idFrom); $definingNode.attr('id', idTo); var referringNodes = referencedIDs[idFrom]; _(referringNodes).each(function(referenceTypeNodeAndAdditionalInfos) { var property = referenceTypeNodeAndAdditionalInfos[0]; var node = $(referenceTypeNodeAndAdditionalInfos[1]); switch(property) { case REFERENCE_TYPE.STYLE_TAG: node.text(replaceReferencedId(node.text(), idFrom, idTo)); break; case REFERENCE_TYPE.XLINK: node.attr('xlink:href', '#' + idTo); break; case REFERENCE_TYPE.STYLE_ATTRIBUTE: node.attr('style', replaceReferencedId(node.attr('style'), idFrom, idTo)); break; case REFERENCE_TYPE.ATTRIBUTE: var attributeName = referenceTypeNodeAndAdditionalInfos[2]; node.attr(attributeName, replaceReferencedId(node.attr(attributeName), idFrom, idTo)); break; default:</pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> unkonw reference_type </td> <td class="code"> <div class="highlight"><pre> } }); }</pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> scour: <blockquote> removes all unreferenced elements except for <code><svg>, , <metadata>, <title>, and <desc></code>. Also vacuums the defs of any non-referenced renderable elements. </blockquote> </td> <td class="code"> <div class="highlight"><pre>function removeUnreferencedElements() { var referencedIDs = findReferencedElements(); var alwaysKeepTags = ['font', 'style', 'metadata', 'script', 'title', 'desc']; function removeUnreferencedElementsInTag(node) { _($(node).children()).each(function(node) { </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> scour: <blockquote> we only remove if it is not one of our tags we always keep (see above) </blockquote> </td> <td class="code"> <div class="highlight"><pre> if(_(alwaysKeepTags).indexOf(node.name) !== -1) { return; } var $node = $(node); var id = $node.attr('id'); if(!_(referencedIDs).has(id)) { if(node.name == 'g') {</pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> scour: <blockquote> we only inspect the children of a group in a defs if the group is not referenced anywhere else </blockquote> </td> <td class="code"> <div class="highlight"><pre> removeUnreferencedEl