Rolf B: SVG - externe Ressourcen

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

--
sumpsi - posui - obstruxi
  1. 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

    --
    Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
    1. 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

      1. 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

        --
        Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
        1. 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

          --
          Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
    2. 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

      --
      sumpsi - posui - obstruxi
      1. 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

        --
        Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
  2. @@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?

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

    --
    „Ukončete, prosím, výstup a nástup, dveře se zavírají.“
    1. 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

      --
      sumpsi - posui - obstruxi
      1. 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

        --
        Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
        1. 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

          --
          Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
          1. Hallo Matthias,

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

            Gleich mal ein Issue eröffnet.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. 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

              --
              Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
              1. 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

                --
                sumpsi - posui - obstruxi
                1. 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

                  --
                  Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!