fabric.js/site/posts/demos/_posts/2011-9-1-svg_rendering.html

---
layout: demo
title: SVG Rendering
---

<style>
  #bd-wrapper { text-align: center; }
  .canvas-container { border: 1px solid #ccc; display: inline-block; vertical-align: top; margin-bottom: 10px; background: #fff; }
  .block { float: left; margin-right: 10px; margin-bottom: 10px }
  .block.left { clear: left; }
  .test { background: #ccc; margin-right: 10px; margin-bottom: 10px; padding-left: 10px; 
    box-shadow: rgba(0,0,0,0.5) 1px 1px 3px; overflow: hidden; display: inline-block; }
  iframe { background: #fff; border: 0; max-width: 600px }
</style>

<script>
  function toShape(objects, options) {
    if (objects.length > 1) {
      return new fabric.PathGroup(objects, options);
    }
    return objects[0];
  }
</script>

<script>
  function initCanvas(id) {
    var canvas;
    fabric.loadSVGFromURL('/assets/' + id + '.svg', function(objects, options) {
      var shape = toShape(objects, options);
      
      var canvasEl = document.getElementById('c' + id);
      
      canvasEl.width = shape.width || 600;
      canvasEl.height = shape.height || 600;
      
      var iframeEl = canvasEl.parentNode.nextSibling.childNodes[1];
      if (iframeEl) {
        iframeEl.style.width = canvasEl.width + 'px';
        iframeEl.style.height = canvasEl.height + 'px';
      }
      
      canvas = window['__canvas' + id] = new fabric.Canvas('c' + id, { selection: false });
      
      canvas.add(shape).centerObjectH(shape).centerObjectV(shape).renderAll();
      shape.setCoords();
      canvas.calcOffset();
    });
  }
</script>

<script>
  var blacklist = [ 
    16 /* image doesn't render properly */, 
    20 /* very intense shape */, 
    33, 34, 35 /* very intense shapes */,
    52 /* image doesn't render properly */,
    56 /* image doesn't render properly */,
    66 /* the shape is too big */,
    68 /* svg has parsing error */,
    72, 73 /* shapes are too big */,
    74, 75 /* shapes has weird dimensions */,
    78, 79, 80, 81, 82, 83, 84, 85 /* wrong offset */
  ];
  for (var i = 1; i <= 147; i++) {
    if (blacklist.indexOf(i) == -1) {
      document.write('<div class="test"><div class="block left"><p>Canvas #' + i + '</p>');
      document.write('<canvas id="c' + i + '" width="600" height="600"></canvas></div>');
      document.write('<div class="block"><p><a href="/assets/' + i + '.svg">SVG</a></p>');
      document.write('<iframe src="/assets/' + i + '.svg"></iframe></div></div><br>');
      initCanvas(i);
    }
  }
</script>