Codelab: build renderer based on inkscape paths

[rachel-fenichel]

Category
Codelabs

Component

Not sure, needs a concise name.

Is your feature request related to a problem? Please describe.

A common workflow is to design connection paths in a design program such as illustrator or inkscape, then try to build the same paths in Blockly.

Working with paths like this can be tricky and is very situation-dependent, but a codelab can help scaffold it.

Describe the solution you'd like

A codelab that starts with a set of connection shapes or block shapes drawn in Inkscape, then shows how to export the SVG paths from the program and break them apart into path fragments that can be used in a Blockly renderer.

Topics include:

• Blockly svg path utility functions
• Absolute vs relative coordinates in SVG
• Cleanup scripts to help break apart a path into a more readable form?
• Cleanup scripts to transform an SVG path into a set of Blockly svg commands?

Describe alternatives you've considered

A basic rendering codelab exists and explains how to create custom connection shapes.

Additional context