Friday, August 8th, 2008

Raphaël: Simple graphics wrapper on top of SVG and VML

Category: SVG

Dmitry Baranovskiy of Atlassian has created Raphaël “a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.”

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

The API looks like this:

javascript

  1. // Creates canvas 320 × 200 at 10, 50
  2. var paper = Raphael(10, 50, 320, 200);
  3. // Creates circle at x = 50, y = 40, with radius 10
  4. var circle = paper.circle(50, 40, 10);
  5. // Sets the fill attribute of the circle to red (#f00)
  6. circle.attr("fill", "#f00");
  7. // Sets the stroke attribute of the circle to white (#fff)
  8. circle.attr("stroke", "#fff");

Check out demos showing reflection, image rotation, and text rotation.

Here is the reflection:

done via:

javascript

  1. $(function () {
  2.     var src = $(".image img")[0].src;
  3.     var R = Raphael("mirror", 320, 240);
  4.     var gradient2 = {type: "linear", dots: [{color: "#000", opacity: .5}, {color: "#000"}], vector: [0, 0, 0, "100%"]};
  5.     R.image(src, 0, 0, 320, 320).matrix(1, 0, 0, -1, 0, 280);
  6.     R.rect(-2, -2, 322, 83).attr({gradient: gradient2, "stroke-width": 0});
  7.     R.rect(-2, 80, 322, 240).attr({fill: "#000", "stroke-width": 0});
  8. });

(via Charles Miller)

Posted by Dion Almaer at 8:44 am
7 Comments

+++--
3.3 rating from 27 votes

7 Comments »

Comments feed TrackBack URI

I considered this SVG/VML over Canvas/VML as a cross-browser graphics solution and ran up against a deal breaker: Mozilla browsers (and possibly others) won’t render SVG fragments unless the page is served as XHTML.

Comment by sashasklar — August 8, 2008

Sorry, what’s new here? Dojo has had a small cross-platform SVG,VML,Canvas,Silverlight vector graphics api for a year now that does the same thing.

Comment by jaxsphere — August 8, 2008

@jaxsphere

dojo is dojo only
this function work nice with mootools(tested by me) and jquery as seen on his page. I think it works with other frameworks.

Comment by rborn — August 8, 2008

@sashaklar: actually, there’s a way around this… check out the dojox.gfx source code as it works with html pages as well.

@rborn: there’s really no reason someone couldn’t use dojox.gfx with jQuery or Mootools or Prototype.

Comment by Dylan Schiemann — August 8, 2008

Pertaining to Canvas vs. SVG/VML in general, have there been any benchmarks regarding performance for each? IMO, a thin API on top of the OS drawing API (Canvas) would be faster than DOM manipulation (although obviously we can’t test Canvas against VML yet).

Comment by elfpoet — August 8, 2008

@elfpoet: I can’t remember the source, but canvas was found to be significantly faster than SVG. The speed difference was negligible on static images, but anything dynamic…

Comment by matanlurey — August 8, 2008

A very simple way to get SVG into a HTML document is through IFrames and DataUrls. Actually, it’s also a very clean way to get VML into HTML using javascript urls.

<object type=”image/svg+xml” style=”border:none;”
data=’data:image/svg+xml,<?xml version=”1.0″ standalone=”no”?>
<svg
xmlns:svg=”http://www.w3.org/2000/svg”
xmlns=”http://www.w3.org/2000/svg” version=”1.0″
>
<circle cx=”0″ cy=”0″ r=”30″ style=”fill:rgb(0,0,0)” />
</svg>’
width=”320″
height=”240″
></object>

<iframe style=”width:320px;height:240px;” frameborder=”0″
src=’javascript:%27<html><head></head><body><style>v\\: * { behavior:url(#default#VML);display:inline-block }</style><xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” /><v:oval style=”height:60px;width:60px” coordsize=”21600,21600″ style=”position:absolute;left:-30px;top:-30px;” fillcolor=”black” strokecolor=”none” /></body></html>%27;’
></iframe>

Comment by Hans Schmucker — August 8, 2008

Leave a comment

You must be logged in to post a comment.