SVG - externe Ressourcen

[Rolf B]

Hallo alle,

ich spiele etwas mit SVG herum und ich habe im Prinzip die folgende Struktur:

demo1.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
        href="common.css" type="text/css"/>

  <style>
    rect.green2 { color: red; }
  </style>

  <use href="demo2.svg#rects" x="0" y="0" width="200" height="100"></use>
</svg>

demo2.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <style>
    /* Nur als Experiment */
    rect.green2 { color: yellow; }
  </style>

  <symbol id="rects" viewBox="0 0 60 30">
    <rect class="green1" x="5" y="5" width="20" height="20"></rect>
    <rect class="green2" x="35" y="5" width="20" height="20"></rect>
  </symbol>
</svg>

common.css:

rect.green1 {
  fill: lime;
}

Mit Chromium bleiben beide Quadrate schwarz. Mit Firefox wird immerhin das green1-Quadrat grün, also das, das aus dem externen Stylesheet gefärbt wird.

Das andere Quadrat bleibt schwarz. D.h. das interne Stylesheet in demo1 wird auch von Firefox nicht auf das ge-use-te Symbol angewendet. Das externe Stylesheet dagegen schon - sehr merkwürdig.

Wenn ich das #rects-Symbol nach demo1.svg herüberhole und als internes Symbol einbinde, lässt es sich färben. Aber das will ich nicht - ich möchte mir in demo2 eine Figurenbibliothek für mehrere andere SVGs erstellen.

Bevor ich hier Zeter und Buggio schreie - sollte sowas überhaupt klappen? Wenn ich mir diesen Chromium-Bugreport anschaue, bin ich mir nicht mehr so sicher. Aber warum tut's der Fuchs dann mit einem externen Stylesheet, und wie style ich dann Symbole überhaupt?

Meine Figur, die ich da erstellen will, würde nämlich von ein paar Styles sehr profitieren (mit custom properties und calc(...) - das würde mir eine Menge Schreibarbeit sparen).

Rolf

[Matthias Scharwies]

Servus!

Hallo alle,

ich spiele etwas mit SVG herum und ich habe im Prinzip die folgende Struktur:

demo1.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
        href="common.css" type="text/css"/>

  <style>
    rect.green2 { color: red; }
  </style>

  <use href="demo2.svg#rects" x="0" y="0" width="200" height="100"></use>
</svg>

demo2.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <style>
    /* Nur als Experiment */
    rect.green2 { color: yellow; }
  </style>

  <symbol id="rects" viewBox="0 0 60 30">
    <rect class="green1" x="5" y="5" width="20" height="20"></rect>
    <rect class="green2" x="35" y="5" width="20" height="20"></rect>
  </symbol>
</svg>

common.css:

rect.green1 {
  fill: lime;
}

Mit Chromium bleiben beide Quadrate schwarz. Mit Firefox wird immerhin das green1-Quadrat grün, also das, das aus dem externen Stylesheet gefärbt wird.

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element!

Das andere Quadrat bleibt schwarz. D.h. das interne Stylesheet in demo1 wird auch von Firefox nicht auf das ge-use-te Symbol angewendet. Das externe Stylesheet dagegen schon - sehr merkwürdig.

Wenn ich das #rects-Symbol nach demo1.svg herüberhole und als internes Symbol einbinde, lässt es sich färben. Aber das will ich nicht - ich möchte mir in demo2 eine Figurenbibliothek für mehrere andere SVGs erstellen.

Bevor ich hier Zeter und Buggio schreie - sollte sowas überhaupt klappen? Wenn ich mir diesen Chromium-Bugreport anschaue, bin ich mir nicht mehr so sicher. Aber warum tut's der Fuchs dann mit einem externen Stylesheet, und wie style ich dann Symbole überhaupt?

Meine Figur, die ich da erstellen will, würde nämlich von ein paar Styles sehr profitieren (mit custom properties und calc(...) - das würde mir eine Menge Schreibarbeit sparen).

Rolf

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

<use href="demo2.svg#rects" x="0" y="0" width="200" height="100"></use>

Mit Chromium bleiben beide Quadrate schwarz. Mit Firefox wird immerhin das green1-Quadrat grün, also das, das aus dem externen Stylesheet gefärbt wird.

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element!

Ist das neu, dass man statt xlink:href bloß href im use-Element schreiben darf?

Gruß
Kalk

[Matthias Scharwies]

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element!

Ist das neu, dass man statt xlink:href bloß href im use-Element schreiben darf?

Interessanterweise ging’s im Firefox und IE6 schon immer , Safari zog erst 2019 nach.

https://wiki.selfhtml.org/wiki/SVG/Element/a#Referenzieren_in_SVG

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element!

Ist das neu, dass man statt xlink:href bloß href im use-Element schreiben darf?

Interessanterweise ging’s im Firefox und IE6 schon immer , Safari zog erst 2019 nach.

https://wiki.selfhtml.org/wiki/SVG/Element/a#Referenzieren_in_SVG

War mobil unterwegs und hatte zu viel Sonne: SVG gab es im IE erst ab IE9, dann aber gleich mit href-Unterstützung; laut Caniuse sind es aber immer noch nur rund 95% , die das können. (Gibt es so viele, die mit Alt-Browsern unterwegs sind?)

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element

Und dann @import? Ich glaube nicht, dass das was ändert, aber ich probiere es aus.

Die Idee mit Link im xhtml Namespace kam von Tante Google und der Spec

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Das Link-Element gibt‘s doch nur in HTML, nimm ein Style-Element

Hat style in SVG die Möglichkeit, externe Stylesheets einzubinden? Hat es in HTML nicht...

Die Idee mit Link im xhtml Namespace kam von Tante Google.

Sorry, Da muss ich das Self-Wiki ändern.

https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css

You can use either <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="styles.css"/> or <style>@import url(styles.css);</style> inside the <svg> element.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
        href="common.css" type="text/css"/>

Warum nicht die für XML vorgesdehene Methode, Stylesheets einzubinden?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

von den 4 "testen Sie es in ihrem Browser" Buttons auf dieser Seite produziert nur einer (externes Stylesheet) etwas sinnvolles. Der Rest zeigt die Style-Rules einfach als Text an.

Da der Artikel von 2006 ist - kann es sein, dass seine Inhalte nicht mehr der Realität entsprechen? Oder zumindest von Chrome für Android ignoriert werden?

Ich sitze nämlich im Moment an einem Tablet, habe wenig Zeit und kann das nicht näher ausprobieren.

Rolf

[Matthias Scharwies]

Servus!

Hallo Gunnar,

von den 4 "testen Sie es in ihrem Browser" Buttons auf dieser Seite produziert nur einer (externes Stylesheet) etwas sinnvolles. Der Rest zeigt die Style-Rules einfach als Text an.

Die Style-Rules und den Inhalt der XML-Dokumente. In den weiteren Bsp. geht es um alternative Stylesheets, die in der HTML-Welt ja auch durch media queries ersetzt wurden.

Da der Artikel von 2006 ist - kann es sein, dass seine Inhalte nicht mehr der Realität entsprechen? Oder zumindest von Chrome für Android ignoriert werden?

Das erste Bsp. funzt auf Safari Mobile und alle Win/Desktop-Browsern. aber wir wollen ja weg von SVG1 und der XML-Deklaration.

Ich sitze nämlich im Moment an einem Tablet, habe wenig Zeit und kann das nicht näher ausprobieren.

@@Rolf B

[[EDIT]] Ich habe mal einen Absatz im Standalone-Tutorial dazu geschrieben - zum Testen komme ich heute nicht mehr! [[/EDIT]]

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Auch die MDN empfiehlt das link-Element:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS#result

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

jau. Aber falsch: da fehlt der xhtml Namespace. <link> ist kein SVG Element.

Gleich mal ein Issue eröffnet.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

jau. Aber falsch: da fehlt der xhtml Namespace. <link> ist kein SVG Element.

Gleich mal ein Issue eröffnet.

+1 Danke, jetzt verbesserst du sogar schon die MDN!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

na logo, wer weiß es denn besser als Selfhtml 😉

Ich hab auch mal hier und da das Wiki ergänzt.

<link> und <?xml-stylesheet ...?> funktionieren in inline-SVGs übrigens nicht, die funktionieren nur in Standalone SVGs. @import habe ich im inline nicht probiert, aber ich würde annehmen, dass das geht.

Auf die vertrackten Verhältnisse beim Einbinden von CSS in Standalone SVGs bin ich noch nicht eingegangen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

na logo, wer weiß es denn besser als Selfhtml 😉

Ich hab auch mal hier und da das Wiki ergänzt.

<link> und <?xml-stylesheet ...?> funktionieren in inline-SVGs übrigens nicht, die funktionieren nur in Standalone SVGs. @import habe ich im inline nicht probiert, aber ich würde annehmen, dass das geht.

Auf die vertrackten Verhältnisse beim Einbinden von CSS in Standalone SVGs bin ich noch nicht eingegangen.

Ich habe einen Abschnitt incl. Live-Demo geschrieben und dann (lokal, aber) nicht im Wiki gespeichert. Das Live-Beispiel scheitert,

1. weil der Beispiel-Namensraum nur .html aber kein .svg ausführt.
2. ein Hochladen als Bild in den Datei:Namensraum daran scheitert, dass der Upload-Manager den html-Namespace nicht akzeptiert.

Das wäre irgendwann mal was für src.selfhtml.org.

Andererseits ist es wirklich ein Nischenthema.

Herzliche Grüße

Matthias Scharwies