è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

• Fluent APIs
• Simple examples
  1. Line
  2. Circle
  3. Path
  4. Polygon
  5. Polyline
  6. Rectangle
  7. Group
  8. Fill
  9. Stroke
  10. Stroke width
  11. Pattern
  12. Text
  13. Text stroke
  14. HTML
  15. Download
  16. Drag'n'drop
  17. Connectable
  18. Draggable / moveable
  19. Sizeable
  20. Stackable
  21. Grid
• Complex examples
  1. Cap
  2. Join
  3. Miter limit
  4. Node editor
  5. Checkers boards
  6. Timeline
  7. Diagram
  8. Paint
• Media
  1. Audio
  2. Canvas
  3. Iframe
  4. Video
• Animation

Multiple APIs

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.

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

• Show potentials (move) and restrict movement
• Align to grid (slowly animated after user gesture)

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