Minimalistic SVG library

Introduction

Like stated in Simple SVG in Javascript creating SVGs doesn't have to be hard. I want to take this a little further and show how to create a minimalistic SVG library in JavaScript (but any language will do).

Usage

Example usage:

{{ include “/articles/minimalistic-svg-library/usage.js” }}

Which renders an SVG which contains a circle, a line and a rectangle:

The library itself

The code is almost 15 lines.

{{ include “/articles/minimalistic-svg-library/msvg.js” }}

That's all. Can you make it smaller? Faster? Better? Leaner?

Extend it

Create a primitive function to take out the guessing.

{{ include “/articles/minimalistic-svg-library/extend-line.js” }}

Or a function to create a group element:

{{ include “/articles/minimalistic-svg-library/extend-group.js” }}

No more guessing?

It takes some guessingRTFM to look up the parameters. SVG isn't very consistent (x/y? cx/cy? x1/y1? dx/dy? transform? what me worry?).

To mitigate this I am currently working on a SVG library in TypeScript that takes out the guessing. A preview: esveegee. Still I think a minimalistic library like this has its place.

Attribution

The W3C SVG Logo including a link: