Matter and Void

SVG Blending

July 21, 2015project

Playing around with blending two SVG images through a canvas element. One design constraint was to have the SVG be inline in order to do dynamic color changing before applying the blending (and to support resizing). This makes use of the SVGInjector library.

The code is:

function importSVG(sourceSVG, targetCanvas) {
  var svgXml = (new XMLSerializer()).serializeToString(sourceSVG)
  var ctx = targetCanvas.getContext('2d')
  ctx.globalCompositeOperation = 'multiply'
  var img = new Image()
  img.height = '400'
  img.width = '400'
  img.onload = function() {
    ctx.drawImage(img, 0, 0, 400, 400)
  }
  img.src = "data:image/svg+xml;base64," + btoa(svgXml)
}

var options = {
  evalScripts:'never',
  each: function(svg) {
    svg.style.height = '400px'
    svg.style.width = '400px'
    importSVG(svg, document.querySelector('canvas'))
  }
}

SVGInjector(document.querySelectorAll('.replace'), options)


Dan Vingo
This is the personal site of Dan VingoAbout