Moving SVG Gradients to defs

index.html

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

<button onclick="convert()">Gradients to defs, 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="XMLID_20_" fill="url(#XMLID_21_)" points="99,222.6 372.5,0 137.5,133.3 "/>
<g id="XMLID_19_">
	<linearGradient id="XMLID_22_" gradientUnits="userSpaceOnUse" x1="65.0728" y1="176.502" x2="392.601" y2="50.4824">
		<stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
		<stop  offset="0.5305" style="stop-color:#ABE1FA"/>
		<stop  offset="0.7715" style="stop-color:#9DD5F4"/>
		<stop  offset="1" style="stop-color:#96CFF1"/>
	</linearGradient>
	<polygon id="XMLID_34_" fill="url(#XMLID_22_)" points="372.5,0 83,110.5 99,222.6 137.5,133.3 	"/>
</g>
<linearGradient id="XMLID_23_" gradientUnits="userSpaceOnUse" x1="252.8048" y1="131.8038" x2="439.4579" y2="45.2588">
	<stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
	<stop  offset="0.552" style="stop-color:#ABE1FA"/>
	<stop  offset="1" style="stop-color:#96CFF1"/>
</linearGradient>
<polygon id="XMLID_18_" fill="url(#XMLID_23_)" points="372.5,0 137.5,133.3 288.4,191.6 "/>
<linearGradient id="XMLID_24_" gradientUnits="userSpaceOnUse" x1="149.4565" y1="57.112" x2="407.0489" y2="-62.3254">
	<stop  offset="5.618000e-03" style="stop-color:#D7F0FC"/>
	<stop  offset="0.552" style="stop-color:#ABE1FA"/>
	<stop  offset="1" style="stop-color:#96CFF1"/>
</linearGradient>
<polygon id="XMLID_17_" fill="url(#XMLID_24_)" points="372.5,0 83,110.5 0,80.1 "/>
</svg>
-->

Moving SVG Gradients to defs.markdown

Moving SVG Gradients to defs

Simple paste-n-go to move Illustrator-generated gradients out of groups and into defs

A Pen by Jake Albaugh on CodePen.

License.

script.js

function convert() {
  var source = document.getElementById("source").value;
  var gradientExp = /(<[a-zA-Z]+Gradient[\S\s]+?<\/[a-zA-Z]+Gradient>)/g;
  var matches = source.match(gradientExp);
  if(matches) {
    for (var m = 0; m < matches.length;) {
      source = source.replace(matches[m++], "");
    }
    source = source.replace("<defs>", "<defs>\n"+matches.join("\n"));
  }
  document.getElementById("output").value = source;
}

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;
}