SVG mit externer CSS-Datei in HTML-Datei

[MrMurphy1]

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

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@Matthias Apsel

Die günstigste Alternative ist wohl

… nicht die von dir genannte, sondern die von Sara im verlinkten Artikel genannte.

LLAP 🖖

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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 🖖

[MrMurphy1]

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

[Gunnar Bittersmann]

@@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 🖖

[MrMurphy1]

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

[mark]

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