SVG problem – cutting off portion of image

[kamaboko]

Hi,

I’ve been messing around with SVG’s as of late and have run into a problem rendering the image on my Galaxy S4 ( Chrome, Dolphin, and Opera browsers except for Firefox). You can see how the last letter or two is whacked off at the end ( provided you view this on an Android phone). No problems with desktop browsers. Pardon the multiple SVG images. I was messing with different widths to see if it made a difference. It didn’t seem to.

http://www.dave65.com/mobile/main.php

Suggestions?

[Shikkediel]

You can’t put a regular img inside an svg…

Mozilla doc <image> element

I also foresee some issues with an id that’s only made up of numbers by the way.

[kamaboko]

Hi Shikkediel,

I would normally not use numbers in id’s. I merely did this to track the different settings I was using.

As for the problem, whether I use <iframe><svg>, etc., it still doesn’t explain why the images are not rendered correctly on an Android phone, but properly on any modern desktop browser. Besides, Chris Coyier has plenty of examples using svg image links inside of img tags.

[Shikkediel]

Firefox reported an error and didn’t show it right – just an empty svg with the image besides it when I visited earlier. But the link now looks like a completely different page.

svg image links inside of img tags

Could you show an example?

[Author]

Posts