SVG via CSS
Now that I have my weblog looking reasonably consistent between Gecko and WebKit based browsers, I’ve taken another look at Opera. Opera doesn’t have support for border-radius, but does have support for background images in SVG, which can be used to provide the same effect. My Nav Bar on my test site now employs this technique, and it requires two separate images: 039 on CCD and CCD on FFF.
More complex effects are also possible, with only slightly more work. I’ve applied some of those techniques here.
Frankly, my first reaction to this was mixed. No two ways about it: it requires more work and more page fetches to produce the same result as could be done in CSS. This might be slightly better if one could somehow embed the SVG in the CSS file itself, as many of the SVG files are engineered for a single purpose. This lead me to initially think that having CSS continue to capture the common cases, leaving comparatively advanced techniques like SVG for special purpose or complex effects was the right way to go.
But then I saw this (screenshot) and even (&deity; forbid) this (screenshot), and it occurs to me that SVG opens the door to unubtrusive special purpose and (when judiciously employed) not-so-complex effects. It would be fairly easy to give my Nav Bar a more clearly defined frame, a more tapered shape, and use filter effects to vary the color.
The pluses for SVG in CSS is that it doesn’t require either adjusting your markup or JavaScript to achieve these effects, a desirable characteristic that generally the other techniques don’t share. Nor does it require that your page be XHTML. And there are lots of good techniques for effectively caching static files. The only remaining issue is that this technique works best for backgrounds instead of borders, as backgrounds images (if present) are displayed on top of the background color, making the background color an effective fallback for browsers that don’t support SVG in CSS. Of course, the background can draw a border within the padding, but any CSS provided borders would still show up outside of the background.
Meanwhile, Robert O’Callahan has been exploring other ways to integrate these technologies.