SVG embedded in HTML, a dark art
Spent an hour or two looking at SVG and embedding them into Web pages.
I worked from Ian Hickson’s Webstats and I didn’t get very far. I grabbed another svg from somewhere else, and it wouldn’t render without a ?xml-stylesheet def. Which I think is a little weird.
I don’t like all these pixel definitions. It’s so not easy to simply say this bar is 40% big and another is 60%. Instead it is drowned in this x, y placement cruft.
Perhaps canvas is the answer. I’m unsure how the spec has been implemented in Firefox. If I understand canvas correctly, then these graphs/graphics would be generated programatically with Javascript. Which sounds kinda sucky.
SVG looks like it will take a while. For graphs et al, I rely on R and just export to PNG or something else that doesn’t scale. :(
March 2nd, 2006 at 7:45 pm
what’s the problem? eh, look more closely on tutorials =)
You can say like.. bar is from coord(0,0) to coord(30.30) ..
or, you can use mm or cm or pt as unit.. and even more too.. And for emedding svg to html, goes like this:
yep?
– Joose
March 2nd, 2006 at 11:25 pm
Perhaps just link the tutorials or where it is working nicely. :)
Your example didn’t work …
March 4th, 2006 at 3:20 am
how about this: http://joose.iki.fi/hendry/joose.xml
very basic SVG, but showing it embedded and using embed tag.. and also screenshot to prove that it works.
Browser: latest nightly build of webkit+safari
March 5th, 2006 at 11:04 am
Your http://joose.iki.fi/hendry/hello.svg is a good example.
In this page http://dabase.com/svg/text.html it renders quite differently than yours:
http://joose.iki.fi/hendry/joose.xml
As, I guess I failed to specify the width and height in the embed tag. Though that is quite worrying that not specifying the width and height causes a different rendering of the actual meaning of the svg. In yours it looks like a circle. In mine, it looks like a circle with an intersection at the top and bottom.
Though why does Ian use object and you use embed? Whatever Ian does, is usually right. :)
In case it isn’t obvious this post is about Firefox 1.5 and SVG. You know, the browser with about 10% of the market, as oppossed to safari’s 0.5%. :P
I also wonder does it matter than your html is text/xml as oppossed to just text/html ?
Thanks again for your input Joose and sorry it took me sometime to reply…
Note: Damn, angular brackets in comments doesn’t work very well.