heathenx wrote:
Ok, how about helping some noobs out (me) then. What is the best way to get started with SVG web graphics (svg and html). I think that I would like to make a mockup for myself to better understand things. I already know how to make a layout and add links. Do we simple just call in the svg file as an object (for the quick-n-dirty)?
heathenx
Hi heatenx!
I tried an SVG-only site at FAR, http://far.no/svg/web.svg , which is viewable and navigable in Firefox 2.x on all platforms - just click the menu items. I used only Inkscape and the built in XML editor to create the links. See an earlier post with the subject "Draw a web site using only Inkscape" from May 31 2007 by me and the following thread in the archives. In short, I want to find out if Inkscape can be used to draw scalable, XML based and thus programmable, colourful and attractive user interfaces, and the short answer is YES.
Unfortunately, there are several technical problems that needs to be addressed, and I haven't had the time to investigate which problems are between the chair and the keyboard, in Inkscape or in Firefox and other browsers. Here are the once I've found so far with some help from a friend:
1. Fonts to paths == none-text, thus not indexable or searchable in a browser, and well ... not fonts. I asked Opera's Håkon Wium Lie the following question over at "A list apart":
http://www.alistapart.com/comments/cssatten?page=5#46
"...the idea is to require the user to have ANY UTF-8 font available on their system and let CSS tell the brower's SVG-renderer to draw a font that looks like Times, Helvetica or whatever. If this is possible, the user only needs ONE font installed and browsers styles it into whatever the designer wants it to look like. If the browser has seen this styling before it could cache it to render faster the next time round. Is this a horrible idea?"
and his answer at
http://www.alistapart.com/comments/cssatten?page=7#62
"Interesting idea, but I think it takes styling one bridge too far. I doubt you will be able to generate, e.g., Larabies’s fonts from one normalized font and some styling info. Further, I think the systems’s font renderer should be used for rendering fonts; it tends to do a better job by, e.g., honoring hinting information in the font files."
I'm not able to judge the answer, but I know I don't like it, mostly because Inkscape is capable of beautiful SVG artwork that far surpasses the primitive hinting information in font files. In short, it doesn't make sense, although it can be technically correct at present. If it could be done, those nice fonts at my example site would render properly, and turning them into paths would not be necessary.
2. Paths as links. Enclosed paths needs bounding area to become useful links.
Given that fonts must be turned into paths to look like they ought to, you will notice that using the XML editor to link directly to the path gives the user only the path itself as a very thin clickable area. The enclosed area of the letter 'O' does not become clickable, only the circumference. If it is possible to create a bounding area as a CSS-style around a path and then make the path clickable, the presence of the styled bounding area could be a hint to browsers on how large the clickable area should be. Inkscape would then need some easy way to set such a bounding area.
I side-stepped the problem by placing transparent boxes above the paths, and then attaching the links to these boxes. I don't like this - the correct object should have the link or links attached to it, if not it will be very difficult for search engines to automatically traverse and semantically understand links, and the file becomes larger with more objects.
3. Honouring Z-order.
Try hovering your mouse above the News link at my SVG-site. You will notice that I wrote "transparent boxes above the paths", but something is wrong - the paths visible through the transparent box turns off the link. Thanks to André for this one! :-)
4. Text is not treated as text by Firefox, which means you cannot search and more seriously - you cannot select and copy (being mindful of copyright or copyleft).
This renders an SVG-only site pretty, but mostly useless in my opinion.
Comments and preferably fixes are welcome! :-)
Cheers, Haakon