A converter of graphic instructions in JSON format into Scalable Vector Graphic (SVG) format.
This project was inspired by a project developed by/for Brilliant called Diagrammar. There is a YouTube video "Diagrammar: Simply Make Interactive Diagrams" by Pontus Granström (Strange Loop 2022) that describes the project.
Diagrammar is a tool for creating interactive diagrams, that aims to be much simpler, while retaining the power of a full programming language (Elm).
Personally, I would prefer to get my hands on the project source code s this would:
- Equip me with a tool I could use to create diagrams for my own purposes.
- Provide me with an excellent reason for becoming more familiar with the programming language Elm.
Unfortuntely the project is not available to the public, not even (at this point in time) on Brilliant's GitHub repo.
I am less interested in the interactive capability of Diagrammar than its simple syntax for generating SVG diagrams. I could just write SVG by hand but:
- The SVG syntax is quite verbose; this project provides the opportunity to be selective of the SVG to implement and reduce the syntax required.
- SVG diagram can involve some mathematics that is better provided by JavaScript.
The json2svg project comprises of a ES Module (json2svg-lib) intended to be used by the Node.JS application (json2svg-app) but could be used inside a web browser.
Like the original project, json2svg will support:
-
The creation of
circle/elipserectangle/squareregularPolygonpolygon (irregular)imagetextline/polyline
-
Transformation such as
translate- scale
rotate
-
Utilities such as
- align
- pad
-
Layout (Combinators)
stack- row
- column
-
Curated Style
- 12 set colours including transparent (16 x 2 + 17)
- 4 line thicknesses
- 4 line styles
- ? Fonts
-
Data tpes
- Int
- Float
- String
- List (array)
Implemented features are crossed-out.
A live demonstration can be found HERE.