Question

I’m trying to add svg’s to my “sheets reader” with the embed html-tag. It works fine in FF, in Chrome, even in IE9, but when I open the page in Safari, it’s not scaling and I’m getting scrollbars.

Here’s my testing environment: http://www.nie-wieder.net/br/BookReaderDemo/noten.html#page/1/mode/1up
just open it in safari (version 5.1.7, perhaps on mac only?! just got a mac right here) and you’ll know what I mean.

So, my Question is: Is there any way to get the svg file at the demo to scale right in Safari?

I searched around here and found nothing to this specific question, so I hope you can help me 🙂

edit: I can’t use img because svg via img-tag are not scriptable 🙁

Answer 1

You override your browsers default CSS rules for svg tag. Remove width="" and height="" from the svg tag in your .svg file or embed the svg as img instead of embed tag:

<img type='image/svg+xml' src="file.svg" style="width: 100%; height: 100%;" />