I’ve been fiddling with my site design some more recently, and decided that I wanted a vertical banner on the left-hand side to advertise IND-Web.com’s Free Blogs and Hosting services. I figures that I’d only be able to manage this with an image, and set about creating said image in a drawing application. I then found that the image I had created didn’t scale nicely nor did it fit on pages of arbitrary height without leaving a big gap of non-clickable background colour or, worse, distorting the image so that the text was illegible.
The solution I found is to use SVG. And, a big bonus for me, I found that images of this type are defined with XML text and not binary gibberish. As it’s XML I can program my graphics instead of designing them. And, I can also add arbitrary javascript code that can alter the image on-the-fly just like xHTML only with graphical dohickies and effects such as arbitrary rotations.
Text in SVG is written very similar to xHTML, just with a different <tag> name (being “text”). A big advantage of this way of defining text is that I don’t need to do anything special to change what the advert says as I can just open the .svg file in my favourite text editor and replace the content of the <text> tag.
In the future, the W3C have said that SVG should be able to be embedded directly within an xhtml document. This will mean that javascript will be able to alter both xHTML elements and SVG elements without any fancy wrappings.
So far I’ve only scraped the surface of what’s available in the SVG format, but I’m eager to see what else I can do with it.
Hi there! It’s still in alpha but it would be cool to see if the open source SVG Web library I’m developing with others can help you: http://code.google.com/p/svgweb
thankyou for the link, Brad, I’ve uploaded your project’s files and have set it to be used sitewide. Theres an issue with the flash viewer (used in IE), which I’ve emailed the Google Groups list about.
Hi,
If you want to serve your pages to Firefox, Safari, Opera, Chrome as XHTML (with MIME type application/xhtml+xml) then you can embed your SVG inline with your HTML markup. I do this on my blog for the authors names of my comments (see any entry that has comments to see the rotated text).
The nice thing about this technique is that it actually falls back semi-gracefully to HTML text for Internet Explorer.
thankyou for the heads up, Jeff, I’ve since put a call in my wordpress theme to output the correct MIME type. I’ve also, using your blog as inspiration, inplemented standy-upy-text in the commentator list – i.e. my name will be vertical to the left of this comment. Also, I’ve started getting the theme to output proper html5 to all browsers except IE.
That means I’m using proper tags for more meaningful semantics. When the visitor is using IE, however, I’ve got the theme to output all those elements as objects so that nesting is maintained in IE’s DOM.Even IE8 doesn’t support HTML5-based tag names, so it would see an unknown tag and mark it as closed because it decided that it can’t have any content, thus breaking the nesting that HTML and XML keep at their core.As I said in my prior comment to Brad I am now utilising his SVGWeb, which will take embedded SVG tags along with object tags referencing SVG documents and allow most browsers to display the image even if they don’t have SVG support, such as IE. this is achieved by using native support where available (firefox, opera, et al) and replacing the svg stuff with an Adobe Flash file which displays the SVG content instead of the browser doing it itself when the browser doesn’t have native support available.
following myself up, I’ve started forcing people to use chrome frame if they insist on using IE. Read more at my article on Chrome Frame
Pingback: Honeymonster's Lair