{"id":1980,"date":"2015-01-20T21:45:22","date_gmt":"2015-01-20T21:45:22","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=1980"},"modified":"2015-01-21T01:14:24","modified_gmt":"2015-01-21T01:14:24","slug":"creating-svg-javascript-using-fabricjs-downloading-locally","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2015\/01\/creating-svg-javascript-using-fabricjs-downloading-locally\/","title":{"rendered":"Creating an SVG in Javascript using FabricJS and downloading it locally"},"content":{"rendered":"

\"simplesvg\"<\/a><\/p>\n

This following short example creates an canvas image using FabricJS. Pressing the draw, then save button creates an SVG representing this image, then creates a file based on this image using session local storage. Finally it adds a download link to this file to the html. The user can then download the SVG file to local storage. This has only been tested on Firefox.<\/p>\n

UPDATE: FabricJS 1.4.0 appears to have issues where line coordinates get randomly offset. I’ve updated the example below to link to 1.4.13, however 1.4.0 is still linked as the latest CDN version on the FabricJS site. The example below will work with 1.4.0, but I don’t recommend using it.<\/p>\n

\r\n<html>\r\n\r\n<script src="http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/1.4.13\/fabric.min.js"><\/script>\r\n<script langauge="javascript">\r\n\r\n  var m_canvas;\r\n\r\n  function do_draw() {\r\n    \/\/ create a wrapper around native canvas element (with id="c")\r\n    m_canvas = new fabric.Canvas('c');\r\n\r\n    \/\/ create a rectangle object\r\n    var rect = new fabric.Rect({\r\n      left: 100,\r\n      top: 100,\r\n      fill: 'red',\r\n      width: 20,\r\n      height: 20\r\n    });\r\n\r\n    \/\/ "add" rectangle onto canvas\r\n    m_canvas.add(rect);\r\n  }\r\n\r\n  function do_save() {\r\n    var filedata=m_canvas.toSVG(); \/\/ the SVG file is now in filedata\r\n\r\n    var locfile = new Blob([filedata], {type: "image\/svg+xml;charset=utf-8"});\r\n    var locfilesrc = URL.createObjectURL(locfile);\/\/mylocfile);\r\n\r\n    var dwn = document.getElementById('dwn');\r\n    dwn.innerHTML = "<a href=" + locfilesrc + " download='mysvg.svg'>Download<\/a>";\r\n  }\r\n<\/script>\r\n\r\n<body>\r\n\r\n<canvas id='c'><\/canvas>\r\n<input type="button" id="drawBtn" value="draw" onclick="do_draw()"><\/input>\r\n\r\n<input type="button" id="saveBtn" value="save" onclick="do_save()"><\/input>\r\n<div id='dwn'><\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
This following short example creates an canvas image using FabricJS. Pressing the draw, then save button creates an SVG representing this image, then creates a file based on this image using session local storage. Finally it adds a download link to this file to the html. The user can then download the SVG file to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1980","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-vW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=1980"}],"version-history":[{"count":3,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1980\/revisions"}],"predecessor-version":[{"id":1986,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1980\/revisions\/1986"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=1980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=1980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=1980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}