• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

SVG als IMG einbinden: CSS ignoriert?

T

Tecwan

Neues Mitglied
Liebe Community,

ich möchte eine Grafik als SVG in einem externen File in eine HTML-Seite einbinden, wobei deren Klasseninformationen in einem CSS ausgelagert werden sollen.
Hintergrund: die Grafik wird von Browsern nur einmal geladen und dann aus dem Cache angezeigt, ebenso das CSS.
Das ermöglicht eine hohe Effizienz hinsichtlich Übertragungsvolumen und Request-Zahlen.

Die Grafik sei folgendes grüne Quadrat:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" viewBox="0 0 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:red}
]]>
</style>
</defs>
<g>
<polygon class="fil0" points="0,0 100,0 100,100 0,100 "/>
</g>
</svg>

Ich möchte nun die Klassen (hier die Füllfarbe lime) in ein CSS "test.css" auslagern, die Daten des SVG als "grafik.svg" speichern und das Ganze in HTML als <img src="grafik.svg"> einbinden.

Das Einbinden und nachträgliche Ändern via CSS funktioniert bei inline SVG wie gewünscht. Auch wenn im Browser "grafik.svg" direkt geladen wird (unter Nachladen des "test.css", was im SVG notiert wird), wird die Grafik korrekt angezeigt.
ABER: Das funktioniert nicht, wenn die Grafik in HTML mit <img src="grafik.svg"> eingebunden wird. Hier wird der Content (das Quadrat) schwarz und nicht grün angezeigt.
Der IE11 und Android-Browser zeigen die Grafik richtig an, Firefox und Chrome (PC) hingegen nicht - hier bleibt die Farbe schwarz, weil das CSS nicht beachtet wird (vermute ich).

Zum Nachvollziehen alle drei benötigten Files:
grafik.svg:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="test.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" viewBox="0 0 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<polygon class="fil0" points="0,0 100,0 100,100 0,100 "/>
</g>
</svg>

test.css:
.fil0 { fill:lime }

test.htm:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
inline:<br/>
<svg width="100px"; height="100px"; viewBox="0 0 100 100"><g><polygon class="fil0" points="0,0 100,0 100,100 0,100 "/></g></svg>
<br/><br/>als img nachgeladen:<br/>
<img src="grafik.svg">
</body>
</html>

Bei Anzeige von test.htm im Browser wird erst inline ein grünes Quadrat angezeigt (ohne test.css wäre es schwarz), und dann nochmal als img nachgeladen. Das zweite Quadrat ist nicht grün (Firefox, Chrome).

Wie muss ich das CSS abändern, damit auch der Firefox oder PC-Chrome Notiz davon nehmen?


 
Für eine Reduzierung von HTTP-Requests ist SVG auch nicht nötig. Du könntest statt dessen Sprites verwenden.
 
threadi schrieb:
Eine Recherche von mir dazu ergab, dass Du vermutlich einen Firefox-Bug aufgesessen bist der inzwischen fast 8 Jahre alt ist.
...
Schau dir mal die "Lösungsvorschläge" dort an ;)
Zum Vergrößern anklicken....

Hm... o_O
Im Artikel ist die Rede davon, dass der Firefox das Stylesheet ausschließt, weil er es für einen RSS- oder Atom Feed hält.
Das CSS enthält in seinen 19 Zeichen außerdem nichts, was als <feed> oder <rss> interpretiert werden könnte.

Außerdem schafft es Chrome ebenfalls nicht, das SVG als IMG einzubinden - das CSS wird aber von jedem bisher getestetem (SVG-fähigem) Browser gelesen und erkannt - im Beispiel ist das an der inline-SVG zu sehen, die das gleiche CSS einlesen muss, um Farbe zu erhalten.

Sollte im CSS ebenfalls noch ein Header am Dateianfang stehen?
Bisher hielt ich das für unnötig - es wird alles gelesen und auch interpretiert; zudem wird der Typ bei der Anweisung zum Einbinden angegeben.

Das einzige, was mir sonst noch einfällt ist, dass Mozilla innerhalb eines img dichtmacht, wenn eine Eigenschaft unbekannt ist; hier wäre das fill. Andererseits: inline macht "fill" keine Probleme.
 
Tronjer schrieb:
Für eine Reduzierung von HTTP-Requests ist SVG auch nicht nötig. Du könntest statt dessen Sprites verwenden.
Zum Vergrößern anklicken....

Jup, im Grunde eine gute Idee, aber ich brauche hauptsächlich Vektorgrafiken.
Ich habe beispielsweise eine interaktive Landkarte, die ein paar Symbole mit Links enthält und eine Legende, die auf :hover mit Farbänderungen innerhalb der Karte reagiert. Bisher ist diese Karte inline eingebunden (und wird auch nur auf einer Seite angezeigt).
Eine andere Grafik - Logo und Kopfzeile - taucht fast überall auf, weshalb ich sie gerne nur einmal ausliefern möchte - notfalls im CSS verpackt.
Kleine Grafiken kann ich inline einbinden, wo kaum Volumen benötigt wird. Oder, wenn dies durch häufigere Verwendung zusammen kommt, würde ich einen Font zusammenstellen.
Aber auf lange Sicht brauche ich die Möglichkeit, Form und Inhalt getrennt und nach Bedarf laden zu können. Die Form im CSS und immer - den Inhalt nur bei Bedarf und dann gecacht (und über das CSS variiert - daher getrennt).
Es geht da auch weniger um Bildchen in Icon-Größe, sondern um Grafik, die gern auch mal um 300% gezoomt wird. Bei Anzeigegeräten, die von 240 - 2400 Pixel breit sind, hat Vektorgrafik einfach den Vorteil, keine Kompromisse eingehen zu müssen.

Aber Danke: für Bilderserien werde ich mir das mal merken.
:)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben