2

I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's for my own wedding, so "the client" doesn't care that not all users are getting the same experience).

This works just great in Firefox, Safari, and Chrome. It basically doesn't work in IE (including IE9), or Opera. I haven't tested anything else.

My question is, what is the best way to handle giving IE (and, I suppose Opera) users either (a) a redirection to a different page, or (b) show them something else (probably a screenshot).

I would prefer not to use javascript, because I suspect if they are already having trouble viewing the page, problems on their end with javascript are quite possible.

Marcin
  • 48,559
  • 18
  • 128
  • 201
  • So far as I remember, Opera does have native SVG support? – Kyle Feb 17 '11 at 14:03
  • 2
    How are you creating the SVG? Could you create VML for IE that way as well? For the basics, SVG and VML aren't actually that dissimilar, or maybe there's a toolchain that could convert from one to the other... Of course, this is all rather an exercise in doing odd things with browsers and SVG, bearing in mind your layout could be done quite simply as a perfectly normal, cross-browser compatible HTML/CSS page... – Matt Gibson Feb 17 '11 at 14:19
  • Inkscape, followed by lots of hand-coding, to overcome its various limitations. – Marcin Feb 17 '11 at 16:47

2 Answers2

1

It works fine in Opera 11 / Windows.

You should consider just making it in good old HTML/CSS - it's not a particularly complex layout.

Alternatively, use javascript on your parent page to redirect users of IE to a static PNG version of your SVG.

IE8 simply does not support SVG without a plugin - javascript will work just fine on the page. However, SVG is supposed to work in IE9, so I'm not sure why yours doesn't. I don't yet have IE9 here, so I can't test.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • In case of confusion - I originally posted this as a comment, then figured it was close enough to an actual answer I should make it one. – thirtydot Feb 17 '11 at 14:08
  • IE9 just shows a broken image when it's on a webpage. When it is just given the svg file, it renders it, without the foreignObjects. This is the same behaviour I am seeing in Opera 11.01/Windows, oddly. The javascript redirect would be appealing if I didn't worry that people who are using older versions of IE may be running on corporate setups that have javascript restricted, so I would prefer not to use javascript if there is any good alternative. – Marcin Feb 17 '11 at 16:35
  • Oh, and the reason why I don't want to do it in standard html is that quite frankly I don't think it is nearly as easy to get a layout like this to work as well as this does. I particularly enjoy that it assumes a sensible size on every screen (running the right browser). – Marcin Feb 17 '11 at 16:38
  • I think the easiest solution would be to recreate this in HTML/CSS. I could (and will, if you want) do something which looks 85% the same (bar the fancy resizing) in about 20 minutes. Edit: (Didn't see your 2nd comment before writing this one) – thirtydot Feb 17 '11 at 16:39
  • You're right, you can make something similar, but a) it won't be quite as nice b) this isn't the completed page (there are some drawings to go on there). Handling the drawings in the presence of scaling would be awkward (they will form a frame around three sides of the page). – Marcin Feb 17 '11 at 16:46
  • 1
    The SVG here works in IE8, Firefox, Chrome, Opera: http://kybernetikos.com/inlinesvg.xml - it uses something funky to make it work in IE. – thirtydot Feb 17 '11 at 16:50
  • 1
    I've gone with the simplest thing, as per your suggestion: conditional IE comments to display a redirection link, and javascript inside the conditional comment block to do the redirection. This takes users to a PNG, and some text introducing the links from the page. – Marcin Feb 19 '11 at 05:58
  • 1
    Oh, and as far as Opera users, particularly given that it looks like it is working for you in Opera, I figure they can look after themselves. I'm not aware of anyone who uses Opera who isn't a web designer, or otherwise highly computer educated. – Marcin Feb 19 '11 at 07:18
0

ForeignObject is probably the answer why it doesn't work. Given that your svg is quite simple, I'd suggest removing the foreignObjects and using svg text and tspan elements instead. That should make it work in all browsers. And seeing how you used inkscape to create the svg it could have done all the linewrapping etc for you anyway.

From other answer about flow-elements in inkscape:

Inkscape can generate <text> and <tspan> for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, then press return where you want a new line.

I'm not sure if IE9 supports foreignObject.

There's a way to do automatic linewrapping in svg tiny 1.2, which is supported in Opera, a workaround solution could look something like this. But to get IE9 compat too, you'll probably have to go with text+tspan.

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Actually, while tspan works just fine in Firefox and Safari, the flowPara elements do not work properly in either of them. – Marcin Feb 17 '11 at 16:31
  • 1
    Read the answer again, I didn't say to use flowPara elements. See http://stackoverflow.com/questions/3924646/how-to-properly-display-multiline-text-in-svg-1-1 – Erik Dahlström Feb 18 '11 at 08:03
  • Right, and then maybe I could use a metal grid to typeset my print-outs. I'm not going to layout my text by hand. – Marcin Feb 19 '11 at 04:08