sorted by: recent | see : popular

Content Tagged with canvas + svg

As part of the Open Web Advocacy work I've started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael.

One of the big reasons for this is that 2-D drawing/vector graphics is the top requested feature by double the amount of other feature requests in the recent Open Ajax Alliance Browser Feature Wish List vote-off. As part of this effort I'm doing a bootcamp right now to come up to speed on the latest developments in both Canvas and SVG. I've been using Shelley Powers excellent Painting the Web book to find out the state of vector graphics on the web in 2008. During this education I've run across two interesting things.

First, I wanted to know what the status of SVG support is across the different browsers. I found Jeff Schiller's very complete SVG Test Suite results that are actively kept up to date:

SVG 1.1 became a W3C recommendation on January 13, 2003. Five years later, this page records my results of running various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite. Last updated 2008-06-18.

A screenshot with some of the results:

SVG Test Results Against Browsers for SVG 1.1

Things are pretty good with Firefox 3, Safari 3, and the winner, Opera. There is a strong subset of SVG that can be used cross-browser with these. Of course, Internet Explorer is the limiting factor here, with a grand score of 0% for all tests:

Internet Explorer SVG Support

This means that for open web vector graphics to be realistic we need some kind of shim for Internet Explorer (Adobe used to have a browser plugin for IE that had very high quality, but its quite large and was end of lifed in 2007). Internet Explorer actually has an earlier vector graphics standard named VML (Vector Markup Language) that can be used to 'trick' it into having 2-D graphics support that is used by a number of open source toolkits. However, VML can run into some performance issues when you start to get into a large number of nodes and animation with the available open source drawing toolkits.

One natural avenue is to emulate SVG or other 2-D graphics on Internet Explorer using Flash. I had always heard about this possibility but recently found a small company actually doing it to good effect. They have not finished yet, but their demo is impressive:

SVG Render Using Flash

Here we are viewing the source of the SVG being rendered by this Flash:

SVG Renderer in Flash (View Source)

I emailed the developers to get some more information on this Flash-based renderer and they responded:

Our SVG viewer and editor is not open source. It will be part of the new InputDraw version and with some more features - like draw recognition - will be part of the new Comics Sketch site, so users can create advanced comics strips.

We are part of a small company in Lisbon, Portugal named inEvo that works with a lot of web development, rich interfaces and other areas like computer graphics and artificial intelligence.

While I respect the hard work it took inEvo to create this and their need to charge for it, it looks like using Flash to emulate SVG is a valid approach for Internet Explorer and it would be great to have something similar available open source. Just the basic viewer being available would make sense as open source and would probably even drive more business to them for their higher level tools; it looks like inEvo has created lots of cool things above this that make sense as being commercial-only, such as an SVG editor, drawing recognition, social comics creation and sharing site, etc.

I have commited a new version with a new CTM (current transformation matrix) managment for shapes.

Now shapes handles matrix and inverse matrix. So it’s really easy to convert points from shape to viewport and from viewport to shape coordinates.

With this, handling missing pick feature in canvas is much more easier. Check this canvas example (Firefox and Safari). You still can play with the SVG/VML version (IE/Firefox/Opera)

In NeoMeeting, I am able now to edit shapes graphically, here is a little screenshot:

Next I will add some shapes like lines and polylines and I will do the first official!

Here is my first post about a framework I am developing for NeoMeeting. It’s a JavaScript Framework to draw vectorial shapes inside a web page.

The idea comes from dojo.gfx. It gave me the idea to create my own framework, based on Prototype, that fits my needs.

• OO Framework of course!
• Pluggable renderer. I want to be able to use SVG or VML (only for IE support of course!) or even Canvas (or anything else that support 2D drawing) with the same code.
• Have a tools to interact with graphic (like a selection tool)
• and more (I am sure, but I will found out later :))

I have something running now and I will share with my ideas and code in this blog.

Basically, here is how it works:

1
2
3

<div id="whiteboard">
</div>

1
2
3
4
5
6

#whiteboard {
  width:  800px;
  height: 600px;
  float:  left;
} 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Create an SVG renderer
var renderer = new SVGRenderer("whiteboard");

// Create a rectangle with some attributes like color and bounds
var rect = new Graphic.Rectangle(renderer);
rect.setFill({r: 255, g: 0, b: 0, a: 128});
rect.setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});
rect.setBounds(10, 20, 200, 300);
rect.setRoundCorner(10, 10);
rect.translate(10, 20);
rect.rotate(30);

renderer.add(rect);

1
2

rect.setFill({r: 255, g: 0, b: 0}).setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});

Here is what you will see in your page:

Next post, I will detail object graph I have done and share more code.

I think this framework will be open-source and I hope available soon.