[CREATE] a question to the SVG experts out there - some answers.

[Yuval Levy]

Hi all,

almost two months ago I asked for advice from the SVG experts out here 
regarding the use of SVG graphics as background to a website.

Thanks to all who wrote back with helpful advice, particularly to the 
contributors to this snippet:

Doug Schepers wrote:
> Andre "Osku" Schmidt wrote (on 10/27/09 9:10 AM):
>> and in practice, it seems only this works (ATM), and only in firefox
>>
>> html:
>> <object type="image/svg+xml" data="bg.svg"
>> 	width="100%" height="100%"></object>
>>
>> css:
>> object {
>> 	position:absolute;
>> 	top:0;
>> 	left:0;
>> 	z-index:-1;
>> }
>>
>> but the object wont scale beyond visible view.
>> (eg. when the html content makes the browser to have scrollbars)
>>
>> http://osku.de/svg/bg-test1.html
> 
> That's a clever workaround, but I'm not sure I'd call that a 
> "background", in the CSS sense.  Obviously, if it works for your use 
> case, then go with it. :)


After trying svgweb [1] (did not work / scale the graphic as intended) I 
ended up with a solution that works on my Firefox/Ubuntu and should also 
work in Opera, Safari, and Chrome (I don't have access / did not test). 
I also added graceful degradation for legacy browsers, and even for 
non-JavaScript browsers / search engines.

I redesigned the enblend-enfuse website. My aim was to keep 
DNA-resemblance with the parent [2] while giving it a face-lift, 
updating the underlying technology, keeping it simple / maintainable.

Because of the lacking support for SVG by the major player on the 
browser market I limited the usage of SVG to the background only. 
Initially I considered / wanted to use SVG for layout and content as 
well, but this would have effectively required maintaining two versions 
of the site. Maybe a few years down the road somebody in my same 
situation will find a better / more welcoming and standards abiding 
world. SVG rocks. Browsers that in 2010 do not support the SVG standard 
suck, and the people that are responsible for the decision not to 
support SVG in those browser suck even more.

The current status is online for beta-testing at [3]. There is still an 
issue with how I used xpath to transform the documentation 
(automatically generated from source), resulting in some gibberish 
instead of html entitites such as &nbsp; - if somebody knows how to fix 
this (the call to xpath is in line 40 at [4].

I would like to solicit your feedback, specifically:
* I am very interested to know if/how it works with other combination of 
browser/system than Firefox/Ubuntu that I develop on.
* I have pushed the code to the repository [5]. Technical feedback and 
improvements are welcome. If this can be made easier / simpler, I am all 
for it.
* Last but not least, I also welcome critique of the design, although I 
have no intention to make major changes to it. I know it is not perfect, 
and there are subjective considerations as well. The usage of browser 
default widgets for scrollbars and drop downs is IMHO ugly, but 
functional and easier to maintain/update. Functions before aesthetics.

Thank you, and have a good weekend
Yuv

[1] http://code.google.com/p/svgweb/
[2] http://enblend.sourceforge.net/
[3] http://enblend.sourceforge.net/enblend_new/
[4] 
http://enblend.hg.sourceforge.net/hgweb/enblend/enblend-web/file/2ccfac410437/src/apply.sh
[5] http://enblend.hg.sourceforge.net/hgweb/enblend/enblend-web/