Pike's SVG Web Page Example

There's a fair amount of hype surrounding SVG. One of the much hyped points about SVG is that it's going to replace HTML any day now. So, I put together the example of a possible SVG webpage design above. It works but is seriously limited in what it can do because of the lack of UI widgets in SVG.

On top of that, bugs in Adobe's SVG viewer added to the problems I had in making it a working example. I wanted the "pages" to be in separate files so a (hypothetical) search engine could index it but Adobe's plugin has problems loading SVG images in SVG images.

The final version uses embedded svg documents instead of using separate files.

HTML is only one of many hypertext systems. It uses a box based layout engine to show images and text. The advantage of layout with SVG is clear with one look at the sweeping curves on this page. So, SVG has that in its favor. But, here are 5 reasons why SVG won't conquer HTML:

1. No major search engine indexes SVG files.
2. It's impossible to link to content in a SVG document. You can only link to the document.
3. Poor developer support. It's been 4 years and not even the most advanced SVG viewer is complete or bug free.
4. There's no word wrap in SVG. Like someone is going to hand code their own word wrap on a 10,000 word essay.
5. No UI widget set.

Could you create a website using SVG? Yes. Don't hold your breath waiting for SVG to replace HTML until the above problems are fixed.

SVG is a more than capable vector graphics format but improvements to the standard and to supporting technologies like search engines are needed to replace HTML. The necessary improvements would be:

1. Word wrap. Including wrapping around shapes.
2. Standard UI widgets and HTML-like form support.
3. Add ability to treat embedded SVG documents as "frames"
   • These "frames" will be dynamically loaded from separate files (like images).
   • They will share the same DOM as the parent document
   • Each "frame" will have a default document that is shown.
   • An easy to use URL syntax like anchors in HTML will allow an URL entered in a browser to open a SVG document and load the desired frame and jump to a text position or point. For example: http://apike.ca/example.svg#(mainFrame=other.svg#anchor&otherFrame=fb.svg)

The point of the ability to dynamically load and unload "frames" through a link is to allow search engines to easily make sense of a SVG document and offer relevant links to content in the document. Without search engine support no established site will use SVG over HTML.