Giter Club home page Giter Club logo

ink2canvas's Introduction

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

ink2canvas's People

Contributors

hacktoon avatar thiagogt avatar tonnycordeiro avatar pothix avatar tassotirap avatar thomasfortes avatar krzyc avatar camouflagedcontribution avatar jonata avatar gustavoteixeira avatar henriquebastos avatar timohtyphan avatar rltoscano avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.