Inkscape extension for generating HTML5 Canvas graphics.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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