Bb's RealTech

Today's design is based on the Open Road SVG image that was just uploaded. This SVG image is ideal for a background, because it lends itself to morphing. It's also a horizontal image, which works better for a background image.

The image is adding into the page in such a way that it expands to fill the page, regardless of how small or large the browser window is. It is resolution independent. I use two SVG attributes to manage how the images show in my sites, both set on the SVG element, itself.

The first SVG attribute I set is viewBox. The viewBox attribute is a way of capturing a specific section of the SVG image, and using this captured section to fill a given viewport. For instance, if the image naturally sizes to 400 pixels wide, 200 pixels tall, setting a viewBox to 0 0 400 200 is equivalent to how the image would fill the viewport by default without a viewBox. If you use different settings, say 50 20 350 150, then you're modifying the viewport for the image, setting the beginning x at 50, beginning y at 20, the width at 350 and the height at 150. Since, by default, x increases from left to right, y increases from top to bottom, setting the beginning x and y clips the upper and leftmost edges of the image. If the width and height is less than what the image's true width and height is, this clips the bottom and rightmost section of the image. You can use any combination, including negative for min-x and min-y, but you can't use negative values for the width and height. If you use a negative value for the min-x and min-y, it's about the same as using a margin–it pushes the image over and down.

The viewBox I put on the Open Highway SVG is 50 50 600 400. I decided I didn't like the sun showing, so I set a smaller width, clipping the image on the right. I didn't like as much blue sky, and I liked having the road focused a little off-centered, to the right, so I set the min-y and min-x accordingly.

Now, if I used the SVG, as is, with my expanded background, what would happen is the browser engine would attempt to fill my space, but still maintain the image's original aspect ratio. The image would expand to fill the width at a 100%, but to preserve the aspect ratio, the height wouldn't be enough to fill the space. The image expands in both dimensions until one fills the space, and then stops expanding along the other dimension.

This can work sometimes, and sometimes it doesn't work. In this case, it doesn't work.

I use the second SVG attribute, preserveAspectRatio, set to a value of "none" to tell the browser engine not to preserve the aspect ratio. Then the image expands 100% along the width and height–stretching the image, true, but filling in the space. If you choose the right background, such as Open Road, which works rather well, it doesn't matter the perspective, it works. There are also other settings for peserveAspectRatio, but I'll play around with those another day, with another design.

The images were created using Firefox 3b3. Firefox 2.x has limited support for SVG at this time.

My two other images are not the same as the background, as I'm not demonstrating the resolution independent nature of SVG today. I used a coffee cup for the top image, and a little car for the bottom, both of which I think complement the "open road" scheme. Both have the viewBox set, otherwise the SVG images would not resize to fit the container. Instead, I'd be stuck with scrollbars (more on scrollbars later). The coffee cup viewBox creates a viewport big enough for the entire image. The car's height is clipped, so that the wheels line up directly on the bottom of the page.

Uploaded with plasq's Skitch!

I used the object element rather than inputing the SVG inline for today's theme, as I wanted to record another couple of bugs with WebKit and Opera.

Webkit stretches the image, but it doesn't draw the content over the SVG until I scroll down and back again. In addition, WebKit also adds a white background for the SVG, which is something we can't seem to control. This can really ruin a nice effect, such as the top coffee mug, and the bottom car.

Opera doesn't stretch it at all, and also persists in putting scrollbars on the objects. No matter what I do to try and control the object overflow, the scrollbars get added.

I've turned in bug reports for WebKit about the drawing problem and the white background. I've also noted problems with pages for Opera, but I'm going to make sure formal bugs are entered for the gradient problem with yesterday's design, and the object scrollbars and inaccurate resizing with yesterday's and today's design.

The work on the themes does demonstrate another important issue. Something like ACID2 and ACID3 are handy ways of seeing if key web technologies are supported, but they're not comprehensive. Firefox 3b3 scores less than Opera 9.5b and the WebKit nightly on ACID3, but it has better overall support for SVG; especially as integrated into a web page. If the browser makers focus too much on the Acid tests, they may miss the overall picture, which is ensuring that SVG works well in a web page. I have confidence, though, that my reported bugs will generate activity.

I won't keep this design for long–or at least, I won't use the object elements–because IE does not deal well with SVG loaded into an object elements that are supposed to be in the background, no matter what version of IE I use. The content is pushed down with IE7, and gone altogether with IE8. I'm getting this behavior even when using the Adobe SVG plug-in.

In the meantime, since Microsoft isn't welcoming bug reports from the general public related to IE8, my only recourse is to remove the Adobe plug-in. Once the Adobe SVG plug-in was de-installed, then the page opened just fine in IE. Well, it's in black and white, but legible.

updated

Bud didn't like the clouds.

*poof*

Clouds gone.

Uploaded with plasq's Skitch!

Though RealTech is a weblog, it's also the place where I do much of my experimentation with technology. It's the site I use to test out the plug-ins, graphics applications, and what not I'm eventually planning on using in the rest of my web sites. Normally you don't use a 'live' site to test changes, but I happen to think a live technology weblog is one of the better places to try something out. All those juicy testers.

However, one of the downsides to such effort is that the page may be challenging to access at times. Or a challenge to access at all times for IE7 and lower if it comes to that.

Another downside is that when I'm pushing one type of technology, my uses of other technologies may make it seem like the one I'm pushing is causing problems, when the reality is it could be any number of other tweaks and tricks.

As an example, I'm a big fan of SVG and XHTML. I serve my pages up as XHTML, and I use SVG inline. I write quite a bit on XHTML and SVG because I'm trying to encourage the use of both. If you access this page and it loads slowly, or seems to have other problems, you might think ithe problems are generated by my use of SVG, because it's the technology I write about the most. However, it could also just as likely be any of a number of other tweaks I'm currently trying out.

In my post Wordpress at the Top: Not, a couple of folks (Seth and Daniel) mentioned they had problems loading the page and scrolling and both thought it might be the inline SVG. It's true that in their client environments, the inline SVG could be causing the problems–especially with my use of gradients, which are quite CPU intensive.

However, a little experimentation of my own shows that problems with the scrolling could also be caused by two older technologies: the first being the use of the CSS fixed background, which no browser seems to handle efficiently; the second being the use of the JavaScript-collapsed posts.

I also use rather large images in the header, and load them as background for elements, which turns off image caching. The lack of caching and the larger image sizes, combined with the derived CSS could slow load times. However, my experiments for sampling images and deriving CSS elements rather depends on my use of the CSS background attributes for adding the images, rather than just loading them using IMG.

To determine whether it is the SVG causing problems, or my other tweaks, I've removed the fixed CSS positioning, for now, as well as the collapsed posts and optimized the images and slimmed down the code deriving the CSS. If you've noticed performance problems in the past, can you access the pages now and see if the problems you had have been eliminated?

In the meantime, in addition to the other changes I'm making to support XHTML (BTW, you'll notice that my XHTML validation of comments is too strict at this time, and will more or less give you invalid errors for any use of element attributes), I'm going to look more closely at my use of photo sampling, photo as CSS background, and what I can do to improve this type of functionality.

Then I'll probably corrupt all that hard work by experimenting around with something else new, and causing my site performance to tank. Again.

I really kick myself now for not including a mention of gnuplot in "Painting the Web". I had one chapter on graphics and data, and it would have been a nice fit. However, it does need a nice installation environment for the Mac, and that was one of the criteria for including mention of tools.

We're told that a Mac-specific installation of gnuplot is coming. When it does, I'll include a link in the graphics tools section of the book's supplementary site.

Another handy graphical tool is svgfig, which allows you to draw mathematical figures in SVG using Python. This tool should be very simple to install if you have Python installed. Using it, though, does require an understanding of math. Of course.

I would say that 2008 is the year of SVG in addition to the year of semantics. Works for me, though perhaps I should have called my book, "Painting the Semantic Web".

(Thanks to Michael Bernstein for mention of svgfig)