Skip navigation.

Fyrdility

A blog about Web Development, Web Standards, Opera, and Related Pleasantries

Posts tagged with "multiple browser support"

SVG Image and Background Image Replacer

Thursday, 29. November 2007, 12:11:32

, , , ...

It's here! A working version of the SVG image replacement 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.


For comments, please post at SVG Image and Background Image Replacer on the new Fyrdility blog

Web Standards, the real Flash killer

Friday, 16. November 2007, 16:58:33

, , , ...

There's changes in the wind in the world of visual web technologies, and they show a beautiful future for what might soon (and to some degree now) be possible with the use of web standards.

Specifically, I'm talking about web alternatives to that ever popular Adobe Flash plug-in. Note that I won't be talking about Microsoft's Silverlight here, since it has many of the same shortcomings as Flash does.

There seem to be three major ways Flash is being used today: For online videos, as a web page interface, and for web-based games. Upcoming standards being developed and implemented for each of these uses.

Video


The HTML 5 specification includes an actual <video> element, that can run a video much like the element displays an image. Javascript can be used for the user to set any the actions (stop, pause, play, etc.). What's more, videos can also be referenced to in SVG, allowing nifty effects like Reflection and filtering. There are experimental builds of Opera, Firefox, and now Safari that all support this feature to some degree.

Interface


Flash allows for all sorts of tricks to make cool looking (albeit often irritating and unnecessary) web page interfaces, occasionally bypassing HTML altogether. Some of these effects can already be somewhat reproduced using CSS and javascript in today's current browsers, as for example is shown in this jQuery UI demo. More complex effects are also possible using SVG and/or the HTML 5 <canvas> element, both of which are seeing increasing support in the same three browsers.

Additionally, Safari is experimenting with effects that just use CSS properties. These allow for animation, and transformation (allowing things like scaling, rotating and skewing). Think about it, combined these would allow you to specify any HTML element and have it do all sorts of crazy things, without a single line of javascript. Somebody was quick to mention how the Cover Flow effect might even be possible this way.

Games


Primarily Canvas/SVG should eventually be able to handle anything Flash games already do, and possibly more with the recent introduction of 3D Canvas. This could possibly appear in Firefox 3, and is also available (apparently in a different form) in the previously mentioned experimental build by Opera. An example game is this amazing 3D version of Snake.

Some might ask "but...why? Flash already does so much of this! Why reinvent the wheel?".

Well, there's several reasons. Flash is a proprietary and not part of any W3 standard, which prevents a lot of things like easy and free ways for developers to create SWF files. It also causes many accessibility problems, because Flash files are just single binary files, unreadable (mostly) to anything but Adobe's Flash player. Several other problems exist too.

All these issues are addressed in the various methods mentioned above. And that's great news for the future of the web. The fact that we're seeing all these cross-browser implementations already bodes very well for the future. Of course, it's yet to be seen how much and how fast Microsoft will incorporate these features in Internet Explorer. I'm pretty optimistic, however, that they will find it in their best interest to keep up with these technologies eventually.

Web standards have done a lot for the web so far, and it's great to get a glimpse of how far they can take us into the future.

For comments, please post at Web Standards, the real Flash killer on the new Fyrdility blog

CSS/SVG Rounded corners for multiple browsers

Monday, 10. September 2007, 17:04:07

, ,

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.

For comments, please post at CSS/SVG Rounded corners for multiple browsers on the new Fyrdility blog