paper.js/examples/SVG Export/Tiger.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tiger</title>
    <link rel="stylesheet" href="../css/style.css">
    <!-- IE 9: display inline SVG -->
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var tiger = '[["Layer",{"children":[["Group",{"name":"svg","children":[["Group",{"matrix":[1,0,0,1,200,200],"children":[["Group",{"children":[["Path",{"pathData":"M-122.304,84.285c0,0 0.101,1.894 -0.723,1.875c-0.824,-0.019 -17.278,-48.094 -37.806,-45.851c0,0 17.783,-7.353 38.529,43.976z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-118.774,81.262c0,0 -0.549,1.816 -1.318,1.517c-0.768,-0.298 0.115,-51.104 -19.951,-55.978c0,0 19.223,-0.864 21.269,54.461z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-91.284,123.59c0,0 1.636,0.96 1.166,1.637c-0.471,0.677 -49.645,-12.125 -59.1,6.232c0,0 3.679,-18.887 57.934,-7.869z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-94.093,133.801c0,0 1.856,0.396 1.622,1.187c-0.233,0.791 -50.936,4.133 -54.126,24.534c0,0 -2.458,-19.085 52.504,-25.721z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-98.304,128.276c0,0 1.778,0.663 1.432,1.411c-0.346,0.748 -50.994,-3.341 -57.126,16.377c0,0 0.352,-19.239 55.694,-17.788z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-109.009,110.072c0,0 1.308,1.374 0.669,1.895c-0.639,0.521 -44.382,-25.333 -58.529,-10.291c0,0 8.741,-17.143 57.86,8.396z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-116.554,114.263c0,0 1.456,1.217 0.88,1.808c-0.576,0.59 -46.964,-20.149 -59.318,-3.602c0,0 6.745,-18.022 58.438,1.794z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-119.154,118.335c0,0 1.608,1.008 1.118,1.671c-0.49,0.663 -49.272,-13.56 -59.255,4.516c0,0 4.225,-18.773 58.137,-6.187z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-108.42,118.949c0,0 1.122,1.531 0.421,1.966c-0.701,0.435 -40.77,-30.813 -56.728,-17.708c0,0 10.865,-15.881 56.307,15.742z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-128.2,90c0,0 0.6,1.8 -0.2,2c-0.8,0.2 -29.4,-41.8 -48.601,-34.2c0,0 15.201,-11.8 48.801,32.2z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-127.505,96.979c0,0 0.975,1.629 0.236,1.996c-0.738,0.368 -37.723,-34.476 -54.832,-22.914c0,0 12.297,-14.8 54.596,20.918z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-127.62,101.349c0,0 1.122,1.531 0.421,1.966c-0.701,0.434 -40.77,-30.813 -56.728,-17.708c0,0 10.865,-15.881 56.307,15.742z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-129.83,103.065c0.503,6.048 1.491,12.617 3.23,15.736c0,0 -3.6,12.4 5.2,25.6c0,0 -0.4,7.2 1.2,10.4c0,0 4,8.4 8.8,9.2c3.884,0.647 12.607,3.716 22.468,5.12c0,0 17.132,14.08 13.932,26.88c0,0 -0.4,16.4 -4,18c0,0 11.6,-11.2 2,5.6L-81.4,238.401c0,0 25.6,-21.6 10,-3.2L-81.4,261.201c0,0 19.6,-18.4 12.4,-10L-72.2,260.001c0,0 43.2,-27.2 12.4,2.4c0,0 8,-3.6 12.4,-0.8c0,0 6.8,-1.2 6,0.4c0,0 -20.8,10.4 -24.4,28.8c0,0 8.4,-10 5.2,0.8L-60.2,303.201c0,0 4,-21.6 3.6,16c0,0 19.2,-18 7.6,2.8L-49,338.801c0,0 15.2,-16.4 8.8,-3.6c0,0 10,-8.8 6,6.4c0,0 -0.8,10.4 3.6,-0.8c0,0 16,-30.6 10,-4.4c0,0 -0.8,19.2 4,4.4c0,0 0.4,10.4 9.6,17.6c0,0 -1.2,-50.8 11.6,-14.8L8.6,360.001c0,0 2.8,-9.2 2.4,-14.4c0,0 14.8,-16.4 8,8c0,0 15.2,-22.8 12,-9.6c0,0 -7.6,16 -6,20.8c0,0 16.8,-34.8 18,-36.4c0,0 -2,42.401 8.8,6.4c0,0 5.6,12 2.8,16.4c0,0 8,-8 7.2,-11.2c0,0 4.6,-8.2 7.4,5.4c0,0 1.8,9.4 3.4,6.2c0,0 4,24.001 5.2,1.2c0,0 1.6,-13.6 -5.6,-25.2c0,0 0.8,-3.2 -2,-7.2c0,0 13.6,21.6 6.4,-7.2c0,0 11.201,8 12.401,8c0,0 -13.601,-23.2 -4.801,-18.4c0,0
        var start = Date.now();
        project.importJSON(tiger);
        console.log('Load JSON', Date.now() - start);
        var start = Date.now();
        document.body.appendChild(project.exportSVG());
        console.log('Export SVG', Date.now() - start);
    </script>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
Use JSON format to implement example that exports Tiger to SVG. 2013-02-12 18:01:35 -05:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<meta charset="UTF-8">`
			`<title>Tiger</title>`
			`<link rel="stylesheet" href="../css/style.css">`
Have IE9 display SVG inlined in SVG export examples. 2014-04-07 06:01:56 -04:00			`<!-- IE 9: display inline SVG -->`
			`<meta http-equiv="X-UA-Compatible" content="IE=9">`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<script type="text/javascript" src="../../dist/paper-full.js"></script>`
			`<script type="text/paperscript" canvas="canvas">`
			var tiger = '[["Layer",{"children":[["Group",{"name":"svg","children":[["Group",{"matrix":[1,0,0,1,200,200],"children":[["Group",{"children":[["Path",{"pathData":"M-122.304,84.285c0,0 0.101,1.894 -0.723,1.875c-0.824,-0.019 -17.278,-48.094 -37.806,-45.851c0,0 17.783,-7.353 38.529,43.976z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-118.774,81.262c0,0 -0.549,1.816 -1.318,1.517c-0.768,-0.298 0.115,-51.104 -19.951,-55.978c0,0 19.223,-0.864 21.269,54.461z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-91.284,123.59c0,0 1.636,0.96 1.166,1.637c-0.471,0.677 -49.645,-12.125 -59.1,6.232c0,0 3.679,-18.887 57.934,-7.869z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-94.093,133.801c0,0 1.856,0.396 1.622,1.187c-0.233,0.791 -50.936,4.133 -54.126,24.534c0,0 -2.458,-19.085 52.504,-25.721z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-98.304,128.276c0,0 1.778,0.663 1.432,1.411c-0.346,0.748 -50.994,-3.341 -57.126,16.377c0,0 0.352,-19.239 55.694,-17.788z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-109.009,110.072c0,0 1.308,1.374 0.669,1.895c-0.639,0.521 -44.382,-25.333 -58.529,-10.291c0,0 8.741,-17.143 57.86,8.396z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-116.554,114.263c0,0 1.456,1.217 0.88,1.808c-0.576,0.59 -46.964,-20.149 -59.318,-3.602c0,0 6.745,-18.022 58.438,1.794z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-119.154,118.335c0,0 1.608,1.008 1.118,1.671c-0.49,0.663 -49.272,-13.56 -59.255,4.516c0,0 4.225,-18.773 58.137,-6.187z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-108.42,118.949c0,0 1.122,1.531 0.421,1.966c-0.701,0.435 -40.77,-30.813 -56.728,-17.708c0,0 10.865,-15.881 56.307,15.742z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-128.2,90c0,0 0.6,1.8 -0.2,2c-0.8,0.2 -29.4,-41.8 -48.601,-34.2c0,0 15.201,-11.8 48.801,32.2z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-127.505,96.979c0,0 0.975,1.629 0.236,1.996c-0.738,0.368 -37.723,-34.476 -54.832,-22.914c0,0 12.297,-14.8 54.596,20.918z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-127.62,101.349c0,0 1.122,1.531 0.421,1.966c-0.701,0.434 -40.77,-30.813 -56.728,-17.708c0,0 10.865,-15.881 56.307,15.742z","fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.172}]]}],["Group",{"children":[["Path",{"pathData":"M-129.83,103.065c0.503,6.048 1.491,12.617 3.23,15.736c0,0 -3.6,12.4 5.2,25.6c0,0 -0.4,7.2 1.2,10.4c0,0 4,8.4 8.8,9.2c3.884,0.647 12.607,3.716 22.468,5.12c0,0 17.132,14.08 13.932,26.88c0,0 -0.4,16.4 -4,18c0,0 11.6,-11.2 2,5.6L-81.4,238.401c0,0 25.6,-21.6 10,-3.2L-81.4,261.201c0,0 19.6,-18.4 12.4,-10L-72.2,260.001c0,0 43.2,-27.2 12.4,2.4c0,0 8,-3.6 12.4,-0.8c0,0 6.8,-1.2 6,0.4c0,0 -20.8,10.4 -24.4,28.8c0,0 8.4,-10 5.2,0.8L-60.2,303.201c0,0 4,-21.6 3.6,16c0,0 19.2,-18 7.6,2.8L-49,338.801c0,0 15.2,-16.4 8.8,-3.6c0,0 10,-8.8 6,6.4c0,0 -0.8,10.4 3.6,-0.8c0,0 16,-30.6 10,-4.4c0,0 -0.8,19.2 4,4.4c0,0 0.4,10.4 9.6,17.6c0,0 -1.2,-50.8 11.6,-14.8L8.6,360.001c0,0 2.8,-9.2 2.4,-14.4c0,0 14.8,-16.4 8,8c0,0 15.2,-22.8 12,-9.6c0,0 -7.6,16 -6,20.8c0,0 16.8,-34.8 18,-36.4c0,0 -2,42.401 8.8,6.4c0,0 5.6,12 2.8,16.4c0,0 8,-8 7.2,-11.2c0,0 4.6,-8.2 7.4,5.4c0,0 1.8,9.4 3.4,6.2c0,0 4,24.001 5.2,1.2c0,0 1.6,-13.6 -5.6,-25.2c0,0 0.8,-3.2 -2,-7.2c0,0 13.6,21.6 6.4,-7.2c0,0 11.201,8 12.401,8c0,0 -13.601,-23.2 -4.801,-18.4c0,0
			`var start = Date.now();`
			`project.importJSON(tiger);`
			`console.log('Load JSON', Date.now() - start);`
			`var start = Date.now();`
			`document.body.appendChild(project.exportSVG());`
			`console.log('Export SVG', Date.now() - start);`
			`</script>`
Use JSON format to implement example that exports Tiger to SVG. 2013-02-12 18:01:35 -05:00			`</head>`
Clean up examples HTML. 2013-02-12 18:08:48 -05:00			`<body>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<canvas id="canvas" width="600" height="600"></canvas>`
Use JSON format to implement example that exports Tiger to SVG. 2013-02-12 18:01:35 -05:00			`</body>`
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README. Closes #422. 2014-04-06 07:44:19 -04:00			`</html>`