Zdog SVG Importer

Rudimentary SVG importer for Zdog

Example project: https://codepen.io/sakamies/pen/KKKaKmJ

• Takes a dom collection of svg line & path nodes as a parameter. (Just those two implemented, ignores rects etc.)
• Parses x/y & path attributes and adds the shapes to the given Zdog object.
• Gets color, stroke & fill from each svg node.
• Supports giving a z depth to a shape by appending -z100 (-z) to your svg node ID.
• Returns an object indexed by shape ID's, with references to each added Zdog object, so it's easy to reference and animate the imported stuff.

Quite a few caveats:

• Only tested with Sketch exports so far.
• The path d attribute parsing is not up to spec. (ignores arcs and some other stuff probably)
• Ignores groups & transforms, so better to export a flat file with just shapes.
• Developed while running Chrome, not tested with anything else yet. (I do need this to work cross browser myself.)
• No documentation either yet, sorry.

Usage

Add Zdog and the import script to your page. (TODO: ES6 module)

Check Zdog docs for Zdog usage.

const illo = new Zdog.Illustration({
  element: "#canvas",
});
SVGtoZDOG(document.querySelectorAll('svg path'), illo)
illo.updateRenderGraph();