SVG mit externer CSS-Datei in HTML-Datei
MrMurphy1
- svg
Hallo
Meine Frage richtet sich wahrscheinlich eher an SVG-Spezies:
SVG-Objekte lassen sich bekanntlich teilweise mit CSS formatieren. Die CSS-Eigenschaften können wie bei HTML in eine externe CSS-Datei ausgelagert werden.
Wenn die SVG-Datei direkt aufgerufen wird funktioniert das auch:
http://kurokami.bplaced.net/index.svg
Die externe CSS-Datei dazu:
http://kurokami.bplaced.net/index.css
Allerdings funktioniert das nicht, wenn die SVG-Datei mittels img-Element in eine HTML-Datei eingebunden wird. Dann wird die SVG-Datei unformatiert angezeigt:
http://kurokami.bplaced.net/index.html
Gibt es eine Lösung, wenn die SVG-Datei per img-Element in die HTML-Datei eingebunden werden soll und die externe CSS-Datei in die SVG-Datei eingebunden werden soll?
Es braucht nicht darauf eingegangen werden, dass SVG-Dateien auch anders in HTML-Dateien eingebunden werden können. Auch dass die CSS-Datei direkt in die HTML-Datei eingebunden werden kann. Das ist bekannt und Standard-SVG-Wissen, dass in jeder SVG-Anleitung verbreitet wird. Dass muss hier nicht wiederholt werden.
Die CSS-Formatierungen sollen aber möglichst in der oben beschriebenen Konstellation funktionieren.
Gruss
MrMurphy
@@MrMurphy1
Es braucht nicht darauf eingegangen werden, dass SVG-Dateien auch anders in HTML-Dateien eingebunden werden können. Auch dass die CSS-Datei direkt in die HTML-Datei eingebunden werden kann.
Sherlock Holmes reversed: Wenn Du das Mögliche ausgeschlossen hast, dann ist das, was übrig bleibt, das Unmögliche.
LLAP 🖖
@@MrMurphy1
Möglicherweise liegt es einfach nur an der gegenwärtigen Implementierung in Browsern, dass das mit img
nicht geht.
Womit wir bei der Frage wären:
Es braucht nicht darauf eingegangen werden, dass SVG-Dateien auch anders in HTML-Dateien eingebunden werden können.
Warum nicht? Warum willst du unbedingt an img
festhalten?
LLAP 🖖
Hallo Gunnar Bittersmann,
Warum nicht? Warum willst du unbedingt an
img
festhalten?
Ich vermute, weil er ein schlankes Markup haben möchte. Die günstigste Alternative ist wohl
<svg>
<image xlink:href="bild.svg" src="bild.png"/>
</svg>
Leider gibts auf diese Weise kein alt
-Attribut.
Bis demnächst
Matthias
@@Matthias Apsel
Die günstigste Alternative ist wohl
… nicht die von dir genannte, sondern die von Sara im verlinkten Artikel genannte.
LLAP 🖖
Hallo Gunnar Bittersmann,
Die günstigste Alternative ist wohl
… nicht die von dir genannte, sondern die von Sara im verlinkten Artikel genannte.
Also inline? Das kollidiert aber mit einem schlanken Markup.
Bis demnächst
Matthias
@@Matthias Apsel
Also inline?
Nein. “If you intend using any advanced SVG features, such as CSS or scripting, the then HTML5 <object>
tag is your best bet.”
LLAP 🖖
Hallo
Warum nicht? Warum willst du unbedingt an
img
festhalten?
Darum geht es nicht. Ich beschäftige mich grade mit SVG und erstelle dazu viele Testdateien. Dabei fallen immer wieder Probleme auf, die nirgendwo beschrieben sind. Und genau zu den Problemen suche ich Antworten.
Deshalb nützen mir keine Antworten zu Problemen, die ich nicht habe.
Grafiken mittels img in HTML-Seiten einzubinden ist halt eine gebräuchliche Möglichkeit. Deshalb möchte ich schon damit in Verbindung stehende Probleme kennen.
Außerdem können mit img eingebundene Grafiken am flexibelsten beim Responsive Design berücksichtigt werden.
Bei Mediaevent.de habe ich zwischenzeitlich zur Einbindung mittels img folgenden Hinweis gefunden:
Links und Javascript in der SVG-Grafik werden nicht unterstützt
Das scheint dann auch für externe CSS-Dateien zu gelten.
Gruss
MrMurphy
@@MrMurphy1
Außerdem können mit img eingebundene Grafiken am flexibelsten beim Responsive Design berücksichtigt werden.
Was genau wäre da flexibler als bei per object
eingebundenen Grafiken?
LLAP 🖖
Hallo,
ich habe die HTML-Datei um die Einbindung mittels des object-Elements erweitert, obwohl das überhaupt nicht meine Frage war. Zumindest wird damit die gewünschte Ansicht der SVG-Datei gezeigt.
Ja, das scheint sich genau so flexibel wie beim img-Element zu verhalten.
Gruss
MrMurphy
Gibt es eine Lösung, wenn die SVG-Datei per img-Element in die HTML-Datei eingebunden werden soll und die externe CSS-Datei in die SVG-Datei eingebunden werden soll?
Du könntest das css auch direkt in die svg schreiben. Z.B. so:
<style type="text/css" >
<![CDATA[
circle {
stroke: #006600;
fill: #00cc00;
}
]]>
</style>
lg