Fyrdility

No, I'm not dead. Just very busy with work at work and with baby at home. Okay, and I've been wasting time on facebook.

More bloggage may continue at some point, though.

I am happy to announce the release of my second Opera widget: eduMap!

This 100% SVG-based widget lets you learn the location of countries, states and capitals around the world. It currently doesn't work in Opera 9.5 for some reason (weird, since that's where I tested it on most!), but I hope to resolve that shortly.

Inspiration for this widget came from the excellent website purposegames.com, which has the same basic premise. However, all its games are Flash, and I wanted to make an SVG version. Also, I wanted to add more modes and options to the games (for example, where the country is highlighted and you select its name from a list).

Basic knowledge of the location of other countries seems to be sadly lacking in the United States, and I believe this may be a small, but great way to help change that. As an added bonus, it might help inspire other developers to use SVG over Flash.

Feel free to leave any feedback and bug reports on the widget's page, and stay tuned for updates.

Enjoy!

I became a (very proud) father last week of a beautiful baby boy, which is why I've been rather quiet here lately. Also, while that happened, I was rewarded an Opera goody bag for my Arkanoid widget. Thank you Opera!

More bloggage to come eventually, but don't know yet as to when.

As a result of Opera's antitrust complaint against Microsoft, I started thinking about how Microsoft might allow a selection of web browsers for Windows.
Then, I made this mockup image:



Note the following problems with this scenario:

1. Internet Explorer will be mostly recognized by people, and is bound to be highlighted some way or another (mainly by being the only one supported by MS)


2. Who decides which browsers make the cut to this list? Just about anyone can make a Gecko based browser or an Internet Explorer shell


3. Do, in fact, Internet Explorer shells like Maxthon and Avant Browser make the list? They use IE's engine (trident), and thus suffer many of the same shortcomings


4. Which browser(s) get to be installed for mass installations?


5. Should browser makers be allowed to add a short blurb about their browser?

If Microsoft were forced to comply with a ruling requiring this, it would be interesting to see how these issues are dealt with.

It's here! A working version of the SVG image replacement script.

• Demo page
  
• The script
  

Purpose

This script substitutes specified images and background images with SVG images for web browsers that support them. This makes it perfect for anyone who would like to start using SVG for their site design, but wants to make sure it will look okay for browsers that do not yet support it.

Features

• Future-proof - Checks for actual support, no browser sniffing
  
• Unobtrusive - Only affects browsers with support, uses fallback content without support or if javascript is disabled
  
• Simple to use - Just include one javascript file to your pages and use the appropriate image names
  
• Small file - Only 1.8 KB!
  

Usage

1. Make sure you have matching SVG and fallback images.
   
2. Rename your fallback images in this format: "filename.svg.jpg" for "filename.svg". Note that any image type can be used as alternative (jpg, png, gif, etc).
   
3. Make sure your file names are correct in you HTML and CSS files
   
4. Add the script inside your HEAD element like this:
   <script type="text/javascript" src="svgreplace2.js"></script>
   and of course upload the script to your server.
   
5. If you already have a script with an onload event, you can remove that line in the script, then just call SvgReplace(); where it needs to load. Note that the script will also work when the DOM is loaded, so it should work fine (actually better, since the images will be replaced faster) if you if you want to call it then.
   

How it works

First, the script checks if the browser recognizes SVG files as images. It does this by loading a small data URI SVG file, then checks if it loads properly and if it returns it's width. When true, it looks through all CSS rules, and replaces image background names that contain '.svg'. Then it does the same for all images that appear in the HTML.

Browsers tested

To make sure the script will work for future browsers, the script was rewritten to check support for PNG files. The following browsers were able to check for this support and replace the images successfully. When tested for SVG image support, all displayed the fallback images as expected.

• Opera 9.2
  
• Firefox 2
  
• Safari 1.2
  
• Safari 3
  
• Internet Explorer 6
  
• Internet Explorer 7
  

Opera 9.5 beta 1 and two different developer snapshot builds were used to test the SVG support, which also works as expected. This leaves the following browsers that should successfully replace specified images with their SVG counterparts:

• Opera 9.5 alpha / beta 1
  
• Wii Internet Channel
  

As for support by other browsers...

Webkit (Safari) apparently supported SVG as images in its nightly builds for a while, but the feature was disabled for stability reasons. Hopefully they'll manage to stabilize it soon, in which case it should appear in an upcoming release of Safari in the near future. See bug report

Gecko (Firefox) has the feature reported as a bug, both for images as well as CSS backgrounds. Unfortunately, no priority or target milestone has been set for either, though quite a few people have voted for them. So it might be while before we see any support there.

Internet Explorer does not support SVG natively at all right now, and the only thing we know for future support comes from this comment by IE Platform Architect Chris Wilson: "I think SVG is gaining momentum as part of the interoperable web standards platform, and as such I expect we will add support for it in the future". Who knows, maybe they'll support SVG as images when they get to it?

Notes

• While other browsers do support SVG files using the "embed" or "object" elements, this script currently only checks for support as "img" elements and CSS background images.
  
• Theoretically a future browser might support SVG as images, but not as CSS backgrounds, or vice-versa. I've been unable to find a way to differentiate these different supports, so the script will just assume support for both if support for "img" elements is found.
  
• As mentioned, a data URI file is used to check support. This was done to eliminate the need for an additional file. All modern browser support data URIs, except for Internet Explorer. Then again, all modern browsers support SVG to some degree, while IE does not. Hopefully by the time IE supports SVG and SVG as images/css backgrounds, it will also support data URIs. If you don't expect this to be the case, you can play it safe by using an external SVG file instead. Just change the "testImg" value to the location of a small SVG file.
  
• Opera 9.5 appears to have a strange bug where it occasionally gets unhappy when you try to use the same SVG image as both a CSS background as well as a regular image. Doing so using this script may make Opera use the fallback image, or worse, hide the background entirely.
  

UPDATE: I've managed to create a working version! See here.

I've written this excellent script that will replace specified background images with an SVG image, whenever support for this is detected. It will go through all CSS rules looking for "filename.svg.jpg" and replace it with "filename.svg". This should be ideal for anyone who would prefer to use SVG backgrounds whenever possible.

There's one problem: It doesn't work in the one browser that supports SVG background images!

Since the script does work when detecting support for/replacing, say, PNG files, I can only assume this is an issue in Opera. I have thus reported this issue in the forums.

Hopefully this will be fixed before Opera 9.5 goes final, if not, it's back to the drawing board to write a script that's more forgiving!

Recently I've been playing around with the Nintendo DS web browser. One of my discoveries was that it automatically resizes any image beyond a certain width (768px), height (768px), or dimension (307200 sq. px).

To show the actual image sizes this allows, I've created this handy SVG file. Easy numbers to remember are displayed, though anything that does not extend the curved line at the bottom right will work too. Additionally, this page shows all numerical options.

How is this useful? Well, the resizing isn't too big a deal for most photographs, but if you have larger images with text on them (comics for example), they will look pretty ugly and become hard if not impossible to read. So if you care at all about your DS browsing public, you can use this information to keep your images within these limits.

Here's a demo of a div with a simple 10px radius 1px border that works in Opera 9.5, Firefox 2+ and Safari 3 beta. It uses -moz-border-radius for Firefox, -webkit-border-radius for Safari and an SVG background for Opera 9.5. The SVG file this time is actually a modified version of a new method Holger Will came up with.

Of course, it doesn't work quite that easily. The CSS3 corner method uses a border, but for Opera we don't want that border to appear because it already exists in the SVG file. Additionally, we'll have to change the position and padding slightly so the border appears in the exact same place.

One way to solve the problem would be javascript browser-sniffing, but that's an "evil" solution, and I'd like to avoid using javascript if at all possible. Instead, I used O9.5's :nth-child() pseudo-selector with a value of 1n to target every instance. Other browsers (except Konqueror) don't support this (yet), so until they do, this method should work.

So obviously this is just a temporary solution until either Opera supports rounded corners, other browsers support SVG backgrounds, or other browsers support the selectors that Opera does (which would break my "hack").

Oh, and to allow support in IE, I'd recommend a javascript trick (there are several out there) inside a conditional comment tag. It may also be possible to use VML to achieve a similar effect as the SVG background, but I'm not sure.

One of the geekier things that excite me (okay, I guess there's a lot of those) are upcoming features in web browsers. Specifically when it comes to new and improved support for things like CSS3, Javascript and SVG.

The recently released Opera 9.5 alpha is known for it's improved CSS support, but what excited me most was the ability to use an SVG file as a background image. Why is this great? It allows for all sorts of neat things. Small file scaling gradients, multiple raster images, even animation!

Sure, no other browser supports this yet, but I'm not going to let that ruin my fun in designing for the future. Besides, one could always use javascript to fix stuff for other browsers if really necessary.

So, even before Kestel was released I tried my hand at a multiple image SVG background. CSS3 allows multiple images to be specified as background, but so far only Safari supports that. I'd noticed an example of this a while back, and since this seemed very useful to me, I based my example on it as accurately as I could.

• My demo (currently only somewhat works in Opera 9.5 or Wii browser)
• How it should appear
• The standalone SVG file (works in most SVG viewers, including Opera 9.2)

The first 9.5 alpha ALMOST displays it correctly...unfortunately it displays a black box for the top and bottom "border". This strikes me as odd since it works fine as standalone file, but I'm sure it will be fixed eventually.

Since I made this, Opera's Chief Web Opener David Storey made some excellent demos showing other new options, including SVG rounded corners. Rounded corners, too, are a CSS3 property, which work in Firefox (for example). Opera currently lacks support for this web 2.0-riffic display trick, so it's cool to now have a way to emulate them without a need for Javascript or nested DIVs.

David's example shows an easy to make single color background with rounded corners. However, what if you only wanted to have the border? The obvious answer would be to add a "stroke" to the SVG rectangle. Unfortunately, the stroke sits right on top of the edge of the rectangle, and so parts will be clipped off when putting it in a box. You might be able to get away with a 1-pixel border, but beyond that is just not acceptable.

Lacking the ability to display the stroke on the inside of the box, one would have to give the inner box a certain margin from the outer box. Ideally using an absolute value like 5px, rather than a percentage. For my multiple background image I kind of dealt with this when needing to position the right and bottom border. With HTML one would use CSS to do "position:fixed" and "right:5px". Alas, this won't work in SVG, where you can only specify a top and left position.

So, what I did was give it an "x" value of 100%, and then use the transform="translate()" attribute to move it back to the left using a pixel value. Ta da, an image stuck to the right border. This, however, was using multiple images, not one great big rectangle.

Eventually, however, I found the solution using USE elements, clipping areas, and four different rectangles. Crazy? Yes. But it works quite well, allowing different radii for each corner, any given margin, any color and any stroke width.

Here is the result, which I'm quite proud of:
The standalone SVG file

I hope to add more examples later, including using the image as background, and some documentation on modifying the file.

I wouldn't be at all surprised if someone comes up with a more efficient way of doing this, if you do, please let me know!