SVG.js test

by Zareh Geertjes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script>
<div id="container"></div>
<textarea id="newSVG"></textarea>

CSS

#newSVG {
  border: 0;
  padding: 10px;
  font-size: 10px;
  line-height: 16px;
  width: 600px;
  height: 250px;
}

JavaScript

var rawSvg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><line id="line1234" fill="none" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="138.682" y1="250" x2="293.248" y2="95.433" /><rect id="rect1235" x="22.48" y="19.078" fill="#F7931E" stroke="#C1272D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="94.972" height="94.972" /><path id="path1236" opacity="0.5" fill="#29ABE2" d="M189.519,131.983c0,5.523-4.477,10-10,10H92.257c-5.523,0-10-4.477-10-10V53.659 c0-5.523,4.477-10,10-10h87.262c5.523,0,10,4.477,10,10V131.983z" /><circle id="circle1237" opacity="0.8" fill="#8CC63F" cx="201.603" cy="159.508" r="69.067" />  <polygon id="polygon1238" fill="none" stroke="#8C6239" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="286.331,287.025  227.883,271.365 212.221,212.915 255.009,170.127 313.459,185.789 329.119,244.237 " /></svg>'

var draw = SVG('container').size(400, 400);
var rawSvg = draw.svg(rawSvg);

rawSvg.each(function(i, children) {
  if (this.type != "defs" && this.type != "svg") {
    if (this.attr('fill') != 'none') {

      //console.log(this.attr('fill'));
      if (this.attr('fill') == '#8CC63F') {
        this.animate().fill({
          color: '#000'
        }).cx(300).cy(80).opacity(1)
        this.linkTo(function(link) {
          link.to('http://gek.media').target('_blank')
        })
      }

    }
  }
}, true)

document.getElementById('newSVG').value = draw.svg()