{"id":13434586,"url":"https://github.com/gliffy/canvas2svg","last_synced_at":"2025-10-22T15:42:30.857Z","repository":{"id":13009874,"uuid":"15689244","full_name":"gliffy/canvas2svg","owner":"gliffy","description":"Translates HTML5 Canvas draw commands to SVG","archived":false,"fork":false,"pushed_at":"2023-11-17T07:42:34.000Z","size":480,"stargazers_count":675,"open_issues_count":45,"forks_count":153,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-05-21T22:44:48.322Z","etag":null,"topics":["html5-canvas","javascript","node-canvas","nodejs","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gliffy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-01-06T23:18:15.000Z","updated_at":"2024-05-12T12:48:43.000Z","dependencies_parsed_at":"2023-02-17T23:25:21.169Z","dependency_job_id":"c77f6f6e-aa8b-4b06-a313-b865c5108e6e","html_url":"https://github.com/gliffy/canvas2svg","commit_stats":{"total_commits":87,"total_committers":13,"mean_commits":"6.6923076923076925","dds":0.7471264367816092,"last_synced_commit":"eaab317a36a57421711a297d996bc80318185e44"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gliffy%2Fcanvas2svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gliffy%2Fcanvas2svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gliffy%2Fcanvas2svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gliffy%2Fcanvas2svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gliffy","download_url":"https://codeload.github.com/gliffy/canvas2svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221699019,"owners_count":16865967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5-canvas","javascript","node-canvas","nodejs","svg"],"created_at":"2024-07-31T03:00:18.205Z","updated_at":"2025-10-22T15:42:25.815Z","avatar_url":"https://github.com/gliffy.png","language":"JavaScript","funding_links":[],"categories":["Utility","Libraries","JavaScript"],"sub_categories":["Windows Manager","Data processing"],"readme":"Canvas2Svg [![Build Status](https://travis-ci.org/gliffy/canvas2svg.svg?branch=master)](https://travis-ci.org/gliffy/canvas2svg)\n==========\nThis library turns your Canvas into SVG using javascript. In other words, this library lets you build an SVG document \nusing the canvas api. Why use it?\n* You have a canvas drawing you want to persist as an SVG file.\n* You like exporting things.\n* Because you didn't want to transform your custom file format to SVG.\n\nDemo\n==========\nhttp://gliffy.github.io/canvas2svg/\n\nHow it works\n==========\nWe create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we \nbuild up a scene graph in SVG. Yay!\n\nUsage\n==========\n```javascript\n//Create a new mock canvas context. Pass in your desired width and height for your svg document.\nvar ctx = new C2S(500,500);\n\n//draw your canvas like you would normally\nctx.fillStyle=\"red\";\nctx.fillRect(100,100,100,100);\n//etc...\n\n//serialize your SVG\nvar mySerializedSVG = ctx.getSerializedSvg(); //true here, if you need to convert named to numbered entities.\n\n//If you really need to you can access the shadow inline SVG created by calling:\nvar svg = ctx.getSvg();\n```\n\nTests\n==========\nTo run tests:\n```\nnpm install\nnpm test\n```\n\nTo run tests against Chrome and Firefox, call karma directly. This is not the default npm test due to the limited \nbrowser selection in travis.\n```\nnpm install karma-cli -g\nkarma start\n```\n\nDebug\n=========\nPlay with canvas2svg in the provided test/playground.html or run test locally in your browser in test/testrunner.html\n\n\nAdd An Example Case\n=========\nAdd a test file to the test/example folder. In your file make sure to add the drawing function to the global `C2S_EXAMPLES`,\nwith your filename as a key. For example `test\\example\\linewidth.js` should look something like:\n```javascript\nwindow.C2S_EXAMPLES['linewidth'] = function(ctx) {\n    for (var i = 0; i \u003c 10; i++){\n        ctx.lineWidth = 1+i;\n        ctx.beginPath();\n        ctx.moveTo(5+i*14,5);\n        ctx.lineTo(5+i*14,140);\n        ctx.stroke();\n    }\n};\n```\ninstall gulp globally if you haven't done so already\n```\nnpm install -g gulp\n```\nThen run the following to update playground.html and testrunner.html \n```\ngulp\n```\nYou should now be able to select your new example from playground.html or see it run in testrunner.html \n\nIf you find a bug, or want to add functionality, please add a new test case and include it with your pull request.\n\nUsing with node.js\n==================\n\nYou can use `canvas2svg` with node.js using [jsdom](https://github.com/tmpvar/jsdom) with [node-canvas](https://github.com/Automattic/node-canvas). To do this first create a new document object, and then create a new instance of `C2S` based on that document:\n\n```javascript\nvar canvas = require('canvas'),\n    jsdom = require('jsdom'),\n    C2S = require('canvas2svg');\n\nvar document = jsdom.jsdom();\nvar ctx = new C2S({document: document});\n\n// ... drawing code goes here ...\n```\n\nN.B. You may not need node-canvas for some simple operations when using jsdom \u003e= 6.3.0, but it's still recommended that you install it.\n\nUpdates\n==========\n- v1.0.19 Fix __parseFont to not crash\n- v1.0.18 clip was not working, the path never made it to the clip area\n- v1.0.17 Fix bug with drawing in an empty context. Fix image translation problem. Fix globalAlpha issue.\n- v1.0.16 Add npm publishing support, bower file and optimize for arcs with no angles.\n- v1.0.15 Setup travis, add testharness and debug playground, and fix regression for __createElement refactor\n- v1.0.14 bugfix for gradients, move __createElement to scoped createElement function, so all classes have access. \n- v1.0.13 set paint order before stroke and fill to make them behavior like canvas\n- v1.0.12 Implementation of ctx.prototype.arcTo.\n- v1.0.11 call lineTo instead moveTo in ctx.arc, fixes closePath issue and straight line issue\n- v1.0.10 when lineTo called, use M instead of L unless subpath exists\n- v1.0.9 use currentDefaultPath instead of \u003cpath\u003e's d attribute, fixes stroke's different behavior in SVG and canvas.\n- v1.0.8 reusing __createElement and adding a properties undefined check\n- v1.0.7 fixes for multiple transforms and fills and better text support from stafyniaksacha\n- v1.0.6 basic support for text baseline (contribution from KoKuToru)\n- v1.0.5 fixes for #5 and #6 (with contributions from KoKuToru)\n- v1.0.4 generate ids that start with a letter\n- v1.0.3 fixed #4 where largeArcFlag was set incorrectly in some cases \n- v1.0.2 Split up rgba values set in fill/stroke to allow illustrator import support.\n- v1.0.1 Allow C2S to be called as a function. https://github.com/gliffy/canvas2svg/issues/2 \n- v1.0.0 Initial release\n\nMisc\n==========\nSome canvas 2d context methods are not implemented yet. Watch out for setTransform and arcTo.\n\nReleasing\n=========\n\nTo release a new version:\n\n* Run `gulp bump` to update the version number\n* Add a new entry to the [Updates](#Updates) table\n* `git commit -am v1.0.xx`\n* `git push`\n* `npm publish`\n\nLicense\n==========\nThis library is licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgliffy%2Fcanvas2svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgliffy%2Fcanvas2svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgliffy%2Fcanvas2svg/lists"}