Problem with SVG on some iPad and iPhone models

Question

Level 1

0 points

Problem with SVG on some iPad and iPhone models

I'm developing a website for use on mobile devices. I'm having problems with the display of an SVG file on (only) some iPad models and, on iPhone, only on the latest iPhone 6.

A jpg image within an <image> tag in an SVG file is getting wrongly resized on some iPad models but not on others. (See list below.)

I have a webpage (link below) which includes a complex SVG file. This SVG contains a jpg image (raster) as an <image> tag (which serves as a background for the whole thing), along with many <circle> and <text> elements (vector). On some iPads the jpg image gets resized improperly, out of synch with the vector elements which display correctly. On problematic models, the background image does not line up with the dots (vector elements) because it is being resized larger by the device. On a computer it is displaying correctly.

See below note about which models have problems...

The whole thing is meant to be scaled up and down so people can zoom in and out, and the vector elements should resize along with the background raster image. Only on some iPads (and iPhone 6) are they not displaying correctly.

Models:

iPad 1 (and 2?): OK (confirm iPad 2 if you can!)

iPad Air 1: OK

iPad Air 2: Raster image problem

iPad Mini 1: Raster image problem

iPad Mini 2: OK

iPad Mini 3: Raster image problem

Please compare how this works on a computer versus problematic versions of iPad:

http://bestofyourtown.com/test/

Any ideas on why that (background) image would be getting sized incorrectly on those particular models, but is OK on the others?

And of course, if you have any suggestions on how to SOLVE the problem... :-)

Thanks!

iPad Air, Varies by device

Posted on Nov 18, 2014 9:30 AM

Reply

Answer 1

etresoft

Level 9

51,022 points

Nov 18, 2014 10:20 AM in response to AdEssentials

Have you tried setting the size of the image to 100%?

Reply

Answer 2

AdEssentials Author

Level 1

0 points

Nov 18, 2014 10:51 AM in response to etresoft

As far as I understand, SVG files don't work that way. Here's the code in the SVG file; Are you suggesting changing the code in the height and width attributes on the <image> tag itself?

(I've tried to paste in the code from the SVG file here but the editor won't allow me to. You can see it live at the URL I provided.)

Reply

Answer 3

AdEssentials Author

Level 1

0 points

Nov 18, 2014 12:10 PM in response to etresoft

I tried setting width and height values to 100%. It made no difference at all. Thanks for the suggestion. Any others?

Reply

Answer 4

etresoft

Level 9

51,022 points

Nov 18, 2014 12:24 PM in response to AdEssentials

I don't know when, or if, I will be able to debug this in detail. The problem seems to be related to your assumption that a pixel has some specific meaning. It doesn't. Then when you include an image with specific pixel sizes in an SVG and scale the SVG, the results are undefined. I don't know exactly how HTML5 is supposed to render SVG files with embedded images. It may be documented somewhere and, if so, you are likely in violation of whatever it says. It may not be defined anywhere, in which case you are just trying to luck. It may be clearly defined but just not implemented on iOS. That would be a bug you could report and see fixed in 2 years or so.

Here is the definition for the image element in SVG: http://www.w3.org/TR/SVG11/struct.html#ImageElement

There may be a better way to structure your SVG to get the image to display correctly. I don't know because I'm not familiar with SVG.

If all else fails, you can just take the image out of the SVG and let HTML5 handle the scaling of both.

Reply

Answer 5

AdEssentials Author

Level 1

0 points

Nov 18, 2014 12:47 PM in response to etresoft

Thanks.

you can just take the image out of the SVG and let HTML5 handle the scaling of both

I wish it were so, but I am using an application that was designed around SVGs, and though I've tried, I can't make it work without the raster image so far.

There may be a better way to structure your SVG to get the image to display correctly. I don't know because I'm not familiar with SVG.

This is what I'm hoping for. Am working on different settings for the preserveAspectRatio attribute as we speak; kinda grasping at straws. Hopefully someone with a lot of SVG experience will know! Anyone?

Thanks again!

Reply

Answer 6

etresoft

Level 9

51,022 points

Nov 18, 2014 5:17 PM in response to AdEssentials

As near as I can tell, it doesn't work. Take the image out of the svg and use HTML instead. Like so:

<html>

<head>

</head>

<body>

</div>

</body>

</html>

Reply

Answer 7

AdEssentials Author

Level 1

0 points

Nov 20, 2014 10:34 AM in response to etresoft

Part of the difficulty is that the user must be able to move the background raster image around along with the vector elements of the SVG. They also must be able to scale both things up and down simultaneously and in synch. That's why the image is built into the SVG. How would they do that if they were separate?

Reply

Answer 8

etresoft

Level 9

51,022 points

Nov 20, 2014 10:50 AM in response to AdEssentials

Just handle it in HTML, Javascript, CSS. As far as HTML is concerned, the SVG is just another image. Let HTML treat it as such. I have done something similar by associating points on a high-resolution, zoomed-in image with geographic points on a web map. It is quite accurate. Your example wouldn't even need that level of accuracy.

I can definitely reproduce the problem you experienced. It is definitely a bug. But if you want to use SVG, you are just going to have to work around it.

Reply

Answer 9

AdEssentials Author

Level 1

0 points

Nov 25, 2014 3:07 PM in response to etresoft

Thanks again, etresoft!

I'm still working through all of the possibilities in 'correcting' or tweaking the SVG file itself, but if I exhaust those, I'll try the route you suggest!

So you would:

a) remove the raster image from the SVG file, leaving only the vector portions, making sure that that element has an otherwise transparent background;

b) somehow tie the resizing and placement of the new background (raster) image to the resizing of the SVG element using javascript and CSS, basically? Hmm; perhaps it could be tied together just using CSS?

Reply

Answer 10

etresoft

Level 9

51,022 points

Nov 25, 2014 8:31 PM in response to AdEssentials

I would do both. That is just what I did in my example above. Put both images inside a div and do all of the sizing and placement on the div.

Reply