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.
Yeah, I’ve been waiting for Mozilla to get their act together and implement background-image for SVG files before I enhance my own site with these types of effects. It honestly escapes me at the moment if Webkit supports this yet. The next design of my site will include more advanced stuff like that. One could fiddle with JS and force objects to behave like background-images for divs (playing with z-order, positioning and sizing). I’ve done some experimentation, but so far it my results haven’t been worth it - better to let it downgrade gracefully I guess.
My personal opinion is that Opera should support the CSS3 borders stuff though - SVG is overkill for simple rounded corners. Gradients ... I could be convinced that Dave Hyatt might be right about using CSS for simple gradients, but anything beyond that and SVG starts to sound like the better solution.
Posted by Jeff Schiller atAnd I’m not sure that I’d agree with the idea that the commentator’s name is semantically an ‘aside’ (i.e. only tangentially related to the comment). Then again, I also don’t agree that the comment as a whole should be considered an ‘article’, since comments are not an ‘independent part of a document’ - generally they are part of an overall conversation. Should we prepare for ‘Semantics Wars’ as HTML5 gets more traction? ;)
Posted by Jeff Schiller at
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.
Why not use data URI’s?
selector { background: url(data:image/svg ... ) }
Posted by Arve atData URIs could be useful, but in general I’d prefer something that is amenable to view-source. Here’s the first SVG mentioned above using URI encoding:
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E
And the more compact version using base64:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IGZpbGw9IiNDQ0QiICB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+CiAgPHJlY3QgZmlsbD0iIzAzOSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjFlbSIvPgo8L3N2Zz4KCg==
Either way, on the server side, I could create a data URI encoder helper, enabling the source that I view and edit to be in its original form.
Posted by Sam Ruby atLooks like border-image is supported by WebKit, and is coming to Gecko. I’ve yet to find any confirmation that either has plans to support SVG in css url()'s.
Posted by Sam Ruby at
How do you get those Data URI’s to work with svg? After some tests, I reached the conclusion that they are not supported in Firefox, at least.
Since background: url(mygraphics.svg); doesn’t work, I don’t see why it would with data URI’s..
Using data URIs with SVG as background images would only work on browsers that support both functions. The browsers that I know of today that support SVG as background images also support data URIs. I expect that situation to remain true as (and if?) more browsers support SVG as background images.
Posted by Sam Ruby at
"I’ve yet to find any confirmation that either has plans to support SVG in css url()'s."
http://docs.info.apple.com/article.html?artnum=307467
Posted by Chris Bentley at
SVG borders (instead of CSS)
submitted by tgbyhn [link] [5 comments]...Excerpt from web_design: what's new online at