Scalable Vector Graphics (SVG)

There have been quite a few developments in the SVG world this month.

The W3C SVG Graphics news site lists 8 SVG product announcements in June 2006 alone!

W3C on SVG

Technorati tags: svg, w3c, standards, news, graphics

Lineform - SVG Test Suite Compliance

Lifeform 1.1 - a very affordable Mac drawing program - has support for SVG. Details are below.

Lineform 1.1 SVG support W3C test suite compliance

Technorati tags: macintosh, macosx, svg, drawing, graphics, 2d

Scalable Vector Graphics (SVG)

Sun's Java standard for portable devices is getting SVG support via JSR 226.

W3:

Developers interested in building mobile Java applications
leveraging SVG with the JSR 226 APIs have been
treated by Sun Microsystems who just released the first beta

Technorati tags: java, svg

Sam Ruby endorses SVG

Word is out that Sam Ruby is throwing his voice behind SVG, Apparently, he has described it as a positive epidemic.

Yup, it is everywhere and spreading fast - and, it is a Good Thing.

Something Witty Goes Here:

I follow Sam Ruby%u2019s blog to get some insight into feed-related and other hot web technologies, so I was happy to see this morning that Sam has given his vote of confidence for SVG as a technology. Sam raises a good point about SVG being a %u201Cpositive epidemic%u201D: We%u2019ve now got SVG in the desktop (Gnome/KDE), office applications (OpenOffice), web browsers (Opera, Firefox and soon Safari and later IE) and drawing programs (Inkscape). There are enough things out there including forms of SVG support that eventually support will even out and we%u2019ll have ubiquitous support everywhere.

Technorati tags: svg, inkscape, safari, openoffice

Opera 9 includes SVG support

Opera now has SVG support!

Something Witty Goes Here - SVG News Digest: 2006-06-23:

Opera 9 Released
A huge step forward for SVG in the web browser actually, Opera finally released Version 9 of their acclaimed web browser. Opera 9 includes SVG 1.1 Basic support, which is pretty close to everything I could possibly want in a SVG 1.1 implementation. Opera now has the best SVG implementation out there are the moment, and Firefox has a long ways to catch up in Firefox 3 (due some time next year).

Considering that Firefox has supported SVG since 2005 Q4, this means half the major browser brands now support SVG.

When the Apple Safari web browser goes from only including SVG support in their nightly builds - to including it in a release, that will be great. Actually, I think SVG support is in WebKit itself - so I guess SVG support would arrive in the form of a Software Update or new OS release. Hopefully, the former.

Anyway, once that happens, SVG is not only a de jure standard - but also a de facto standard. I think there is at least one other browser out there, but it will not matter. SVG will be running in 3 different browsers and those 3 cover every major desktop platform.

SVG has been included in hand held thingees since last year sometime, so it truly is a universal platform: Mac, Windows, Linux, Unix, X11, and various portable devices. There are plenty of APIs, conversion tools, and drawing tools that support SVG too. That is enough to make it worthwhile to developers.

Technorati tags: opera, svg, browsing

dojo-svg kicks off

The Dojo web components framework has had its architecture refactored for a while, so it could handle non-HTML based components.

As most web developers know, XHTML 1.1 and later have the capability of including multiple web document types in one single document. This is one of the reasons for moving away from the bush league HTML format, towards a more rigorous XML-compatible format.

SVG and MathML are a couple of the cool formats you can blend in with XHTML. If you look at the resulting compound document, as it is called - you will see everything described in the page.

The Dojo framework is now planning to capitalize on this new ability that browsers have, combined with their own framework's improved design - by introducing SVG components to the web.

Pretty cool idea. Here is an announcement about the project which came out last week.

Refactor the Life:

dojo%u2019s developers have made significant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo-svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5 , or any browsers with Adobe SVG plugin.

Technorati tags: dojo, svg, components, framework, graphics, 2d, web, firefox, ajax, javascript, programming

Something blew away half my template for this blog

This happens once in a while when I am getting the weblog template for one of my blogs hosted on Blogspot.com.

It has happened once or twice before tonight. Tonight, it happened to three blogs, all one right after another.

I was editing each one of their templates in a different tab of the same Firefox 1.5 web browsing window.

I do not know if the fault was a flaw in Firefox, a flaw in Blogger.com, or a transitory communications glitch. Right now I am not leaning toward believing it was the latter. It has never happened when I am using Safari to edit the template, though - I know that for sure.

I do know what the error was: a good chunk of the last part of my template for each blog just disappeared!

The failure, of course, I noticed when my published blog contained nothing but a command bar across the top, or not even that and just a little garbled Bloggerish-HTML.

My response to the problem was simple - though left me with a tragic loss. I lost my entire list of handy links (i.e. Blogroll) in the sidebar in two of my blogs, one of which was this one.

I was lucky that I had a browse of one of the blogs open in another browser before this blog apocalypse happened. I was able to clip out and save that one's sidebar definition directly from the HTML of that page.

Fortunately, Blogger does provide a way chose a new template - and you can use that to restore an old one to its factory-settings.

This problem has hit other people. I have seen it in the Blogger-help newsgroup, so I know I am not the only one. Having been hit by it 4 or 5 times on 2-3 occasions, I can attest it is a bear when it happens.

If anyone from Blogger ever reads this, here is what Blogger does not do, and what it appears it should do, in order to prevent problems like this in the future.

1. Include marker comments or better yet blogger tags at the very beginning and end of the document
2. Make sure those marker comments/tags are there BEFORE replacing the old copy of the template.
3. Validate the blogger tags. If the last bunch of them are empty, do NOT just overwrite the template without asking first, showing the user the BEFORE and AFTER version of the template, and getting them to fix-or-confirm the change before proceeding.

People who write blogger.com templates and people who write Blogger.com template editors should study this advice and decide if they can help with this or not.

The morals of the story are:

• have backups
• do not panic, you might still have a copy of something in an editor/viewer buffer or on disk
• consider your recovery options carefully
• use whatever information the disaster did not destroy to help recover

I should have my page looking almost as good as new shortly. Although, I did not have a backup, things mostly broke my way on the other 3 points.

Technorati tags: blogspot,disasterrecovery,blogging,blogger,css,blogroll

Portrait of me, rendered in SVG, as a tag cloud of del.icio.us links

I started reading up on SVG somewhere around 2000 and 2002.

I had learned enough of it by 2002 to be able to generate GUI screen mockups in it.

Now someone has done some pretty cool stuff with SVG.

:

A little project that makes use of the excellent Textorizer, by Max Froumentin, and plays around with the unique qualities of SVG files (SVG or scaleable vector graphics is an XML flavor that renders, well, scaleable vector graphics...).The result is a cloud of hyperlinkable Del.icio.us text tags in the shape of (in this case) a self-portrait. We are what we link to... Why am I including it here? Well, it sort of gestures to art, and it is public...

If you take a look at the SVG that gets generated, it is not very complicated. Sort of lengthy, yes - but not very lengthy if you consider how much information is incorporated within the data.

Here is my portrait, expressed as an SVG tag cloud, embedded in this page. Whoops, the SVG does not include the hyperlinks in this version - sorry!



Here is the original portrait as a JPEG image - so you can compare, or in case the SVG did not show up in your browser for some reason.



Here is a hyperlink to the SVG version of the portrait.

Here is the list of tags I used:

basic
c
c++
css
fortran
html
java
javascript
linux
macintosh
pascal
proglog
svg
unix
xhtml
xml
xsl-fo
xslt

I just input the link to my picture - and the tag list above - to a page entitled Textorizer - vectorize a picture using text strings. That page took care of generating the SVG document. The SVG it produced looks pretty clean, I have to say - after looking it over myself a bit.

The program that creates the SVG image from the JPEG image is called the SVG Textorizer Tool, by the way.

Open Clip Art Library :: openclipart.org :: Drawing Together.

There actually is a clipart library on the web that features SVG graphics.

Go see it here: Open Clip Art Library :: openclipart.org :: Drawing Together.

While the site does not seem to have a lot of social web features, it is a handy repository. Their repository makes it easy to find SVG clip art.

Technorati tags: svg, clipart, graphics, repository

SVG groups and SVG use by the major portals

Yahoo Groups does host an SVG interest group, svg-developers.

At this point in time, I am not aware of any use of SVG technology by Yahoo itself on any of their hundred or so portals.

This seems a little odd, since their arch-rival Google is already using SVG some on their sites. Not to mention the fact that Yahoo is deep in a two-pronged effort to increase market share by:

1. enticing users to the sites with:
   1. better-looking page designs, and
   2. smoother behavior by using AJAX
2. enticing developers to create content and tools by:
   1. giving away SDKs
   2. documenting APIs
   3. supporting new technologies like AJAX and web services
   
   

Google is a bit more on the ball with SVG.

For one thing, they have - or will soon have - SVG support in Google Maps.

You can also access the mozilla.dev.tech.svg newsgroup from the Google Groups website.


Microsoft has SVG support in their Microsoft Live maps feature.

So all the major players are out there using SVG, or at least passively encouraging it.

It would be nice, now that more than ten percent of the web can actually take advantage of its benefits without even installing a plugin, if the big three would support SVG even more. They could at least install conditional support throughout their sites, like Google and Microsoft have already done for their Maps users.


Three other areas that SVG would really heat up the user and developer interest in are:

1. image albums
2. reports
3. visualizations

Image albums are hot in 2006! Look at Flickr, which - after attaining the ripe, old age of a year and a half old - was bought by Yahoo for millions of dollars. Flickr is popular because:

1. millions of people can look at it, and with millions of people putting up images on it - some of them are darned good/popular
2. tagging folksonomy support
3. favorites-marking feature is handy
4. commenting on images is fun and sometimes even useful

So, if a new site was created just to support SVG images, and it had the same sorts of features as Flickr and other social webites - it would rapidly rocket in popularity.

There would be all kinds of unique uses for such a site. Image owners could publish their:

1. clip art creations
2. diagrams
3. interactive visualizations
4. graphical sitemaps for their websites
5. sentence diagrams of sound bites from recent popular speeches
6. logic diagrams that pick apart recent quotes that are in the news, illustrating what are good points, and what are outright rhetoric & logical fallacies
7. connections between assertions made in some current news stories - and contradictory facts listed in other stories in the news

These sorts of things could make public debate or interesting, productive, and honest.

They could allow websites to offer a compelling view or their usefulness that could be taken in at a glance. They could help promoters of new vendor-independent technical standards express their pet technology's benefits. They could get the public more familiar with thinking and looking at things logically, and acquainted with the benefits of that rather than listening to hollow arguments and swayed by pure emotion.

Sure, some people would tried to game this system by spamming or whatever. But what they publish would not become popular, thanks to the social-ranking features: favorites and/or ratings. Junk would sink to the bottom, where it belongs. Pure golden ideas would float, like they should.

Visualizations are a pretty exciting area. What makes them exciting is that

1. our existing tools/programs can create them easily now
2. users have the display hardware and software needed to render them very nicely
3. hardware is very fast now
4. we have more data than ever now, which can be presented as information by analysis using heuristic knowledge - and algorithms - that we have accumulated

Reports (tables, graphs, pithy comments/annotations) are just plain essential.

Websites like Google and Yahoo offer their advertising customers reports on how their advertising campaign is going, what it is costing them, where they are spending money, and so forth. As a rule, people do not plunk down money on a service if they cannot see the results for themselves!

Advertisers cannot look over everyone's shoulder (physically), so they tend to go for the next best thing. If a marketing campaign seems to be going well, then the sales people can forecast that and cost centers can use that to justify their recent and near-term budgets. If a marketing campaign does seem to be going well, then all internal stake holders can push for making improvements while it will still make a difference to do so.

Another kind of thing that publishes reports is Amazon's Alexi (A9) service. They list who the popular websites are, rank them, and tell how much traffic & users they are getting. Well, that information can come as reports and those reports can include graphs, just like financial reports do. In fact, because a heck of a lot of financing is riding on those figures - they really should!

These are just some of the really obvious things that SVG images can do. The biggest web portals are doing some things with SVG. They should be doing a lot more, however. And it would not be hard for them to do so.

SVG & Canvas: Graphics for the Web

Not surprisingly, SVG and the new Canvas element are presenting developers with a dilemma: which to use when they need to do graphics on a web page?

That question was addressed at XTech 2006 by one of the presenters, Vladimir Vukićević, of Mozilla corporation.

SVG & Canvas: Graphics for the Web:

SVG:
Has scene DOM (SVG DOM, though)
Canvas:
Single HTML element, rendering script-driven
Deals in shapesDeals in pixels

Generally, the choice is pretty simple. If you want to paint bitmap image based graphics that exist as a rectangular array of pixels that are dynamically generated in an HTML or XHTML element on a web page - use Canvas.

If you want a scalable image consisting of vector (and possibly some bit-mapped image) graphics that are either scalable, predefined, or respond to user input events - then go with SVG.

Technorati tags: svg, canvas, graphics, 2d, web, firefox, drawing, painting

SVG everywhere - at last!

A day I had been waiting for a long time finally arrived in late 2005.

The Mozilla group released Firefox 1.5.

Buried in the long list of new features introduced in version 1.5 was one that caught my eye: SVG.


While there is no shortage of ways to do graphics in the world today, there are relatively few that are based on a de jure standard format, are not tied to a particular application or vendor, are cross–platform, can be easily generated and parsed, supports scaleable vector graphics, and can be styled with an external styles document (e.g. CSS).

SVG is that way to do graphics.


Before this year even started, the world's most popular cross-platform web browser supported SVG.

By the end of this year, Safari - the web browser that comes included with the Apple Macintosh - will probably also support SVG. If not this year, then I think surely next year when Leopard (10.5) comes out - Safari will be support SVG.

Some cell phones have browsers that already support SVG. Now that their memory sizes have soared into multiple megabytes, I expect SVG support - at least the Tiny SVG profile - will be supported by most phones within a couple of years.


One of the most exciting things about SVG, other than what is in it, is how it can be mixed in with other XML standard content in the same document. Mixing SVG and XHTML content is kind of a popular thing to do.

Firefox 1.5 supports this already. Hopefully, Safari will follow suit. Apple seems pretty much on the cutting edge of XHTML technology these days. So I expect they will do that right out of the starting gate for SVG.


There are a lot of good free software tools for artists, or technical people, out there. A couple that most people of one type of the other should check out are:

• Inkscape
• GraphViz

Inkscape is a freehand drawing tool. Graphviz is a declarative language for creating diagrams by describing them, and it draws them for you.


Some commercial tools support SVG as well. They are not hard to find. That is the great thing about standards. Once you have a standard, there are so many of those.