Question

88

Loading and displaying svg

rated 0 times [ 94] [ 6] / answers: 1 / hits: 19430 / 11 Years ago, fri, march 8, 2013, 12:00:00

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();

                         });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradford

Add To Favorites

Follow

Total Points: 709

Total Questions: 117

Total Answers: 91

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 11 Years ago luna · Accepted Answer

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>