Ian's TechBlog: html

Showing posts with label html. Show all posts

Friday, June 6, 2008

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!

Thursday, June 5, 2008

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:

SVG can be scaled by HTML tags
OpenOffice imports SVG natively

Saturday, May 31, 2008

Replacing deprecated HTML tags

HTML has changed since I learned it. For example, <style> tags weren't useful, and CSS was just starting out.

Ew, I'm old.

So I used to write an image tag as <img src="General_Lew_Wallace.jpg" width="108" height="144" align="left" border="1">.

But, an alt text is now required, and the border has been deprecated. So after some poking around with CSS, I came up with:

<img src="General_Lew_Wallace.jpg" alt="General Lew Wallace of the U.S. Civil War. I don't look like him." width="108" height="144" align="left" style="border-style: ridge; margin-right: 10px">

It does look better. Thanks to the tutorials at www.w3schools.com

Monday, May 19, 2008

Adding RSS Icon to the browser URL bar

Found out how to add an RSS icon to the URL bar:
Add the following to the <head> section of the page:

<link rel="alternate" type="application/rss+xml" title="Your News Feed" href="http://somewhere.com/news.xml">