create_svg

create_svg

//http://codepen.io/anon/pen/dGEQWN
//http://codepen.io/anon/pen/rxEazy

function convertImageToCanvas(image){
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext('2d').drawImage(image, 0,0);
  return canvas;
}

function createSvgPattern(){
  // var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width','100%');
  svg.setAttribute('height','100%');
  // svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
  var patterns = [
    {
      id:'smallGrid',
      width:8,
      height:8,
      pattern_units:'userSpaceOnUse',
      paths:[{
        d:'M 8 0 L 0 0 0 8',
        fill:'none',
        stroke:'gray',
        stroke_width:'0.5'
      }]
    },
    {
      id:'grid',
      width:80,
      height:80,
      pattern_units:'userSpaceOnUse',
      rect:[{
        width:80,
        height:80,
        fill:'url(#smallGrid)'
      }],
      paths:[{
        d:'M 80 0 L 0 0 0 80',
        fill:'none',
        stroke:'gray',
        stroke_width:'1'
      }]
    }
    // {
    //   id:'image',
    //   x:0,
    //   y:0,
    //   pattern_units:'userSpaceOnUse',
    //   height:'500',
    //   width:'500',
    //   images:[
    //     {
    //       x:0,
    //       y:0,
    //       width:'500',
    //       height:'500',
    //       xlink_href:'http://stancewords.stanceworks.netdna-cdn.com/wp-content/uploads/2016/02/stanceworks-air-lift-3H-install-how-to-help-title.jpg'
    //     }
    //   ]
    // }
  ];
  // var defs = document.createElement('defs');
  var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  if(patterns.length > 0){
    createPatterns(patterns, patterns[0], defs).then(function(response){
      var mainRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      mainRect.setAttribute('width', '100%');
      mainRect.setAttribute('height', '100%');
      mainRect.setAttribute('fill', 'url(#grid)');
      svg.appendChild(response);
      svg.appendChild(mainRect);
      console.log('SVG :', svg);
      svg.setAttribute('style', 'background-image: url(http://stancewords.stanceworks.netdna-cdn.com/wp-content/uploads/2016/02/stanceworks-air-lift-3H-install-how-to-help-title.jpg);');
      var wrapper = document.createElement('div');
      wrapper.setAttribute('style', 'width:1200px;height:560px');
      wrapper.appendChild(svg);
      document.body.appendChild(wrapper);
    });
  }
}

function createPatterns(list, current, defs){
  return new Promise(function(resolve, reject){
    var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
    pattern.setAttribute('id',current.id);
    pattern.setAttribute('width',current.width);
    pattern.setAttribute('height',current.height);
    pattern.setAttribute('patternUnits',current.pattern_units);
    if(current.x !== void(0)){
      pattern.setAttribute('x',current.x);
    }
    if(current.y !== void(0)){
      pattern.setAttribute('y',current.y);
    }
    createChildsOfPattern(current, pattern).then(function(response){
      if(response){
        list.shift();
        defs.appendChild(response);
        if(list.length > 0){
          resolve(createPatterns(list, list[0], defs));
        } else {
          resolve(defs);
        }
      }
    });
  });
}

function createChildsOfPattern(current, pattern){
  return new Promise(function(resolve, reject){
    createPatternPaths(current.paths, pattern).then(function(response){
      if(response){
        createPatternRectangles(current.rect, response).then(function(response){
          if(response){
            createPatternImages(current.images, response).then(function(response){
              if(response){
                resolve(response);
              }
            });
          }
        });
      }
    });
  });
}

function createPatternPaths(paths, pattern){
  return new Promise(function(resolve, reject){
    if(typeof(paths) === 'object' && paths.length > 0){
      for(var x=0; x<paths.length; x++){
        // var path = document.createElement('path');
        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d',paths[x].d);
        path.setAttribute('fill',paths[x].fill);
        path.setAttribute('stroke',paths[x].stroke);
        path.setAttribute('stroke-width',paths[x].stroke_width);
        pattern.appendChild(path);
      };
      if(x === paths.length){
        resolve(pattern);
      }
    } else {
      resolve(pattern);
    }
  });
}

function createPatternRectangles(rectangles, pattern){
   var promise = new Promise(function(resolve, reject){
    if(typeof(rectangles) === 'object' && rectangles.length > 0){
      for(var x=0; x < rectangles.length; x++){
        // var rect = document.createElement('rect');
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('width',rectangles[x].width);
        rect.setAttribute('height',rectangles[x].height);
        rect.setAttribute('fill',rectangles[x].fill);
        pattern.appendChild(rect);
      }
      if(x === rectangles.length){
        resolve(pattern);
      }
    } else {
      resolve(pattern);
    }
   });
  return promise;
}

function createPatternImages(images, pattern){
  return new Promise(function(resolve, reject){
    if(typeof(images) === 'object' && images.length > 0){
      for(var x=0; x < images.length; x++){
        var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
        image.setAttribute('x',images[x].x);
        image.setAttribute('y',images[x].y);
        image.setAttribute('width',images[x].width);
        image.setAttribute('height',images[x].height);
        image.setAttribute('xlink:href',images[x].xlink_href);
        pattern.appendChild(image);
      }
      if(x === images.length){
        resolve(pattern);
      }
    } else {
      resolve(pattern);
    }
  });
}

function handleFileSelect(event){
  event.stopPropagation();
  event.preventDefault();
  
  var files = event.dataTransfer.files;
  
  var output = [];
  for(var i=0, f; f = files[i]; i++){
    console.log(f);
  }
}

function handleDragOver(event){
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
}

// var dropArea = document.getElementById('drop_area');
// dropArea.addEventListener('dragover', handleDragOver, false);
// dropArea.addEventListener('drop', handleFileSelect, false);

// document.body.appendChild(convertImageToCanvas(document.getElementById('testImg')));
createSvgPattern();

create_svg html

<!-- <div id="drop_area">
  Drop your image here
</div> -->
<!-- <img id="testImg" src="http://stancewords.stanceworks.netdna-cdn.com/wp-content/uploads/2016/02/stanceworks-air-lift-3H-install-how-to-help-title.jpg" style="display:none;"/> -->

create_svg_css

body, div{
  font-family: 'Droid Sans', sans-serif;
}

#drop_area{
  border: 2px dashed #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font: 20pt bold;
  font-family: 'Droid Sans', sans-serif;
  color: #bbb;
}