èsvégé

èsvégé

Introduction

èsvégé is a library to create and manipulate interactive and animated SVG images.

Currently the size of èsvégé is ~3kB over the wire (gzipped, minified).

Contents

Multiple APIs

Elements Shapes Browser

Fluent APIs

The API is fluent and gets you up to speed if you have code completion in your IDE. No more guessing.

const svg = new SVG(image, 300, 300)

svg.line(0, 0, 100, 100)
       .fill('black')
       .stroke('red')
       .width(5)
    .circle(100, 100, 75)
       .fill('red')
       .stroke('black')

Examples

Elements in SVG do not have a stroke or fill by default (TODO true for all elements?). èsvégé chooses to supply sensible colors for fill and stroke so you don't have to worry about them.

Please note that for clarity these examples have been scaled up by using a *viewBox*, this causes strokes to be more emphasized. Without *viewBox* they would be 1px wide.

TODO make interactive by dragging the numbers *OR* the shapes.

Line

Circle

Path curve

Polygon

Polyline

Rectangle

Group

A group containing two elements.

TODO: make the group itself draggable.

Fill color

Stroke color

Stroke width

Pattern

Work in progress

Text

Text stroke

HTML

Download

Download the chess board in SVG.

Download SVG TODO Download PNG

Drag'n'drop

Work in progress

// TODO drop image from device to browser
//      example code
   

Connectable

Draggable

draggable or moveable?

TODO: keep track when outside svg

Sizeable

Stackable

Grid

Complex examples

Cap

Join

Miter limit

Node editor

Checkers boards

A chess board with draggable pieces.

An Ataxx board with draggable pieces.

TODO

Timeline

TODO correct dragging of lines

Diagram

Work in progress

An SVG diagram larded with HTML tables.

Watch out for XSS if you want to use this!

Paint

A simple paint program.

This editor uses latest browser technology and is tested in the latest versions of Chrome, Safari, Edge & Firefox. If you experience any issues, please try to upgrade first.

Media

Audio

Canvas

Iframe

Video


Inline SVG video test

Using html namespace :-(

Using foreignObject :-)


Animation