Hallo zusammen, erinnert ihr euch an bonsai.js? Das ist ein sehr schlankes Framework zum erstellen und animieren von SVG Grafiken – ich hatte im April einen Eintrag darüber geschrieben.
Letzte Woche habe ich nun ein „noch“ schlankeres Framework gefunden, das mit den gleichen -wenn nicht sogar mehr- Features protzt…

svg.js vs bonsai

Die Rede ist von , der Titel hat’s verraten, „svg.js„. Dieses Framework ist noch um einiges kleiner als bonsai: Es steht gegen 34 gegen 130 kB.
Die beiden Grafik-Frameworks haben, nichtsdestotrotz, eine ähnliche API:

// svg.js example:
var draw = SVG('canvas')

draw.polyline('0,100 350,100')
   .fill('none')
   .stroke({color: '#000', width: 10});

draw.rect(250,100)
   .move(50,50)
   .fill('#fff')
   .stroke({color: '#000', width:10});

draw.polyline('90,185 250,25')
   .fill('none')
   .stroke({color: '#000', width: 8});

draw.polyline('250,0 200,13 250,25')
   .fill('#000')
   .transform({
      rotation: 135,
      cx: 245,
      cy: 20
   });

// Bonsai JS example:
new Path([0, 100, 350, 100])
   .addTo(stage)
   .stroke('black', 10);

new Rect(50, 50, 250, 100)
   .addTo(stage)
   .fill('white')
   .stroke('black', 10);

new Path([90, 185, 250, 25])
   .addTo(stage)
   .stroke('black', 8);

new Path([250, 0, 200, 13, 250, 25])
    .addTo(stage)
    .fill('black')
    .setOrigin(245, 20)
    .attr('rotation', Math.PI*.75);

Ich glaube wir können uns darauf einigen, das zwar anders mit Objekten umgegangen wird, die Syntax ansich jedoch ähnlich ist… Vermutlich ist Bonsai eben durch diese Objekt-Struktur etwas größer – Das ganze Framework ist schließlich modular aufgebaut und könnte theoretisch mit separaten Render-Klassen ausgestattet werden!

Ich kann nicht sagen ob es bei einem der beiden Frameworks überwiegende Vor- oder Nachteile gibt, dafür kenne ich die guten Stücke nicht gut genug – ich finde die Nutzung von svg.js allerdings etwas intuitiver…
Zum Beispiel muss ich nicht jedes Element explizit der stage zuweisen, kann bei Methoden wie „stroke()“ Objekte übergeben und beim transformieren (z.B. drehen) von Objekten mit Grad-Zahlen arbeiten.

Weiteres?

Das schlanke svg.js verfügt außerdem über Animationen, Masken, Events, Gruppierung und einige Plugins (für Dragging, Easing, Export, Filter, …). Also eigentlich die gleichen Features wie bei Bonsai – wenn nicht sogar mehr. Doch ich will Heute nicht auf alle einzelnen Punkte eingehen – damit wäre ich noch Tage beschäftigt!

svg.js ist übrigens auch auf Github zu finden.

Kompatibilität

Auch hier ähneln sich die beiden Grafik-Frameworks… svg.js hat folgende Anforderungen:
Desktop

• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 9+
• IE9 +

Mobile

• iOS Safari 3.2+
• Android Browser 3+
• Opera Mobile 10+
• Chrome for Android 18+
• Firefox for Android 15+

Sonstiges?

Bis nächste Woche werde ich probieren mir „Bansai“ anzusehen – Das ist eine Inkscape Extension, welche in der Lage sein soll aus Grafik-Elementen des Programms BonsaiJS Code zu generieren… Sehr interessant!

Und mit diesen Worten möchte ich mich langsam verabschieden… Ich hoffe ich konnte euch was interessantes neues zeigen und kann euch auch nächste Woche wieder hier begrüßen!