SVG can't be part of the web

Microsoft's announcement that IE9 will be supporting SVG brought rejoice to many web standards aficionados. SVG 1.1 was finalised in January 2003 but Internet Explorer's previous lack of support meant that it has never really taken off on the web, despite years of patient enhancement by open source advocates.

But although I'm also an open source and web standards advocate, I still don't think SVG can ever be part of the web, because it just doesn't fit. We need a better solution.

Consider the following points:

• SVG has a totally different coordinate system to HTML - you can translate SVG coordinates but not HTML ones, and vice versa. So SVG and HTML won't sit well in the same document
• SVG has a totally different layout model to HTML. It's incompatible with CSS floats, which are fundamental to laying out HTML web pages.
• SVG has a totally different version of CSS which overlaps at best with HTML. For example, it has a "fill" property (rather than "background-color"), and it can't be positioned using CSS.
• SVG introduces duplicates of many HTML features - most notably, the hyperlink!
• SVG has a different DOM to HTML.

If you only want a vector format for image files, SVG is ok (though HTML Canvas can do everything SVG can). But if you want to use SVG to layout and style web pages, it's a terrible kludge.

I believe there's a better way. Going through the SVG table of contents:

Coordinate systems, Transformations and Units

Already covered by CSS3 Units and CSS Transformations

Paths

Not possible in HTML

Basic Shapes

Rect, Oblong and Circle are possible in HTML using CSS border radius. Polylines and Polygons are not.

Text

HTML already does text better than SVG

Painting: Filling, Stroking and Marker Symbols

Filling and Stroking are possible in HTML using CSS background-color and color. Marker symbols are not.

Color

Already covered by CSS color

Gradients and Patterns

Covered by CSS3 gradients and CSS3 backgrounds

Clipping, Masking and Compositing

HTML allows clipping and opacity, but not masking or compositing.

Filter effects

Not possible using HTML

Animation

Covered by CSS3 transitions and CSS3 animations

Fonts

Covered by WOFF

So, much of what SVG does is actually already possible using advanced CSS and HTML. So why not just extend CSS a bit more and you'd get all the power of SVG inside HTML, but without needing a whole new markup language? What's more, you'd then be able to apply all these techniques to existing HTML elements, not just SVG ones.

For example, imagine a set of CSS properties which allowed you to modify the shape of any HTML element - not just rectangles, but any shape you could think of. That would be better than introducing new SVG markup for shapes, because you could modify existing HTML semantic elements such as headings.

That's why supporters of the open web should not put their hopes into SVG. To be frank, it doesn't do what you want it to do. A much better approach would be to continue to extend CSS so that it doesn't take new markup to achieve better presentational effects.