zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellungsproblem SVG im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.01.2016, 18:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2008
Beiträge: 25
JoergB befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Das Ganze sitzt in einem prozentualen Grid, die Breite der umgebenden divs variiert damit je nach Auflösung.

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.01.2016, 18:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2008
Beiträge: 25
JoergB befindet sich auf einem aufstrebenden Ast
Standard

Nun habe ich doch etwas gefunden, muss es nur noch kapieren

https://gist.github.com/larrybotha/7881691
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.01.2016, 19:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2008
Beiträge: 25
JoergB befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 05.01.2016, 08:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 949
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Sorry für die unnätige TE.
Ganz im Gegenteil, danke für die Infos.

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
Mit Zitat antworten
  #5 (permalink)  
Alt 06.01.2016, 10:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2008
Beiträge: 25
JoergB befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 06.01.2016, 14:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 949
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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:
Ich wundere mich schon etwas darüber, dass zu diesem Thema so wenig Brauchbares im Netz zu finden ist.
Das ist nicht nur ein Problem bei SVG. Es gibt leider zu viele Sonnenscheinschreiberlinge, die offensichtlich nur theoretische Erfahrungen haben. Oder mit den Problemen selbst überfordert sind, dies aber lieber verschweigen.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 07.01.2016, 08:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2008
Beiträge: 25
JoergB befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:11 Uhr.