vivasvg

SVG rendering library with emphasis on declarative API

Demo

Here is a little demo, which renders SVG text at random positions:

index.html:

<svg id='scene'>
  <items source="{{points}}">
    <text x="{{x}}" y="{{y}}" fill="{{color}}">{{color}}</text>
  </items>
</svg>

JavaScript file provides data context and bootstraps vivasvg:

var dataContext = {
  points: [..] // Each point has {x, y, color} attributes
};
 
var vivasvg = require('vivasvg');
vivasvg.bootstrap(document.getElementById('scene'), dataContext);

See demo folder for working example.

Rationale

I believe in declarative syntax for UI. HTML is a declarative markup language. Angular.js takes HTML programming to the next level.

This repository tries to fill a niche between ease of declarative programming and high data binding performance for SVG drawing.

Warning

I attempted many times to implement something similar, and failed many times. I will not be disappointed if this repository will also be a failure. Please don't use this, unless you also believe it's a nice experiment or want to help me.

I'd love to know what you think :)!

license

MIT