Light SVG Library

Bonjour à tous,

Voici une nouvelle bibliothèque graphique au format SVG, sous licence libre GNU GPL, conçue pour être légère et très simple à utiliser.

Je développe du javascript depuis belle lurette, et systématiquement lorsque j'ai besoin de dessiner quelque chose, se pose le problème du choix d'une bibliothèque graphique (Raphael, d3js, ...). Il en existe d'excellentes, et très complètes, mais elles sont lourdes à embarquer et nécessitent à chaque fois de se replonger dans une doc épaisse, ce qui est laborieux lorsqu'on veut simplement dessiner vite fait 2 cercles et 3 lignes.

J'ai donc développé hclsvg disponible sous forme de npm, utilisable avec Angular, mais aussi avec tout autre javascript. Elle consiste à pouvoir piloter les attributs des éléments SVG depuis le javascript. Sa syntaxe a été pensée pour être la plus simple et la plus directe possible. Elle permet les graphiques et opérations fondamentales :

• line, rectangle, circle, arc, polyline, polygon, text, path
• translate, rotate, scale all shapes
• make shapes draggable or clickable, including callbacks
• export complete SVG code or corresponding PNG image

Voici un exemple typique d'utilisation, déclarant un graphique, dessinant un rectangle et l'exportant sous forme d'image PNG :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

const draw = new Hclsvg('mysvg') draw.setCanvasSize({width: 400, height: 300}) draw.rect({ x: 50, y: 30, width: 250, height: 80, stroke: '#c00', strokeWidth: 3, fill: '#008', fillOpacity: 0.3 }); const myPngImage = draw.exportPng();

---

J'espère que hclsvg vous sera aussi utile qu'à moi.

Cordialement
Hervé