Custom Browser URL bar icons

Long ago, I made a favicon.ico custom icon for the Milwaukee Without A Car website, but I don't remember how.... I think I created a .bmp image and simply renamed it...

So I found a new SVG of the same graphic, but I'm not using it - instead I'll stick with the old favicon until inkscape can export to .ico files.

Another example showing how SVGs and their tools have great promise, but aren't quite there yet.

More SVG Shortcomings

• SVGs, since they are embedded objects, link internally instead of from the parent body. This is the same annoyance I had with frames long ago. For example, a link inside an <object> will work, but only the tiny object box will show the new page. Workaround: Use the target="parent" or target="top" properties of the link tag.
• SVGs within a link (like a linked image) are not, in fact, linked. Move the cursor over them, and you see that you can't click on the SVG. This particularly sucks with a graphic menu header I tried. Workaround: Use an imagemap (ugh).
• SVGs can't be called by CSS on a mouseover event (graphic header again). No workaround.

So I'm back to .png and .gif and .jpg for most HTML images. As before, SVG original for easy changes, but export raster images. Well, that's what experiments are for.

Hey, this is my first 'fail' entry in over a month!

Advantages and shortcomings of SVG images

After a bit of experimenting with SVG graphics, I've reached the following conclusions:

• I can't figure out how to get SVG graphics to resize automatically in a browser based on an HTML tag. I know how to add an SVG using the <object> tag, but changing the <object> size doesn't scale the image, it crops instead.
• SVG tutorials ignore the subject, or discuss the <transform> and <preserveAspectRatio> tags, both of which are in the original XML, not the HTML.
• So, SVGs on a website need to be properly sized before the web browser gets them - one SVG can't be reused at different sizes. Resizing is trivial in Inkscape, but you still need two images for two sizes - that stinks.
• Basic SVG images are supported by all the common browsers.
• SVG images are very handy for line drawings like basic maps and diagrams.
• In print, SVG images saved as .odg OpenOffice Drawing images are very useful replacements for frequently used graphics in business cards, flyers, contracts, etc.
• SVGs are good for icons/logos since they scale well.

The upshot is that I'll keep file archives in SVG for future manipulation, resized SVGs for web use, and exported ODGs for print media.

Wishlist:

1. SVG can be scaled by HTML tags
2. OpenOffice imports SVG natively

Converting bitmap images to vector graphics

Our sign contractor for the store created some beautiful graphics - but the disk they gave us was all .jpg and bitmap .pdf and even a bitmap .ai file. Limited usefulness for reuse unless we can convert them to vector graphics - bitmaps are big and pixellated, vectors are small and infinitely scalable smoothly.

Used Inkscape. Turned out to be incredibly easy. Import the bitmap, then Path -> Trace Bitmap. Next, File -> Document Properties to crop the page area (so it doesn't save as one logo in the corner of an empty sheet of paper). Save the converted file.

Next problem: Inkscape saves as .svg, but OpenOffice can't open it. Easy to fix - instead of .svg, have Inkscape save as .odg, an OpenOffice drawing file. I love when things work out.

Monochrome and color laser prints of the converted graphics are great - no pixels, smooth and clean edges. Interesting: The bitmaps look better on screen, but the vector graphics are superior on paper.