Cleaning AI ids in SVG

Cleaning AI ids in SVG.markdown

Cleaning AI ids in SVG

Simple paste-n-go to cleanup Illustrator-generated IDs

A Pen by Jake Albaugh on CodePen.

License.

index.html

<textarea id=source placeholder="Crummy AI SVG here"></textarea>

<button onclick="convert()">Get rid of ID junk, plz!</button>

<textarea id=output placeholder="Output will be here..."></textarea>

<!--
FOR EXAMPLE, PASTE THIS IN:
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="372.5px" height="222.6px" viewBox="0 0 372.5 222.6" enable-background="new 0 0 372.5 222.6"
	 xml:space="preserve">
<defs>
</defs>
<linearGradient id="XMLID_21_" gradientUnits="userSpaceOnUse" x1="358.3431" y1="-18.6133" x2="37.5315" y2="245.9408">
	<stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
	<stop  offset="0.2382" style="stop-color:#BAE6FB"/>
	<stop  offset="0.4031" style="stop-color:#ABE1FA"/>
	<stop  offset="1" style="stop-color:#96CFF1"/>
</linearGradient>
<polygon id="flower_20_" fill="url(#XMLID_21_)" points="99,222.6 372.5,0 137.5,133.3 "/>
<g id="XMLID_19_"></g>
</svg>
-->

script.js

function convert() {
  var source = document.getElementById("source").value;
  // removes number from non-XMLID urls/ids
  var noXMLidExp = /(((id=\"|url\(\#))[^ (XMLID)]*)_[0-9]*_("|\))/g;
  // removes trailing underscore from the remaining XMLID urls/ids
  var XMLidExp = /(id=\"|url\(\#)(XMLID_)([0-9]*)_("|\))/g;
  // first pass, clean no XMLID urls/ids
  var cleanedNoXMLID = source.replace(noXMLidExp, "$1$4");
  // second pass, clean remaining XMLID urls/ids
  document.getElementById("output").value = cleanedNoXMLID.replace(XMLidExp, "$1TROUT_$3$4");
}

style.css

textarea, button {
  width: 90%;
  max-width: 700px;
  margin: 1em auto;
  display: block;
  box-sizing: border-box;
}
textarea {
  height: 300px;
  padding: 1em;
}

button {
  padding: 1em 2em;
}