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. Read the rest…

Posted by Dion Almaer at 8:44 am

3.3 rating from 27 votes

Friday, July 25th, 2008

Intersections and SVG objects

Category: SVG

Kevin Lindsey has a suite of tests that show various intersection routines for SVG objects: Each link allows you to manipulate the shapes listed. All intersections between the two shapes are updated as you manipulate the shapes. Some intersections display additional information when the shapes do not intersect. As an example, the circle-circle intersection determines Read the rest…

Posted by Dion Almaer at 4:01 am
Comment here

4.3 rating from 27 votes

Tuesday, July 15th, 2008

Paint Servers: SVG and Canvas

Category: Canvas, SVG

Robert O’Callahan and Dave Hyatt have been chatting about paint servers as Robert creates SVG ones and then arbitary elements. This continues the meme of taking common use cases and making them easy via CSS (e.g. reflections). Here is the SVG version: < View plain text > HTML <html xmlns=""     xmlns:svg=""> <head> <style> Read the rest…

Posted by Dion Almaer at 7:40 am

3.4 rating from 19 votes

Wednesday, June 4th, 2008

Mozilla Experiments with Applying SVG Effects to HTML

Category: Firefox, HTML, SVG

It seems so obvious once you think about it, but Rob O’Callahan from Mozilla took us by surprise in his blog post demonstrating his experimental branch of Gecko that allows you to apply SVG effects to HTML. The code for applying the effects above follows: < View plain text > xml <html xmlns=""     Read the rest…

Posted by Ben Galbraith at 6:00 am

4.2 rating from 21 votes

Tuesday, April 1st, 2008

Fun with SVG and CSS Animations

Category: CSS, Examples, SVG

Torrey Rice took Safari 3.1 and the new CSS Animations feature, and mashed it up with SVG to create a fisheye demo. All the functionality through CSS: < View plain text > css .dock img {    width:50px;    padding:10px;    float:left;    position:relative;    display:block;    -webkit-transition:width 0.5s ease-out, top 0.2s ease-out; }   Read the rest…

Posted by Dion Almaer at 7:45 am

-2.7777777777778E+16 rating from 36 votes

Wednesday, March 12th, 2008

WiseMapping: More Ajax Mind Mapping

Category: Showcase, SVG

WiseMapping is the latest Ajax mind mapping tool developed by Paulo Veiga and three friends. Wise Mapping is a free web mind mapping tool that leverages the power of Mind Maps mixing new technologies like vectorial languages (SVG and VML) and the power of the whole Web 2.0 concept. The tools uses SVG and VML Read the rest…

Posted by Dion Almaer at 10:21 am

4.1 rating from 22 votes

Friday, January 18th, 2008

Amaltas SVG Drawing Tool

Category: SVG, Utility

Amaltas Bohra has created a drawing/editing tool that allows you to create simple shapes and pictures. The application uses SVG to do its work, and Prototype to handle the Ajaxyness.

Posted by Dion Almaer at 1:53 am
1 Comment

3.7 rating from 30 votes

Monday, November 5th, 2007

sosymbol: Mashup your icons

Category: SVG, UI

Raymond Penners has launched sosymbol, a site with a collection of web2.0 (read: big?) style buttons and symbols that can be mashed up online and exported to svg/screensaver.

Posted by Dion Almaer at 6:21 am

2.6 rating from 23 votes

Friday, October 5th, 2007

Checkers with the Isometric Game Engine

Category: Google, SVG

It’s Friday game day! Raphael has created an SVG based Checkers game using his Isometric Game Engine: The Isometric Game Engine is a project to make cool games you can run in your browser. Checkers is the first game made with the engine, involving essential game elements such as creating a board, moving pieces around Read the rest…

Posted by Dion Almaer at 4:06 am

3.4 rating from 49 votes

Thursday, September 13th, 2007

SVG on IE via Silverlight via XSLT

Category: Microsoft, SVG

Sam Ruby has done it again, this time taking Toine de Greef’s work and making it better. Now your SVG can work on IE via Silverlight: Cool. SVG to Silverlight via XSLT. But, embedding in HTML using comments? I think I can improve upon that. Demo: Toucan. Rendered using native SVG on recent Gecko, Opera, Read the rest…

Posted by Dion Almaer at 9:15 am

3.1 rating from 36 votes

Wednesday, August 22nd, 2007

SVG Video: Now playing on a standard near you

Category: SVG

Chris Double has posted a SVG video tag demo that plays a port of a Silverlight demo. As you watch videos playing, you can move, resize, and rotate the canvases. All via: < View plain text > HTML <video id="svg_v1" src=""></video>

Posted by Dion Almaer at 11:05 am

3.2 rating from 44 votes

Wednesday, August 1st, 2007

InputDraw: Allow Drawing in Forms

Category: Component, Flash, SVG

Ever wanted to let your users draw in a form field? <InputDraw/> lets you do just that, saving the results as SVG for you to include in a form field. It’s based on Flash and is easy to use: < View plain text > HTML <script src="swfobject.js" type="text/javascript"></script> <script src="inputdraw.js" type="text/javascript"></script> <div id="place"></div>   <input Read the rest…

Posted by Ben Galbraith at 7:00 am

4.1 rating from 33 votes