SVG-Images werden im IE/Edge falsch proportioniert

[ambiente1]

Hallo zusammen!

Mache eine Website für einen Freund und stehe an sich kurz vor der Veröffentlichung.

Leider machen mir jeweils IE10, IE11 und Edge13 unter Windows ein paar Probleme mit den Vektorgrafiken, die ich verwende.

Unter Chrome/Firefox/Opera/iOS sieht soweit alles gut aus, aber die Konkurrenten aus dem Hause Microsoft scheinen nicht mit SVG-Dateien im „<img>“-Tag umgehen zu können?

Als Breitenangabe wird in „vw“, während die Höhe automatisch gesetzt wird.

Die SVG-Dateien wurde mit SVGOMG optimiert.

Habt Ihr entsprechend einen Rat dazu?

Dankeschön!

Alex / ambiente1

[MrMurphy1]

Hallo

Die proportionale Größenänderung ist bei SVG ein Kapitel für sich. Damit haben alle Browser unterschiedliche Probleme. Allgemeine Lösungen gibt es leider nicht.

Du kannst mal probieren auf die Breitenangaben direkt für die img-Elemente zu verzichten oder auch 100% Breite vorzugeben. Stattdessen bekommen die umgebenden figure-Elemente die Breitenangaben in vw.

Can I Use

http://caniuse.com/#search=svg

weist auch auf die Problematik hin (Anmerkung 2 bei Basic Support). Dabei wird auf das folgende Beispiel verwiesen:

http://codepen.io/tomByrer/pen/qEBbzw?editors=110

Vielleicht hilft dir das auch weiter.

Gruss

MrMurphy

[Monika - Schlauklug ;-)]

Hallo Alex,

ich habe in unserem MINI Wiki folgenden Code gefunden:

<object data="test.svg" type="text/svg+xml">
  <img src="test.jpg">
</object>

Es handelt sich hierbei um eine "Fallback-Lösung" als Quelle wurde DRWeb bezeichnet