svgからキャンバスへの変換の座標が正しくない

Question

私はSVGイメージをfabricjsを使ってキャンバスに変換しています（それ以降はPNGに変換しようとしています）。

<script src="https://staging.chiplab.com/test/fabric.js" data-cover></script> 
<canvas id="canvas" width="600" height="600"></canvas> 
<script> 

var canvas = new fabric.Canvas('canvas'); 
fabric.loadSVGFromURL('https://staging.chiplab.com/test/1.svg', function(objects, options) { 
    var obj = fabric.util.groupSVGElements(objects, options); 
    canvas.add(obj).renderAll(); 
});  
</script> 

ルックス： それは、私はいくつかの重要なのparamsを逃すよう

あなたは、私が変換のために使用していますここで変換 http://staging.chiplab.com/test/1.html とオリジナルのSVG http://staging.chiplab.com/test/1.svg

コードの結果を見ることができます動作しますが、見えます何らかの理由でブラウザがsvgを解析するときのように、親ブロックに対する画像の位置付け

<svg id="fore" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="pointer-events:none"> 
    <image x="0" y="0" width="556.1568" height="556.1568" style="pointer-events:inherit" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://staging.chiplab.com/media/uploads/dol/2/147751672809184826599.png" preserveAspectRatio="none" transform="rotate(0,278.0784,278.0784)"></image> 
    </svg> 

しかし、fabricjsで解析すると、画像の位置は0：0座標になります。 私はfabricjsがそのような動作を回避する可能性があると思いますが、私はドキュメントでそれを見つけることができません。

ご回答いただきありがとうございます。

Answer 1

Something svgの機能はサポートされていません。 このSVGには、パス上にテキストがあり、fabricjがまだ解析できないその他の機能があります。 画像に変換する場合は、画像として読み込みます。それをキャンバス上にペイントします。

あなたのドメインからこのsvg、crossOriginまたは内部のsvgの部分に関連するものから読み込みの問題があるようです。

string = '<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" xlinkns="http://www.w3.org/1999/xlink" width="791" height="593.0568" x="540" y="600" overflow="visible"> <defs> <filter id="canvashadow" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"></feGaussianBlur> <feOffset in="blur" dx="1" dy="1" result="offsetBlur"></feOffset> <feMerge> <feMergeNode in="offsetBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <svg id="canvasBackground" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="pointer-events:none"> <rect width="100%" height="100%" x="0" y="0" fill="#FFF" style="pointer-events:none" filter="url(#canvashadow)"></rect> <pattern id="gridpattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> <image x="0" y="0" width="100" height="100"></image> </pattern> </svg> <svg id="Blueprint" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="pointer-events:none"> <image x="0" y="0" width="556.1568" height="556.1568" style="pointer-events:inherit" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://staging.chiplab.com/js/all/editor/images/blank.gif" preserveAspectRatio="none" transform="rotate(0,278.0784,278.0784)"></image> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="556.1568" height="556.1568" id="svgcontent" overflow="hidden" x="117.42160000000001" y="18.45" viewBox="0 0 150.72 150.72"> <rect id="colorRect" width="150.72" height="150.72" x="0" y="0" fill="url(#svg_27)" style="pointer-events:none"></rect> <g style="pointer-events:all"> <title style="pointer-events:inherit">Layer 1</title> <image x="30.4878" y="30.4878" width="89.74439" height="89.74439" id="svg_34" preserveAspectRatio="xMidYMid meet" xlink:href="http://staging.chiplab.com/media/uploads/dol/2/1477839290025450446210.png" resized="true" imagetype="image1" style="pointer-events:inherit"></image> <g id="svg_6" class="clipart_img" attr_c="clipart_img" attr_aspt="aspect" style="pointer-events:inherit"> <path d="M75.36,31.36C99.56,31.36 119.26,51.06 119.26,75.26S99.56,119.26 75.36,119.26S31.36,99.56 31.36,75.36S51.16,31.36 75.36,31.36M75.36,11.56C40.16,11.56 11.56,40.16 11.56,75.36S40.16,139.16 75.36,139.16S139.16,110.56 139.16,75.36S110.56,11.56 75.36,11.56L75.36,11.56z" id="svg_5" fill="url(#svg_30)" style="pointer-events:inherit"></path> </g> <g id="svg_14" class="clipart_img" attr_c="clipart_img" attr_aspt="aspect" fill-opacity="0.6" style="pointer-events:inherit"> <path d="M72.56,139.16C70.56,139.16 68.76,138.96 66.96,138.66L69.46,119.46C70.86,119.66 72.16,119.66 73.56,119.96L72.56,139.16zM78.16,139.16L77.26,119.66C78.66,119.66 79.96,119.46 81.36,119.16L84.06,138.36C81.96,138.86 80.16,139.16 78.16,139.16zM61.26,137.76C59.46,137.26 57.66,136.86 55.86,136.16L61.76,117.66C63.16,118.16 64.26,118.36 65.56,118.76L61.26,137.76zM89.46,137.76L85.16,118.76C86.56,118.56 87.66,118.06 88.96,117.66L95.06,136.16C93.26,136.66 91.46,137.26 89.46,137.76zM50.36,134.16C48.56,133.46 46.96,132.56 45.16,131.66L54.46,114.46C55.56,115.16 56.76,115.56 58.06,116.26L50.36,134.16zM100.56,134.16L92.86,116.26C93.96,115.76 95.36,115.16 96.46,114.46L105.76,131.46C103.86,132.56 102.06,133.46 100.56,134.16zM40.26,128.76C38.66,127.66 37.06,126.46 35.76,125.36L47.76,110.16C48.86,111.06 49.76,111.76 50.96,112.46L40.26,128.76zM110.46,128.76L99.56,112.66C100.66,111.96 101.86,111.06 102.76,110.36L114.76,125.56C113.56,126.46 112.06,127.56 110.46,128.76zM31.16,121.66C29.76,120.26 28.46,118.96 27.36,117.56L42.06,104.66C42.96,105.56 43.86,106.66 44.76,107.56L31.16,121.66zM119.46,121.46L106.16,107.46C107.06,106.56 107.96,105.66 108.86,104.56L123.56,117.26C122.16,118.76 120.86,120.36 119.46,121.46zM23.76,113.06C22.66,111.46 21.46,109.86 20.56,108.36L37.06,98.36C37.76,99.46 38.46,100.66 39.36,101.76L23.76,113.06zM126.96,112.86L111.36,101.56C112.06,100.46 112.96,99.26 113.66,98.16L130.36,108.16C128.96,109.76 128.06,111.26 126.96,112.86zM17.86,103.16C16.96,101.36 16.26,99.76 15.56,97.96L33.66,91.16C34.16,92.26 34.56,93.66 35.26,94.76L17.86,103.16zM132.76,103.16L115.36,94.76C116.06,93.66 116.46,92.26 116.96,91.16L135.06,97.96C134.36,99.56 133.66,101.36 132.76,103.16zM13.86,92.56C13.36,90.76 12.96,88.96 12.46,86.86L31.46,83.46C31.66,84.86 31.96,85.96 32.36,87.26L13.86,92.56zM136.86,92.26L118.16,87.06C118.66,85.66 118.86,84.56 119.06,83.26L138.06,86.66C137.76,88.66 137.36,90.46 136.86,92.26zM11.76,81.26C11.56,79.46 11.56,77.36 11.56,75.56L30.96,75.56C30.96,76.96 30.96,78.26 31.16,79.66L11.76,81.26zM138.86,81.26L119.46,79.46C119.46,78.36 119.66,76.96 119.66,75.66L119.66,75.16L139.06,75.16C139.16,77.36 138.86,79.16 138.86,81.26zM31.16,71.46L12.06,69.96C12.26,68.16 12.56,66.16 12.76,64.26L31.76,67.66C31.46,68.76 31.16,70.16 31.16,71.46zM119.46,71.26C119.26,69.86 119.26,68.56 118.96,67.46L137.96,63.86C138.46,65.66 138.66,67.66 138.66,69.56L119.46,71.26zM32.56,63.56L13.86,58.56C14.36,56.76 14.96,54.96 15.66,53.16L33.76,59.96C33.26,61.06 32.76,62.46 32.56,63.56zM118.16,63.36C117.66,61.96 117.46,60.86 116.76,59.56L134.86,52.56C135.56,54.36 136.26,56.16 136.66,57.96L118.16,63.36zM35.26,56.16L17.86,47.76C18.76,45.96 19.66,44.36 20.56,42.76L37.26,52.76C36.36,53.86 35.96,54.96 35.26,56.16zM115.16,55.86C114.46,54.76 114.06,53.56 113.36,52.46L129.86,42.46C130.76,44.06 131.66,45.86 132.56,47.46L115.16,55.86zM39.36,49.36L23.76,38.06C24.86,36.46 26.06,35.16 27.36,33.56L42.06,46.26C40.86,47.26 39.96,48.16 39.36,49.36zM111.16,49.06C110.46,47.96 109.56,47.06 108.66,45.86L123.06,32.96C124.46,34.36 125.56,35.86 126.66,37.46L111.16,49.06zM44.56,43.46L31.06,29.46C32.46,28.06 33.76,26.96 35.36,25.66L47.56,40.86C46.56,41.66 45.46,42.56 44.56,43.46zM105.96,43.26C105.06,42.36 103.96,41.46 103.06,40.56L115.06,25.36C116.66,26.46 117.96,27.86 119.36,29.16L105.96,43.26zM50.86,38.46L39.96,22.46C41.56,21.36 43.16,20.46 44.96,19.56L54.26,36.56C53.06,36.86 51.96,37.56 50.86,38.46zM99.56,38.26C98.46,37.56 97.26,36.86 96.16,36.26L105.16,19.06C106.76,19.96 108.56,20.86 110.16,21.96L99.56,38.26zM57.86,34.66L50.16,16.76C51.96,16.06 53.76,15.36 55.56,14.76L61.66,33.26C60.06,33.46 58.96,33.96 57.86,34.66zM92.66,34.36C91.56,33.86 90.16,33.46 88.86,32.96L94.76,14.46C96.56,15.16 98.36,15.86 100.16,16.46L92.66,34.36zM65.26,32.16L60.96,13.16C62.76,12.66 64.56,12.46 66.56,12.06L69.26,31.26C67.76,31.46 66.66,31.66 65.26,32.16zM84.96,32.16C83.56,31.96 82.46,31.66 81.16,31.46L83.56,12.26C85.36,12.46 87.36,12.96 89.16,13.16L84.96,32.16zM73.16,31.06L72.26,11.56C73.36,11.56 74.26,11.56 75.46,11.56C76.36,11.56 77.26,11.56 78.16,11.56L77.26,31.06C76.56,31.06 75.86,31.06 75.26,31.06C74.56,31.06 73.86,31.06 73.16,31.06z" id="svg_13" fill="#ffffff" style="pointer-events:inherit"></path> </g> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <path fill="none" stroke="#000000" stroke-width="0" d="M19.12221,50.96975C19.12221,33.37442 33.37443,19.12221 50.96975,19.12221C68.56508,19.12221 82.81729,33.37443 82.81729,50.96975C82.81729,68.56508 68.56507,82.81729 50.96975,82.81729C33.37442,82.81729 19.12221,68.56507 19.12221,50.96975z" id="svg_18" visibility="hidden" display="none" textpath="true" clipid="svg_19" style="pointer-events:inherit"></path> <text texttype="text1" template_text="true" id="svg_20" font-size="9pt" font_size="9pt" font-family="Anton" text_type="textpath" clipid="svg_19" pathid="svg_18" x="0" fill="#000000" isMultiline="false" text-anchor="middle" ascent="1.1875" descent="0.1875" leading="0" transform="rotate(-90 75.47694396972658,50.96131896972657) " font-weight="normal" font-style="normal" style="pointer-events:inherit"> <textPath xlink:href="#svg_19" startOffset="50%" font_size="null" x="0" style="pointer-events:inherit"> <tspan id="svg_1" xml:space="preserve" vector-effect="non-scaling-stroke" font-family="Anton" font-size="9pt" font-weight="normal" font-style="normal" style="pointer-events:inherit">Gabe s Poker Room</tspan> </textPath> </text> <text texttype="text2" fill="#000000" stroke-width="0" x="75.36867" y="110.59035" id="svg_24" text-anchor="middle" xml:space="preserve" font-family="Anton" isMultiline="true" font_size="20pt" line-spacing="0" aspect="true" template_text="true" resized="false" attr_rs="false" font-size="20pt" font-weight="normal" font-style="normal" text-decoration="none" style="pointer-events:inherit"><tspan xml:space="preserve" id="svg_12" vector-effect="non-scaling-stroke" font-family="Anton" font-size="20pt" text-decoration="none" dy="0" x="75.36867" font-weight="normal" font-style="normal" style="pointer-events:inherit">5</tspan></text> <feGaussianBlur result="coloredBlur" stdDeviation="2.5" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur result="coloredBlur" stdDeviation="2.5" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur result="coloredBlur" stdDeviation="2.5" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur result="coloredBlur" stdDeviation="2.5" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur stdDeviation="2.5" result="coloredBlur" style="pointer-events:inherit"></feGaussianBlur> <feGaussianBlur result="coloredBlur" stdDeviation="2.5" style="pointer-events:inherit"></feGaussianBlur> </g> <defs> <path d="M19.12221,50.96975C19.12221,33.37442 33.37443,19.12221 50.96975,19.12221C68.56508,19.12221 82.81729,33.37443 82.81729,50.96975C82.81729,68.56508 68.56507,82.81729 50.96975,82.81729C33.37442,82.81729 19.12221,68.56507 19.12221,50.96975z" fill="none" id="svg_19"></path> <radialGradient id="svg_27" spreadMethod="pad" cy="0.5"> <stop stop-color="#FFFFFF" offset="0"></stop> <stop stop-color="#C8102E" stop-opacity="0.99609" offset="1"></stop> </radialGradient> <radialGradient id="svg_30" spreadMethod="pad" cy="0.5"> <stop stop-color="#ffffff" stop-opacity="0.99609" offset="0"></stop> <stop stop-color="#C8102E" stop-opacity="0.99609" offset="1"></stop> </radialGradient> <filter id="grayscale"> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> </filter> <filter id="glow"> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0" type="matrix"></feColorMatrix> <feGaussianBlur result="coloredBlur" stdDeviation="2.5"></feGaussianBlur> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0" type="matrix"></feColorMatrix> <feGaussianBlur result="coloredBlur" stdDeviation="2.5"></feGaussianBlur> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0" type="matrix"></feColorMatrix> <feGaussianBlur result="coloredBlur" stdDeviation="2.5"></feGaussianBlur> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0" type="matrix"></feColorMatrix> <feGaussianBlur result="coloredBlur" stdDeviation="2.5"></feGaussianBlur> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix type="matrix" values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur> <feColorMatrix values="0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 1 0" type="matrix"></feColorMatrix> <feGaussianBlur result="coloredBlur" stdDeviation="2.5"></feGaussianBlur> <feMerge id="merges"> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="sepia"> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix in="SourceGraphic" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0"></feColorMatrix> <feColorMatrix values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0 0 0 1 0" type="matrix" in="SourceGraphic"></feColorMatrix> </filter> </defs> </svg> <svg id="canvasBleed1" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="display:none"> <rect id="backrect1" width="100%" height="100%" x="0" y="0" stroke-width="2" stroke-dasharray="10 8" stroke="#00ff00" fill="none" style="pointer-events:none"></rect> <rect id="textrect1" width="45px" height="8px" x="0" y="0" fill="#00ff00" style="pointer-events:none"></rect> <text id="bleedText1" x="1" y="6" font-size="8px" font-family="Arial" fill="#ffffff" style="pointer-events:none">safe margin</text> </svg> <svg id="canvasGrid" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="visible" display="none"> <rect width="100%" height="100%" x="0" y="0" stroke-width="0" stroke="none" fill="url(#gridpattern)" style="pointer-events: none; display:visible;"></rect> </svg> <svg id="fore" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="pointer-events:none"> <image x="0" y="0" width="556.1568" height="556.1568" style="pointer-events:inherit" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://staging.chiplab.com/media/uploads/dol/2/147751672809184826599.png" preserveAspectRatio="none" transform="rotate(0,278.0784,278.0784)"></image> </svg> <g id="selectorParentGroup" transform="translate(117.42160000000001,18.45)"> <g display="none"> <rect id="selectorGrip_resize_nw" fill="#2c9ff8" width="12" height="12" style="cursor:nw-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_n" fill="#2c9ff8" width="12" height="12" style="cursor:n-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_ne" fill="#2c9ff8" width="12" height="12" style="cursor:ne-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_e" fill="#2c9ff8" width="12" height="12" style="cursor:e-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_se" fill="#2c9ff8" width="12" height="12" style="cursor:se-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_s" fill="#2c9ff8" width="12" height="12" style="cursor:s-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_sw" fill="#2c9ff8" width="12" height="12" style="cursor:sw-resize" stroke="#222" pointer-events="all"></rect> <rect id="selectorGrip_resize_w" fill="#2c9ff8" width="12" height="12" style="cursor:w-resize" stroke="#222" pointer-events="all"></rect> <line id="selectorGrip_rotateconnector" stroke="#000"></line> <circle id="selectorGrip_rotate" fill="#2c9ff8" r="10" stroke="#222" stroke-width="2" style="cursor:url(/js/all/editor/images/rotate.png) 12 12, auto;"></circle> </g> <rect id="selectorRubberBand" fill="#22C" fill-opacity="0.15" stroke="#22C" stroke-width="0.5" display="none" style="pointer-events:none" x="619.0784054331419" y="89.5500000724083" width="0" height="0"></rect> </g> <svg id="canvasBleed" width="556.1568" height="556.1568" x="117.42160000000001" y="18.45" overflow="none" style="display:none"> <rect id="backrect" width="100%" height="100%" x="0" y="0" stroke-dasharray="10 8" stroke="#ff0000" fill="none" stroke-width="2" style="pointer-events:none"></rect> <rect id="textrect" width="40px" height="8px" x="0" y="0" stroke="#ff0000" fill="#ff0000" style="pointer-events:none"></rect> <text id="bleedText" x="1" y="6" font-size="8px" font-family="Arial" fill="#ffffff" style="pointer-events:none">cut margin</text> </svg> </svg>' 
 

 
var canvas = new fabric.Canvas('canvas'); 
 
fabric.loadSVGFromString(string, function(objects, options) { 
 
    var obj = fabric.util.groupSVGElements(objects, options); 
 
    canvas.add(obj); 
 
}); 
 

 
var canvas2 = new fabric.Canvas('canvas2'); 
 
var image = new fabric.Image(document.getElementById('plainimage')); 
 
canvas2.add(image);

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js" ></script> 
 

 
<img id="plainimage" src="//staging.chiplab.com/test/1.svg" /> 
 

 
As SVG 
 
<canvas id="canvas" width="600" height="600"></canvas> 
 
As an image 
 
<canvas id="canvas2" width="600" height="600"></canvas>