parametric-svg / tutorial

parametric.svg for dummies

 

Parametric drawings in pure SVG.

 

In the wild

• The fabulous folks at flone.cc have used the idea to build an open source drone!
• A bunch of educational engineering charts are available at parametric-svg-demo.firebaseapp.com.

 

Goals

✓ Fully compatible with SVG specs.

parametric.svg graphics can be viewed directly in the browser or in a simple SVG viewer. They can be edited and authored in your favorite program – be it Inkscape, Adobe Illustrator, vim or any other.

How is that? parametric.svg is just an XML namespace. We don't reinvent the wheel – instead, we extend the impressive capabilities of SVG, which are already built in.

✓ Language-agnostic.

Tailor-cut for the web, but easy to implement in any programming language.

✓ Ready for the future.

There is a specification for dynamic parameters in the upcoming SVG 2.0. parametric.svg aims to be backwards compatible with it – profiting from all its goodness, and bringing even more than that. We not only support dynamic parameters – but also logical and arithmetic relationships between them and geometry.

SVG 2.0 isn't yet fully standardized and implemented. But parametric.svg is built upon existing, stable technologies – ready to be used today.

✓ Full-fledged.

parametric.svg is a complete set of tools to describe relationships between parameters and elements. For the web it could become what Grasshopper is for CAD.

 

Implementations

• <parametric-svg> – A custom HTML element.
• parametric-svg – A JS library with an easy-to-use API.
• @parametric-svg/patch and @parametric-svg/parse – A tandem of low-level libraries.

tutorial's Issues

I do not like the InkScape bait-and-switch

I do not like the InkScape bait-and-switch you pulled with your tutorial.
Please be honest upfront about parametric SVG not working yet with InkScape.

Inkscape Extension

Hi, I have created an Inkscape extension to support parametric svg directly. By now, I am using my own namespace, but if you want, I can make it use your namespace to make it compatible.

https://github.com/mnesarco/inkscape-parametric

It works exactly the same as your parametric-svg, but expressions are python expressions, and you can embed a script to define variables and functions.

The embedded script and attribute expressions are evaluated when you call the extension.

Please let me know your opinion.

Please include example parametric SVG code in jSbin editor

Please include an example parametric SVG in the JSbin editor
https://jsbin.com/hadede/edit?html,output
something like a smiley would do fine, for example http://www.giplt.nl/svg/
This way, visitors can try and edit parameters your example instead of creating an example on their own by hand.