BurningbirdAll about Scalar Vector Graphics (SVG)
Speaking of SVG, Lachlan Hardy pointed out the Raphaël JavaScript library to me, and I wanted to pass it along.
This library provides cross-browser dynamic vector graphics that generates VML for IE, and SVG for the rest of the world. Among the graphical elements you can create are paths, eclipses, rectangles, circles, and text, and be able to apply a number of transformations.
Included in the library web site is a playground where you can try the code out.
Recovered from the Wayback Machine.
For those iPhone users, bereft at loosing the I am Rich Ruby, no worries: I give you the I Am Dirt Poor Ruby, in SVG.
Now, after Safari/Webkit properly builds in support for the Gaussian blur filter in SVG, you can impress your friends and still pay rent!
(derived from ruby)
Chapter 7 in the book (Painting the Web) provides an introduction into some of the many useful elements in SVG. Included is a discussion of the two gradients, linearGradient and radialGradient. They can’t be used to create a visual element by themselves, but are, instead, used to fill any shape that takes the fill attribute. For instance, one of the book examples defines four radialGradients, which are then used to fill four different circles. The last two circles in the example demonstrate how the radialGradient can be used to provide spherical highlights, especially when using a monochromatic color scheme, as shown in the fourth circle.
The following is the radialGradient definition used to fill the fourth circle in the example:
<radialGradient id="gradient4" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
<stop stop-color="white" offset="0%" />
<stop stop-color="#666" offset="50%" />
<stop stop-color="black" offset="100%" />
</radialGradient>
The stop elements are used to define the colors for the gradient, in this case white from 0 to 50%, and then gray from 50% to 100% black. SVG user agents, like the browser you’re using (which, hopefully, supports SVG), derive the radialGradient from these stops in combination with the other radialGradient attributes. From the example given, these attributes are:
In the example, the focal point of the radial gradient is set to 30% along both x and y axis, which places it in the upper-left. If both were set to 50%, then the focal point would be in the exact center of the gradient.
An attribute that was not given explicitly in the previous examples was the spreadMethod, which provides instruction in how to fill the shape when the radialGradient is smaller than the containing element. The possible values are: pad, spread, and repeat, with pad being the default.
In the third example, three circles are filled with three different radialGradients. The cx and cy values are 30%, the fx and fy values are 20%, the length is 50%. All that differs between the circles is spreadMethod, which is, from left circle to right: reflect, repeat, and pad. The reflect value causes the gradient to repeat, from the outside in; the repeat value repeats the pattern literally, which can lead to rather abrupt transitions; the last option, pad, fills in the remaining area of the circle with the color given for the 100% stop.
When creating radialGradients, you’re not restricted to three stops or different saturations of the same color. The following SVG example has a radialGradient that uses 6 different stops, with six different colors, creating a nice neon light effect. The radialGradient is then used to fill a rectangle, rather than a circle.
Four issues with the radialGradient, all specific to browsers. I’ve found that the reflect spreadMethod can cause minor havoc with the Firefox 3.x browser in the Mac, pushing down the size of the area, without necessarily impacting on the visual rendering. This makes it a bit tricky to define a view port, or include the SVG using the object element. Opera 9.5b has some rendering delays when using gradients, and Safari/Webkit doesn’t respect the object’s transparent background. You’ll also need to use a SVG plug-in with Internet Explorer. I’ll have more on the issues of browser SVG support in a follow up writing, which I’ll link here when finished.
To see radialGradient in action, check out the following from Open Clip Art:
Dave Pena’s Sakura, which uses opacity and the radialGradient to create the soft hues and gradual coloration. This image was pulled from the downloadable archives.
A wonderful workstation by Kobo. Notice the hard “light streak” across the monitors? I discuss this use of a light streak to provide an impression of a hard, shiny plastic surface in the book.
A tasty cake from Jean Victor Balin.
Zipped files of all the book examples can be downloaded from the O’Reilly book support site.
I wanted to highlight a comment Bruce Rindahl made to an earlier post (with his permission):
http://www.lrcwe-data.com/DeepZoom.svg is a modification of a project I have been working on. I hacked together some code to mimic the animation effect of the Hard Rock site. First some credits.
The original work was funded by the State of Colorado and Division of Water Resources. Earlier work by the Urban Drainage and Flood Control District.Everything was based on work done by (and GPL’d) at www.carto.net.
The animation was done using SMIL attributes in the SVG standard. It requires the Adobe SVG plugin. It will run on say a Windows 2000 machine in IE6 using a 5-year old plugin […]. The imagery is over 60 GB (almost 2 orders of magnitude more than Hard Rock) served up via an Open standard WMS server (Mapserver) via a Python based cache program (TileCache). Vector data is displayed via SVG using an open source database (PostgreSQL/PostGIS). Without the animation it works in Opera, Safari, Firefox3, and IE with the plugin. The animation works in Opera but has a bug in it which makes it jump – I am tracking that down. Safari should handle it soon. The animation can be jumpy at times but part of that is the coordinate system I am using. The Adobe SVG plugin struggles with numbers that high. Everything is controlled via JavaScript.
Bottom line for me – meh. The animation is cute for a while but it is not worth the extra overhead. Keeping all the downloaded photos just so the user always sees an image is not worth the memory required. The default display is just like Google maps which most users are familiar with. I agree with Mr. Ellis that the development tools are not there to match what is available for Flash but then who would build them when Microsoft won’t support it?
Unlike my earlier silly little example, Bruce’s work is impressive, especially when you consider that most of the technology and specifications used in the effect have been out for years, and it works with Adobe’s now old SVG plug-in in IE6. His work isn’t based on one packaged framework, either, and pulls together previous GPL’d work, as well as several open source technologies into one, cohesive whole.
Bruce also makes an important point: why do the effect? It takes up bandwidth, requires extra work, and what does the functionality provide, other than a few useful implementations like Google Maps? If you want to know why something like JPEG 2000 hasn’t been implemented in most browsers, and only brokenly with Safari (because of a broken implementation in the Mac OS X), it’s because few people are asking for this functionality. In addition, as Bruce notes, why would people expend effort when we know the work won’t work with IE?
I see work like Bruce’s and others as a worthwhile effort, regardless of Microsoft’s unwillingness to meet its earlier commitment to standards. Adobe’s SVG plug-in is not the only SVG plug-in, as Examotion is actively working on an SVG plug-in, which should handle what Adobe does, and more.
More importantly, the more we use these technologies, the more tools created, leading to more sophisticated works, leading to better tools, and so on. We have to prime the pump before we can draw water.
As for whether the effect is useful is really in the eye of the beholder. For instance, I don’t see that the previously linked Hard Rock Cafe’s application to be useful, especially given how limited the access is to the application. However, I’d like to have the pieces that go into the effect, of which Bruce has demonstrated an open source equivalent. (About the only thing missing is JPEG 2000 for advanced image compression. )
By having the pieces in place, we’ll be ready when we do get ideas of how these effects can be combined into something useful, or innovative.
Bruce also supplied a link to a variation of the application that works with Firefox, Opera, and Safari.
The worst mistake I made in the recent discussions about open compared to proprietary technologies was to allow myself to be pulled in by sweeping statements such as, “the W3C has failed”. Not only be pulled in, but to get into some form of competition over which is the best: SVG/Ajax, Silverlight, or Flash.
The W3C has failed because Rich Internet Applications are the way of the future, or so goes the prescient among the pundits. Standards are dead, said others. Silverlight is the future. No, no, make that Flash. Silverlight! Flash! And on it goes, with poor SVG dragged along like the cousin who showed up at the dance without a date.
At the same time I waded into the battle of the—well, we really can’t call it vector graphics, as there is so much more involved— I also wrote about IE6 and the difficulty of ending the life of this seven-year-old browser. A seven-year-old browser that still dominates so much of the web. Person after person told me about this place or that with umpteen thousands of employees all using IE6. Someday, I’m told, we’ll signal the EOL of IE6, but not today. Not today.
These are two different views of the world, neither of which is compatible with the other. Either the world is ready to leave the W3C and other web standards organizations in the dust as we leap into the bright future where all the web is a box embedded in a single page with a big friggen cloud behind it, or we’re living on the edge just using transparent PNGs.
The Hard Rock Cafe website is fun, but it doesn’t work on my pre-Intel Mac, nor with Opera, and crashed my Safari on Windows XP and caused my not low-end laptop to spike at 80%…when idle. But it is pretty and is cool, and makes use of new JPEG compression techniques that are very cool, and we need pretty and cool, just to keep excited about all this stuff.
However, the world will still turn, every day and every night, to Google Maps, created with technologies in use today— standard and proprietary technologies, both—and now so much a part of our lives that we’ve forgotten when we considered it cool.
Years ago, one group of companies proposed one way of doing 2D vector graphics, and another proposed a different way and from the clash came SVG. However, Microsoft did its own thing, and implemented VML, and created what is probably the last battleground in the war of the browsers. I don’t know why Microsoft went with VML. I imagine one reason is that Microsoft was not willing, then and now, to commit to the necessity of XHTML. Either that or the company was being purblind, pig-headed stubborn. Either way, Microsoft went one way, everyone else went another, and now we’re left with no meeting ground between two positions. To say the situation is disappointing is to say that the Midwest got a touch wet this spring.
Maybe HTML5 will be the bridge that brings the sides together. I hope so, but that’s in the future and we have to think of the now. The now that celebrates the latest whizzy from Microsoft and Adobe, while having to continue to support IE6. The now that needs the standards, even when most of the people don’t realize how much they need them. And OK, the now that needs Silverlight, and Flash, and whatever else new comes along, because that’s what the web is, has been, and probably will always be.
I’ve always said we need more women in technology because I believe we women bring balance to technology. I like to think that we foster cooperation, rather than competition, but perhaps that’s my own bias, or even my own stereotype, shame on me. However, I didn’t bring any cooperation to this discussion. I was right in there with the boys: snorting, stomping, and digging my feet into the dirt, as I rolled up metaphorical sleeves and prepared to wade in with code. Of course, it was little bitty code, and all I managed to really do was look a little silly. Worse though, is I looked silly at the same time I was saying stuff that was anything but. I guess that makes me a real tech because I can be just as purblind, pig-headed stubborn as every other tech I’ve ever met. Stubborn and with code—that’s a dangerous combination.
I like SVG. I like SVG for itself. I like that you can add 2d graphics directly into a web page; that you can use JavaScript to manipulate the SVG after the page loads—not to mention the really fun declarative animations. I like that it is interactive. I like that it’s free, and that it’s open; that it belongs to all of us. Most importantly, I value that it’s built into the browser, not added via a plug-in, and I can depend on it being there. Well, mostly there. I have many more fun things I want to try with SVG (and the Canvas object and JavaScript and CSS)—even if it means I’ll be putting the results of my efforts on a four-legged stool with one leg missing.
I like SVG, but SVG is not Flash. SVG is not Silverlight. However, that doesn’t make SVG better or worse than Flash or Silverlight—it just makes SVG different. And that’s where my time should go: celebrating the difference, not trying to trip the other guy up, so I can kick dirt in his face when he’s on the ground.
Enough rambling, back to the book.
