|
|||
Darstellungsproblem SVG im IE
Hallo CSS Experten,
auf einer Webseite werden Grafiken im SVG Format wie folgt eingebunden: HTML-Code:
<div class="innenbox"> <a href=""> <img src=""> </a> </div> Code:
img { max-width: 100%; height: auto;} .innenbox { height: 300px; } Mit allem möglichen getestet: Chrome, Firefox, Opera, Android, Iphone und die Skalierung der SVG Grafiken funktioniert prächtig. Auf dem IE funktioniert die Skalierung nicht - aus Kreisen werden "Eier". Es sieht fast so aus, als wenn die feste Höhe des umgebenden divs an das innere img vererbt wird und height=auto ignoriert würde. Ich weiss, der IE ist tot, aber es benutzen ihn noch so viele Gibt es da vielleicht einen Hack? Ich kann Google nichts Entsprechendes entlocken Vielleicht hat einer von euch eine Idee... Viele Grüße aus dem Norden! |
Sponsored Links |
|
|||
Nun habe ich doch etwas gefunden, muss es nur noch kapieren
https://gist.github.com/larrybotha/7881691 |
Sponsored Links |
|
|||
Nee, so ging es nicht.
Hier scheint es bessere Ansätze zu geben: https://css-tricks.com/scale-svg/ Sorry für die unnätige TE. Habe die Lösungen erst gefunden, nachdem ich hier schon gepostet hatte. Insofern hats ja doch geholfen |
|
|||
Hallo
Zitat:
Ich beschäftige mich seit ein paar Wochen mit SVG. Leider wird in den Anleitungen ein großer Bogen um die Skalierung geschlagen. Dabei macht die Skalierung in der Praxis jede Menge Probleme. Und zwar nicht nur im IE. Gruss MrMurphy |
|
|||
Hallo MrMurphy,
danke für die Info. Ich wundere mich schon etwas darüber, dass zu diesem Thema so wenig Brauchbares im Netz zu finden ist. Ich benutze SVGs so gerne, weil es eben Vektoren sind und diese Grafiken in jeder Größe und auf jedem Bildschirm (auch auf hochauflösenden!) brilliant und gestochen scharf ausssehen. Die Probleme beim Skalieren habe ich bisher nur im IE festgestellt. (Tritt das Problem auch im Edge auf?). Bei welchen anderen Browsern hast du denn auch Probleme bei der Skalierung festgestellt? Als Fallback für nicht-SVG fähige Browser gibt es ja eine JS basierte Lösung. Hierbei werden einfach die SVGs durch PNGs ausgetauscht. Das Problem ist nur, dass das auf modernizrr basiert und dieser je nach Fähigkeit <html class="svg" oder eben <html class="no-svg" ausgibt. Das Problem: Der IE 11 gibt frech "svg" aus, obwohl er es eben NICHT richtig darstellen kann. Hat jemand vielleicht noch einen anderen Ansatz für einen IE Hack? Am liebsten würde ich den PNG Austausch Trick machen und gut ist. Viele Grüße! |
|
|||
Hallo
ich halte Fallbacks für SVG inzwischen für überflüssig. Wie in deinem verlinkten Artikel und auch von mir beschrieben sind die meisten Skalierungsprobleme nicht browserabhängig. Die meisten Skalierungsprobleme entstehen durch ein komplett anderes Verhalten von SVG gegenüber Rastergrafiken wie jpg, png, bmp ... In einem Forum war so zum Beispiel der Wunsch aufgekommen, einen Absatz mit einem roten Strich diagonal komplett durchzustreichen. Ich habe gleich an SVG gedacht und stieß dann auf Skalierungsprobleme. Und zwar unabhängig vom Browser. Zitat:
Gruss MrMurphy |
|
|||
Mit großer Erleichterung kann ich euch mitteilen, dass ich das Problem gelöst habe:
Für Illustraror muss Responsive-Export-Funktion verfügbar sein, das ist meines Wissens nur in CC der Fall. Gegebenenfalls muss dieses Update manuell durchgeführt werden, es ist wohl nicht immer automatisch verfügbar. Beim Speichern muss nun das Häkchen bei "interaktiv" gesetzt werden. Nun skalieren die SVGs auch im IE genauso tadellos wie in den andern Browsern und ich bin begeistert und froh... Euch allen weiterhin frohes Schaffen und viele Grüße! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
SVG Sprites mit Google Chrome - wie? | MichaelA | CSS | 4 | 09.12.2014 16:52 |
Weiße Bock um angeklickten Link (svg) | likandoo | CSS | 3 | 09.05.2014 16:41 |
SVG Format - Programme | emti | Grafik, Design, Typografie | 0 | 11.08.2013 14:01 |
'=' Zeichen nicht erlaubt in svg Datei ? | Feirell | (X)HTML | 19 | 18.05.2013 15:58 |
Erstellen einer laufenden Handschrift als SVG | Dennis1985 | Grafik, Design, Typografie | 14 | 31.05.2012 16:15 |