Programming Languages SVG

Color sampling and SVG gradients

More fun with SVG.

I’m rather surprised there isn’t more general ‘design’ work using SVG. True, you really should have your pages as XHTML and not many people are ready to jump on that bandwagon. Still, once you’ve bit the bullet, you can have a lot of fun with your pages and incorporating SVG.

My newest experiment is actually combining PHP image functions with dynamically generated CSS entries, which also control the random photo header. All the SVG elements are dynamically created based on colors sampled in whatever is the current header image. I used the photographer’s ‘rule of thirds’ to pick four outer points and then sampled the middle. I use the sampled colors to generate CSS values used to style 4 small circles in the top of my sidebar and rounded-corner gradient-filled ‘caps’ to my individual comment entries.

I had to make some tweaks to make the gradient comments work. First, the SVG element had to have the display setting set to ‘block’ in CSS; otherwise, the browsers generated space following the object. I’m assuming that the SVG element is treated like the IMG element is in strict XHTML mode: treated as an inline element, and given a ‘text descender’ space. Second, just as with images, fixed widths work best for gradients, and the viewport for each SVG element has to be fixed to work with Safari 3.

The gradients don’t work with Firefox 2.x if you access the page using a page fragment, such as clicking on a specific comment. This is a bug that has been fixed in Firefox 3.x. It does work with the latest Opera and Safari 3. The page degrades nicely for non-SVG browsers.

I’m not sure if I’ll keep the SVG effects, or even take it further with creating entire page color schemes based on color sampling of the image. I may look at embedding additional data directly in the images to control both the CSS and the SVG.

I do want to implement ‘caching’ for the ‘blog pulse’ I created earlier. The best time to cache the pulse would be each time a new comment is saved, probably to a database table I’ll create for other uses. The color sampling, though, may not need caching. The gradient effect can be a little slow, but most of the ‘slowness’ is from the fact that the header image is quite large. Then there’s the random selector for the image–I imagine this can be improved through the use of caching.

Frankly, I don’t load my sidebar with dozens of widgets, hook into that abysmal google syndication service, nor do I embed dozens of YouTube videos in my posts. My little use of SVG is nothing compared to all of this, and, unlike the other services, doesn’t impact on the loading of the page contents.

Still playing. I’ll worry about performance when I’m finished playing.

For your own playing: SVG is in page, PHP dynamic modification code, import into your CSS file using: @import “photographs.php”;

The only drawback to all of these changes is Internet Explorer. None of this is going to work with IE. None of what I’m doing, though, impacts on the page layout, or the text or even the generated CSS style settings. The IE users won’t get some of the effects, but they’ll get the weblog content. I’m not going to try and use Silverlight or VML or a plug-in to work around these issues, either. I figured if the Microsoft people don’t care that their users are missing out on the fun pieces of the web that’s Microsoft’s problem, not mine. That browser has killed too much of my fun over the years–enough is enough.

SVG Writing

Blog pulse

Summary:   beep…beep…svg…beep…beep…

I need to refocus on the book, but you’ll be seeing the tangible aspects of writing a book on web graphics throughout my web sites in the weeks to come. For instance, if you’re using an SVG capable browser, you might notice the ‘squiggle’ line across my header. That’s my ‘blog pulse’. It reflects my updated comment count for the last 80 posts. Of course, you know what this means: if my blog pulse straight lines flatlines, my weblog is dead. You hold the life of my blog in your hands.

Currently the ‘pulse’ isn’t viewable to IE or other non-SVG enabled browsers. The Adobe SVG Viewer won’t pick up the SVG, as I’m embedding the SVG directly into the page’s XHTML. That’s the whole reason I bit the bullet and converted to XHTML in the first place.

I could convert the example to using the Canvas object and Google’s ExplorerCanvas library, or perhaps use Sam’s SVG to Silverlight Workbench. Frankly, even though I have a lot of visitors using IE, as long as the information represented in the graphics is either available in other formats or non-essential, I may just blow off IE.


RDF to SVG tool

Found at Eclectic – an RDF to SVG tool. You’ve heard about RDF before in this weblog — consider it a meta-language for describing data on the web (and elsewhere). Though you can represent RDF in various forms, the most commonly used technique is XML. SVG is Scalable Vector Graphics and is a way of describing 2D graphics in XML.

Nice tool, though the batch job doesn’t terminate cleanly in W2K. However, it does the job. I was able to create this SVG diagram from one of my RDF documents in five minutes — from download to install to image capture to post.

The tool is based on Jena, an open source Java API that processes RDF and that HP sponsors. Unfortunately, RDF2SVG isn’t open source at this time. No biggie. Fun tool, and useful.