toSVG examples

Used in documentation (jsdoc tag)

by franknstayn

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

canvas.add(new fabric.Circle({
    radius: 50,
    left: 	100,
    top: 		100,
    fill: 	'#0B61A4'
}));

canvas.add(new fabric.Triangle({
    width: 150,
    height: 100,
    left: 160,
    top: 200,
    fill: '#00AF64'
}));

// Normal SVG output
fabric.log('Normal SVG output: ', canvas.toSVG());

// SVG output without preamble
fabric.log('SVG output without preamble: ', canvas.toSVG({
    suppressPreamble: true
}));

// SVG output with viewBox attribute
fabric.log('SVG output with viewBox attribute: ', canvas.toSVG({
    viewBox: {
        x: 80,
        y: 80,
        width: 250,
        height: 250
    }
}));