Loading and displaying svg

fabricjs, html, javascript, svg

Solution

Here's how you load SVG from an external .svg

Here's code (be sure you link to your own fabricJS .js):

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border: 1px solid red; }
</style>

<script>
    $(function(){

        var canvas = new fabric.Canvas('canvas');
        var group = [];

        fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {

            var loadedObjects = new fabric.Group(group);

            loadedObjects.set({
                    left: 100,
                    top: 100,
                    width:175,
                    height:175
            });

            canvas.add(loadedObjects);
            canvas.renderAll();

        },function(item, object) {
                object.set('id',item.getAttribute('id'));
                group.push(object);
        });


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas> 
</body>
</html>

Problem

how do you load a .svg into a fabricjs.html page? my fabric fiddle attempts to load a http .svg file, but I have, of course, tried local versions. I have used .svg files generated from adobe illustrator and fabric itself. ``` fabric.loadSVGFromURL( gvs_svgSrc, function ( argo ) { //alert( "load handler : " + argo ) ; // ... returns: #<fabric.Rect> lvo_SVG = argo.set({ left: 250, top: 200, angle: 0 }); lvo_SVG = argo.scale(0.25); gvo_canvas.add( lvo_SVG ); gvo_canvas.renderAll(); }); ```

Original source