{"id":110,"date":"2005-06-23T21:23:22","date_gmt":"2005-06-24T03:23:22","guid":{"rendered":"\/?p=110"},"modified":"2005-06-23T21:23:22","modified_gmt":"2005-06-24T03:23:22","slug":"rounded-corners-the-last-word","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2005\/06\/23\/rounded-corners-the-last-word\/","title":{"rendered":"Rounded Corners – The Last Word"},"content":{"rendered":"

The IEBlog<\/a> posted an item today telling web developers that rounded corners would not be implemented in the upcoming Internet Explorer 7 and then linked to a 3-month-old article that would teach us all how to do rounded corners in IE 5\/6 today. Um, what? Did I miss something? Is it still 2002?<\/p>\n

<\/object><\/div>\n

The article then postulates that \"Perhaps you're tired of waiting for the W3C to release the CSS3 Recommendations, which will include specifications for rounded corners...\". Pretty snarky of Microsoft considering IE6's support of standards like CSS and XHTML.<\/p>\n

It then goes on to say: \"The goal here is to give you a simple start towards building the next generation look-and-feel of the Web by using today's available standards\". The problems with this statement are two-fold: 1) The techniques they describe are at least a couple years old (one even older...a table-based solution) so how can they call this \"next generation look-and-feel\"? and 2) They neglect to mention perhaps the simplest solution of all which involves an already available standard<\/em>: Scalable Vector Graphics<\/a> which truly is \"next-generation\" and has the potential to give the web a facelift.<\/p>\n

So the real<\/em> problem is actually Internet Explorer's support<\/em> of existing standards, if I may be so bold<\/span>.<\/p>\n

This guy<\/a> turned me on to this idea when I was first learning and reading about SVG. The simple idea is that you can use a SVG anywhere on a web page that you can use an image (as mentioned here<\/a> in the SVG 1.1 spec). This includes the <img> tag and (drum-roll please) CSS background-image.<\/p>\n

So in the ideal SVG world, I could have:<\/p>\n

corner.svg:<\/p>\n

\n<?xml version=\"1.0\" ?>
\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"
\n  width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\" version=\"1.1\">
\n  <rect fill=\"white\" stroke=\"none\" x=\"0\" y=\"0\"
\n    width=\"100\" height=\"100\" rx=\"10\" ry=\"10\"\/>
\n<\/svg>\n<\/div>\n

and then in my web page:<\/p>\n

\n<html><head>
\n<style type=\"text\/css\">
\nbody { background-color: black; }
\n.div_roundedcorners {
\n  background-image: url(\"corner.svg\");
\n  color: blue;
\n}
\n<\/style><\/head>
\n<body>
\n  <div class=\"div_roundedcorners\">
\n  This is a div that will have rounded corners thanks to the
\n  SVG image used as a background (of course it scales to the
\n  size of the div too).
\n  <\/div>
\n<\/body>
\n<\/html>\n<\/div>\n

This would produce a black web page with a white rounded rectangle in which the blue HTML text appears.<\/p>\n

Unfortunately, both the Opera and the Firefox 1.1 versions of SVG native rendering do not support this potentially very useful feature.<\/strong> There are two Mozilla bugs open to address this (here<\/a> and here<\/a>) and I've harassed the guys over in the Opera forums a couple times now (here<\/a> and here<\/a>). Anybody who reads this blog entry and has an interest in seeing SVG succeed should do their part to vote for these fixes. If we can get two or more major browsers behind this, that would be a tremendous boon.<\/p>\n

See, the thing that I'm worried about is that the SVG spec is so huge that developers will focus on the \"flash-killer\"<\/span> aspects of SVG or the ultra-cool integration that SVG can have with XHTML. As a consequence, browser developers are neglecting some of the more practical and simple solutions that SVG can provide today (like scaled\/animated backgrounds on a plain old HTML web page). This<\/em> is where the in-roads into web development must first be made if SVG is to become a major player in the web development scene. You can't remake the web overnight. People are going to be writing HTML (not<\/em> XHTML) for a long time to come thanks to Internet Explorer. That's why my first SVG tutorial<\/a> starts out with an example of some very basic SVG that only scrapes the surface of what this technology can accomplish. Focus on practical and simple uses and incrementally build on that once it is established.<\/p>\n

Anyway, some flashy (albeit not very useful) ideas for SVG backgrounds on HTML web pages:<\/p>\n