Inkscape extension for generating HTML5 Canvas graphics.
HTML Python
Latest commit df6310f May 16, 2016 @hacktoon Merge pull request #21 from greipfrut/master


Ink2canvas is an Inkscape extension written in Python that exports SVG to HTML5 Canvas. It aims on providing a way to ease the creation of Canvas graphics by avoiding writing Javascript code by hand through Inkscape drawing interface. It also provides a standalone script to generate Canvas code without Inkscape.

Project files

  • ink2canvas - This folder holds the project main files:
    • - Reads and parse the SVG file, creating objects and calling the respective methods to handle it.
    • - A class responsible for producing Canvas code.
    • - Abstracts SVG elements parsed by the file.
    • lib/ - This folder contains some Python modules provided by Inkscape and useful for building extensions. These are being used just for development and testing, so it is recomended in a production enviroment to use the already provided by the system.
  • ink2canvas.inx - A XML file that describes the interface between Inkscape and the extension. It must be put in the /extensions folder to Inkscape be aware of this extension.
  • - This script was created initially to test the extension. It runs the project code without needing to open Inkscape. It must be provided a SVG file path as input and optionally a output file path.

How to install on Inkscape

If you want a system wide install, put just the file ink2canvas.inx and the folder ink2canvas at /usr/share/inkscape/extensions folder (or similar), if you have permission to do this. Alternatively, you can put the files in the local Inkscape extensions folder: $HOME/.config/inkscape/extensions (or similar).

NOTE: the Python modules in the lib/ folder already exists in the Inkscape system wide extension folder. For now, the lib/ and ink2canvas/ folders were created for the sake of the project organization, so if you want to use the system modules, you have to change the import path in the files and/or put all files in the extensions folder, which isn't a recomended solution.

How to use:


Open Inkscape file and choose "HTML5 output" option at "Save as" menu.



You can find good SVG sample files at Croczilla.

Project Map


  • Add missing path sub-commands
  • Refactor and fix style methods error handling
  • Masks
  • Radial Gradient
  • Group style must prevail over grouped objects
  • Linear gradient (initial)
  • Clones
  • Images
  • Patterns


  • Lines, rects, circles, ellipses, paths (partial), text (basic)
  • Polylines and polygons
  • Basic text attributes support
  • Fill and stroke
  • Clips (needs more tests :-)
  • Transformations (translating, rotating, scaling, etc)
  • Iterating through groups and layers