The .svg file is from another site. I’m using it to test an SVG sprite sheet.
You should just see ‘GOODBYE’ in a small red box. IE8 shows only half of this in the same red box.
The script displays the GOODBYE image at about half of the size that the .svg file shows it at (I need to be able to do this and also show at any size and the script will do this in modern browsers if I change the values).
This works in all current browsers and latest mobile phones, but not IE8 (or 7) and not some lesser popular mobile phones.
I’ve got a feeling there’s either an obvious reason or an obvious solution.
If someone can help me get this working in IE8 then I think all the mobiles will also display correctly (as they show exactly the same problem as IE8).
Also, for this, I want to use the inline sprite sheet and I want to use <object>. Please don’t suggest <img> or using a CSS background image. Thanks.
I don’t know much about SVG but according to the documentation IE8 doesn’t support SVG unless you are using some sort of plug in like the adobe SVG viewer.
I’ve never had good luck setting dimensions on inline elements, since they technically aren’t allowed to have any.
Img and object are special law-breakers, because they are replaced elements, who are calling another file. Usually this other file has set px dimensions (like raster images do) so some browsers will allow those elements to show the set dimensions even if the file never loads (Gecko browsers seem to be the only ones who get this right: if the image or file does not load, the element didn’t magically become a block, so it still acts like an inline and collapses any dimensions you were hoping to give it… as it should).
So I’m curious, does IE do any better if you set the object to display: block? I dunno anything about svg except I can’t figure it could have any intrinsic pixel-based height or width…
(if I had IE available at the moment I could test this in teh browser)
What surprises me is how little people know (or care) about SVG. I mean that with the greatest respect as this includes many experts. I have so much trouble getting help on forums when it comes to SVG.
However, this question is probably more a ‘how do I get the <object> tag to do what I want?’ question, so hopefully somebody will know.
I’ve simply never worked with it. I’ve never worked with a company who had anyone creating svg images (or svg-anything) and when browsers finally (10 years after svg was created) got off their duffs and started seriously supporting it, a lot of us never took notice. Last time I ran across SVGs… were when I was taking map-of-the-world images from Wikipedia. One svg took a good 4 or 5 minutes to actually render in my Firefox of the time, which was 3.6. The PNG version rendered immediately.
I suppose to see if SVG actually has anything to do with the problem, you could substitute some random XML document in there and see if IE and the mobiles react the same.
The people I know who do know a lot about SVG, I don’t know them on forums. https://twitter.com/erikdahlstrom is one example.
Mebbe I ping him.
Re experts here: there are plenty of gaps around these forums… see the Perl/Python section here as an example. I think web development is fractured and specialised enough that no one place manages to attract all the experts of all the stuff we could be working with.
All the documentation and examples on the web say that svg doesn’t work in IE8 unless you have a plugin of sorts. I only have IE8 tester and IE9 in ie8 mode to test on but they both confirm the results that have been documented. You will get a bordered object element 10px high showing a partial missing image icon. If you increase the size of the object you can see the whole missing image icon.
What are you seeing in your IE8? Can we see a screenshot?
I mean that with the greatest respect as this includes many experts. I have so much trouble getting help on forums when it comes to SVG.
I’m afraid I’m strictly CSS but I tend not to wade into stuff until its broadly usable.