Ink2canvas

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:
  • main.py - Reads and parse the SVG file, creating objects and calling the respective methods to handle it.
  • canvas.py - A class responsible for producing Canvas code.
  • svg.py - Abstracts SVG elements parsed by the main.py 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.
• standalone.py - 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:

Extension

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

Standalone

python standalone.py INPUT [OUTPUT]

OUTPUT can be defined as dash (-) for stdout output.

You can find good SVG sample files at Croczilla.

Project Map

TODO

• 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

Working

• 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