Most widely-supported (IE + Opera) JavaScript canv

Question

I'm looking to do a portfolio site, and I wanted to do some creative drawing on the website without using images.

I considered canvas, which I really think would be cool, plus an interesting project, however, I heard that IE has no compatibility (is that true?) so I cannot have that.

Then, I considered Raphaël, which seems like it's the most viable option thus far.

Ughh, there was another library that I can't remember the name to, which also seemed like a good option.

What do you guys think about Raphaël and its overall compatibility, and its capabilities, regarding the kinds of drawing its capable of. I was browsing through the documentation and I think it's quite powerful.

Answer 1

Do you want to draw the vector graphics on the site itself, or just publish premade vector graphics?

• If the former, have a look at svg-edit which can easily be embedded in your site, and which works in most browsers (old IE versions require the chrome frame plugin, but IE9 will be supported by svg-edit 2.6).

• If the latter then there are probably many options, here are a couple off the top of my head:

  • Use SVGWeb - get started quickly with that using templates from svgboilerplate.com

  • Serve svg to browsers that support it, and static images to everyone else

    <object data="your.svg" type="image/svg+xml"><img src="staticyoursvg.png"></object>

Answer 2

Well you could download Inkscape and draw what you want cross-browser in there. Then go to my website (Page with tool and instructions below) and use the SVGTOHTML converter there. I'm adding more with each release. The SVG is conveted into Raphael and there are a couple of options as to what format you can have.

The version is at 0.57 at the point of typing this.

http://www.irunmywebsite.com/raphael/svgsource.php

Answer 3

Look into SVG Web, it uses Flash to emulate SVG in non-supporting browsers. It's written by industry leaders like Brad Neuberg and it doesn't interfere with the way you want to write SVG markup so when the browsers that don't support SVG disappear you can ditch it and your SVG markup will still work. With Raphaël, you have to to write JavaScript code instead of SVG markup, so you have to keep using it forever, or re-code your graphics. Also, Raphaël only supports the lowest common denominator between SVG and VML, so you can't do much. It even emulates some VML bugs in SVG, so that both graphics look the same. Raphaël is better for dynamically generated SVG, but for other cases, I'd recommend SVG Web.

Answer 4

It isn’t true that IE doesn’t support canvas. IE9 will support it, which is the same version that will support SVG.

For SVG development, it depends what you want to do. For static images you can even use Illustrator or Inkscape then save/export as SVG. If you do this, remember to use Scour [0], as the auto-generated markup can be a bit crufty. I usually just write the SVG by hand, unless I'm doing something complex, in which case it is better to use a image editor.

There are no real good editors to add animations though, so I always add those by hand. Things like SMIL (used for animating SVG) are not that difficult to learn, but a bit verbose. If you use SMIL then it is recommended to use FakeSMIL, which is included in the SVGBoilerplate that Erik links to above, as some browsers have lacking support for SMIL.

If you want to use a JS library to generate the SVG rather than writing by hand or using an editor, then Raphaël is probably the most mature. There is also Dojo GFX [1]. Which is best really depends on personal preference and what you are trying to do. It would be best to try them out with something simple and see which you prefer.

[0] http://www.codedread.com/scour/ [1] http://docs.dojocampus.org/dojox/gfx