Skapa vektor grafik (SVG) med Snap.svg eller Raphaël

Jag har nu lekt lite med Raphaël som är ett javascript bibliotek för att skapa och modifiera vektor grafik (svg) men även animera och göra interaktivt. När jag satt och testade hittade jag inte riktigt den funktion som jag ville ha nämligen “mask” då jag stötte på Snap.svg skapat av Dmitry Baranovskiy som även är skaparen av Raphaël.js.

Snap.svg är skapat för moderna webbläsare och stödjer där med endast IE9 och uppåt medan Raphaël har support ända ner till IE6. Snap.svg har flera funktioner som mask, gruppering, clipping, pattern m.m. som är riktigt smidigt i många fall. Eftersom Snap.svg är byggt av samma person och är i pincip en ombyggnation av Raphaël så är koden väldigt lik.
Exempel:

// Använd selektor till en svg-tagg eller sätt bredd, höjd för att skapa på plats
var svg = Snap('#id_av_svg'); // 100, 100

// Skapa en rektangel med måtten 60x60 som är 20 från topp & vänster
var rect = svg.rect(20, 20, 60, 60);

// Default är den svart men låt oss göra den röd med en svart kant
rect.attr({
  fill: '#C1353E',
  stroke: 'black',
  strokeWidth: 1
});

När ska du välja vad?

Vet du om att dom flesta har IE9+ eller att den del som du använder SVG till inte har någon större betydelse för upplevelsen eller funktionen på sidan kör på Snap.svg annars använd Raphaël.

Leave a Reply

Your email address will not be published. Required fields are marked *