it-swarm.com.de

Firefox SVG-Grafik verschwimmt

Ich habe ein responsives Webdesign mit einem SVG-Logo/Bild, das mit seinem Container dynamisch ist. Alle gängigen Browser scheinen SVG wirklich gut zu unterstützen.

Mein SVG ist dynamisch. Wenn ich also mein Browserfenster skaliere, macht es das SVG auch. In Chrome und IE9 funktioniert es wie ein Zauber. In Firefox ist der SVG bei einigen Größen unscharf. Aber ich kann nicht sagen, dass die ganze Zeit verschwommen ist, wenn sie die ursprüngliche SVG-Größe überschreitet. Es scheint einfach nicht immer richtig zu rendern, während ich mein Browserfenster skaliere.

So sieht es manchmal aus (siehe fullsize , um den Unterschied zu sehen): enter image description here

Vielleicht benutze ich den falschen Weg, um es einzubetten. So sehen mein CSS und HTML aus:

<div id="logo"></div>

CSS:

#logo {
   background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
   height: 22em;
   background-repeat: no-repeat;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
}

Schnappen Sie sich die SVG-Datei mit dem Link im CSS, wenn Sie einen Blick darauf werfen möchten. Es wurde mit Adobe Illustrator erstellt.

Irgendeine Idee, wie man das beheben kann?

21
René Stalder

Update 2013-10: In v24 behoben wurde nun in den Release-Channel aufgenommen


Update 2013-07: Fehler ist behoben!Fix wird es in Firefox 24 schaffen, das irgendwo zwischen September und Oktober veröffentlicht wird


Ich habe irgendwo über eine etwas einfache Lösung für dieses Problem gelesen, die ich jetzt in meinen Projekten verwende (wird Quelle hinzufügen, wenn ich es wiederfinde):

stellen Sie einfach Breite und Höhe des SVG-Containers auf die maximalen Werte ein, die das Bild wahrscheinlich haben wird, und Sie sind in Ordnung. Funktioniert in allen gängigen Browsern gut. Einzige Einschränkung ist, dass Firefox und Oper (ja, dieselben zwei Browser, die dieses Durcheinander verursacht haben) nicht für sehr große Bilder geeignet sind -> verwenden Sie keine zu hohen Werte für die Abmessungen

originaldatei:

<svg width="64px" height="128px"> 

nehmen wir an, die maximale Breite ist 3x so groß, dann sollte Ihr SVG Folgendes enthalten:

<svg width="192px" height="384px"> 

(Ja, der Knoten svg kann weitere Attribute haben ...)

Der Grund, warum dies funktioniert, ist, dass Opera und FF SVGs rendern, bevor sie in der Größe geändert werden und nicht umgekehrt, da dies mit dem Vektor gfx geschehen soll

UPDATE: Credits gehen an David Bushell, der einen wunderbaren Artikel über Resolution Independence With SVG geschrieben hat.

15
Jörn Berkefeld

Das Problem ist, dass Firefox bei Verwendung von SVG als Hintergrundbild die Größe der Vektoren auswählt und diese bildbasierten Pixel nach Bedarf skaliert. Hier ist ein verwandter Fehler: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

Die einfachste Lösung besteht darin, SVG nicht als Hintergrundbild zu verwenden, sondern die SVG direkt einzubetten oder über ein <img>-Tag darauf zu verweisen.

Wenn Sie einen funktionierenden Testfall mit den Problemen und Dateien aufstellen, können wir Ihnen mit aktuellem Code und Korrekturen helfen.

8
Phrogz

Um ein SVG-Bild auf die Größe des Containers zu skalieren, stellen Sie sicher, dass für Ihr svg-Tag ein viewBox-Satz festgelegt ist:

<svg viewBox="0 0 347 189">

aber keine width- oder height-Attribute, also nicht:

<svg width="347px" height="189px" viewBox="0 0 347 189">

Standardmäßig wird das Seitenverhältnis beibehalten, indem die maximale Breite oder Höhe angepasst wird, je nachdem, welche Bemaßung zuerst an der Grenze liegt.

Sie können die Strategie von preserveAspectRatio auf alle möglichen interessanten Arten ändern, wenn dieses Verhalten nicht das ist, das Sie suchen.

6
ecmanaut

Ich bin selbst auf genau dasselbe Thema gestoßen. Ich konnte das Problem in Firefox beheben, indem ich die SVG-Datei in einem Texteditor editierte und den Breitenattributwert des <svg>-Elements auf 100% änderte. Alle anderen Attributwerte sollten jedoch gelassen werden. In Ihrem speziellen Beispiel ist hier die Änderung vorzunehmen:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.Adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

Das hat den Trick für mich getan und sollte dasselbe für Sie tun; Ich kann jedoch nicht zu 100% ohne einen Testfall arbeiten, mit dem ich arbeiten kann.

Hinweis: Durch die Einstellung der Breite und der Höhe auf 100% brach das Rendern des SVG-Safari in meinem speziellen Fall. Stellen Sie sicher, dass Sie nur die Breite auf 100% setzen.

1
David Zulaica

Die einfachste Lösung besteht darin, die SVG-Größe in einem Vektorbild-Editor wie Illustrator zu vergrößern. Skalieren Sie es auf die gerenderte Auflösung im Browser (oder höher). Da es sich um einen Vektor handelt, wirkt sich eine Vergrößerung nicht auf die Dateigröße aus.

0
Damir Kotoric

Ein anderes ähnliches "Gotcha", das ich gefunden habe, war, als ich ein SVG aus Illustrator exportierte, die Breite und Höhe waren keine runden Zahlen. Wenn ich also das SVG in einem Editor öffnete, war die Breite etwa "100.6789px". Durch die sorgfältige Bearbeitung des Bildes in Illustrator zuerst in runde Zahlen und dann mit derselben Breite und Höhe für Firefox, löste es unscharfe Bilder für mich.

0
user1010892