Absolutely!: Firefox

Showing posts with label Firefox. Show all posts

Tuesday, August 18, 2009

How to use SVGs in webpages.

In my previous post I lamented me woes of attempting to use SVGs within a web page. A commentor named Brad Neuberg offered some advice that got me going in the right direction and now I have everything working. I wanted to come back and address how I go I finally got this working.

The problem I was experiencing has to do with how Inkscape saves images as SVGs. The files can be easily modified so that they can be used in web pages to scale as desired.

For starters add the following code to your HTML where you want to place the image:

This will give you the clipping I had talked about before. This is actually the correct behavior based on the properties in the SVG. So we need to modify the SVG and tell it to behave. To do this open the SVG in your favorite text editor and find the width and height properties in the SVG tag.

We need to add viewbox and modify the width and height as follows:

Our first two entries in the viewbox will always be zeros followed by the width and height that is already defined. Next we replace the width and height with 100%. Once we save this file then it should show up in the webpage with the width and height defined in the HTML without any clipping.

In the HTML in between the open and closing tags for object we define an img tag that points to a backup PNG image. You can replace this with whatever you want IE to show. If you happen to have the image in a VML format then you could include it there, or you could simply have a message telling your users to stop using the always behind Internet Explorer (not recommended) or whatever you want IE to show in place of your SVG.

You can find a paper on converting SVG to VML here. There is also a javascript library at http://code.google.com/p/svgweb that will show the SVG in a Flash window for IE users. I plan on looking into the svgweb javascript library and giving that a spin in the near future.

I hope this post finds its way into the hands of anyone else having the same frustrations I was having.

Monday, August 10, 2009

SVG with webpages

At work we are developing a web-based framework that uses an API that support PHP, .NET and Java for developing application within it. As a general rule almost all of application within the framework are written in PHP and uses Zend for an MVC model.

While working on developing my first application I decided to extend our images API to supports SVGs. SVG is a type of image that is built on vector graphics. Vector graphics use mathematical equations to drop simple shapes that on a macro-scale define a larger image. This is very much how 3D-graphics works. Polygons are mixed together to build players, houses, vehicles, and everything else within the 3D world. SVGs usually build 2D images. The advantage to them is that you can scale them to any size you want without losing resolution.

Traditionally if you need an image at different sizes you will make a different image for each size that you need from the source. The primary problem with this is that if you try to scale an image larger than the source you get pixelation. You also might not always have access to the source, and so you are stuck with the largest version you can find.

Take for example this 32X32 image.

You could easily scale this image down to a 16X16 image, but if you wanted to make it larger it would look really ugly.

This is what happens if I try to scale the image up to 150X150:

If you always have access to the source image this shouldn't be a problem, but I see regularly enough images that have been scaled up on web page and they look horrible.

With an SVG you only need the one file and you can then dynamically scale it as you please to as small or large as you want.

Another great advantage of SVGs is that the file is plain text file that holds the formulas that draw the image, so they tend to be relatively small.

The image I am using in this example is 18.2 KB. If I convert it to a 200X200 image it is 18.3KB. If I where to convert it to a larger image then the image would take up more space as a PNG than it does as an SVG. For small files, which are small enough to download almost instantaneously, this doesn't provide any benefit, but it allows developers to provide high-quality large images and use only a very small amount of bandwidth.

IE is the only major browser that does not provide support for SVGs. Firefox, Safari, Opera, Chrome and most other even lesser-known browsers all provide support for SVGs. My plan was to have a folder named SVG in our icon directory, and then have fall back PNGs files for IE.

All of my research on the web indicated that the following code would allow me to provide SVGs with PNG fallback for IE:
<object data="foo.svg" type="image/svg+xml" height="32px" width="32px">
<img src="foo.png" style="height: 32px; width: 32px">
</object>

No matter what I tried this didn't work. Instead of resizing the SVG to 32X32, it clipped the image instead.

Clipped image:

I Googled and searched around and came up dry until I happened upon a response on someone's blog a little over a year ago that said that Firefox was planning on supporting SVGs inside the img tag. I tried <img src="foo.svg" style="height: 32px; width: 32px"> and it worked, dynamically resizing and all, in all non-IE browsers except Firefox.

I then found another trick. SVGs are plain text files that use a standard known as XML. These XML files could be modified to be PHP files that output the XML that defines the SVG iamge, and that too could be placed inside the object tag. This unfortunately gave me the same clipping results.

My final conclusion is that the web is just not ready yet for SVGs until Firefox begins providing some sort of sane support for SVG that allows developers to define the width and height to render the SVG image. We really need Microsoft and Mozilla to get on board so that we can stop using JPGs, GIFs, and PNGs wherever possible.

Tuesday, June 17, 2008

Firefox3 out

You can get it at http://www.mozilla.com/en-US/firefox/?from=getfirefox once the site stops being hammered. Regardless of what browser or OS you are using, you should get this immediately.