Tom Ralph: Wie muss wohlgeformte SVG-Konstruktion aussehen?

Hallo,

Ich muss zugeben, dass mich Scalable Vector Graphics zunehmend ein wenig ...verwirren.

Lautet hier nicht prinzipiell die alte Schule, wohlgeformte SVGs weisen im Header-Bereich zumindest Informationen zu Version und Namespace auf?

[e.g.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"

]

Diese Vorgabe scheint aber noch nicht mal von der Mozilla Dev-Platform (eine ja wohl doch seriöse Quelle) so wirklich durchwegs ernstgenommen zu werden, hier wird teils nur <svg>-Tags geöffnet und dann gleich die Grafiken "gezeichnet". (z.B. am Ende des Einstiegartikels zu SVGs fürs Web).

Wie muss denn nun eine minimale aber doch wohlgeformte SVG Konstruktion fürs Web aussehen? 😟

Danke für eure Anmerkungen!

LG, Tom

  1. Hallo Tom,

    Lautet hier nicht prinzipiell die alte Schule, wohlgeformte SVGs weisen im Header-Bereich zumindest Informationen zu Version und Namespace auf?

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"></svg>
    

    Als eigenständige Grafiken: Ja.

    Diese Vorgabe scheint aber noch nicht mal von der Mozilla Dev-Platform (eine ja wohl doch seriöse Quelle) so wirklich durchwegs ernstgenommen zu werden, hier wird teils nur <svg>-Tags geöffnet und dann gleich die Grafiken "gezeichnet". (z.B. am Ende des Einstiegartikels zu SVGs fürs Web).

    Der gemeinte Abschnitt ist überschrieben mit „How to include SVG code inside your HTML“. Wenn ich also SVG-Code direkt in HTML5-Code einfüge, brauche ich die Namensraum-Angabe nicht (bei XHTML hingegen schon).

    Wie muss denn nun eine minimale aber doch wohlgeformte SVG Konstruktion fürs Web aussehen? 😟

    Das kommt darauf an, ob die Grafik eine einzelne Datei darstellt oder direkt im HTML-Code notiert wird.

    Viele Grüße
    Robert

    1. Servus!

      Hallo Tom,

      Lautet hier nicht prinzipiell die alte Schule, wohlgeformte SVGs weisen im Header-Bereich zumindest Informationen zu Version und Namespace auf?

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <svg xmlns="http://www.w3.org/2000/svg"></svg>
      

      Als eigenständige Grafiken: Ja.

      Jein.

      Im SELF-Wiki wird's auch noch so gelehrt: SVG/Elemente/svg#Standalone_SVG-Dokumente

      Aber auch das geht:

      <svg xmlns="http://www.w3.org/2000/svg">
        ...
      </svg>
      

      Du wirst SVG-Grafiken wohl nur in Browsern öffnen. Diese verstehen mittlerweile SVG2, in denen die XML-Deklaration und der Doctype nicht mehr nötig ist.

      Auch die Angabe eines XLink-Namensraums ist nicht mehr nötig, wenn man einfache aus HTML bekannte href-Attribute verwendet.

      Herzliche Grüße

      Matthias Scharwies

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      1. Hallo,

        Du wirst SVG-Grafiken wohl nur in Browsern öffnen.

        oder auch in beliebigen anderen Bildbetrachtern.
        Oder in Inkscape zum Bearbeiten.
        In ganz einfachen, seltenen Fällen auch in einem Texteditor zum Bearbeiten.

        Ciao,
         Martin

        --
        Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
        1. Servus!

          Hallo,

          Du wirst SVG-Grafiken wohl nur in Browsern öffnen.

          oder auch in beliebigen anderen Bildbetrachtern.

          Als ich anfing, den SVG-Bereich im Wiki zu erstellen gab es zwei Tutorials in Deutschland: https://www.selfsvg.info/ und Aptico. Beide verwiesen lang und breit auf den "Adobe SVG Viewer" und andere Plugins. Glücklicherweise hat sich das erledigt.

          Oder in Inkscape zum Bearbeiten.

          Imkscape hat an SVG2 mitgearbeitet und viele neue Vorschläge (mesh, hatch) gemacht, die die Browser-Hersteller ignorierten. Deshalb geh ich davon aus, dass inkscape SVG2 rendern kann.

          In ganz einfachen, seltenen Fällen auch in einem Texteditor zum Bearbeiten.

          Da brauchst du keine Wohlgeformtheit, weil du die Grafik dort nicht rendern willst, sondern im Markup arbeitest.

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
  2. @@Tom Ralph

    Lautet hier nicht prinzipiell die alte Schule, wohlgeformte SVGs weisen im Header-Bereich zumindest Informationen zu Version und Namespace auf?

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"
    
    • “SVG is an application of XML and is compatible with the Extensible Markup Language (XML) 1.0 Recommendation” [SVG 1.1 §1.4]
    • Bei XML 1.0 ist die XML-Deklaration (Angabe der Version) optional. [XML 1.0 §2.8]
    • Bei Verwendung von UTF-8 (und nichts anderes sollte man verwenden) ist die Angabe der Zeichencodierung optional. [XML 1.0 §4.3.3]
    • Ich bin mir nicht sicher, ob sich irgendein Stück SVG-verarbeitender Software für die Standalone Document Declaration [XML 1.0 §2.9] interessiert.

    Ich denke, die XML-Deklaration sollte bei SVG nicht erforderlich sein.

    Die Angabe des Namensraums ist bei Einbettung in HTML nicht erforderlich; sonst schon. (Bei interaktiven SVGs kann auch die Angabe des xlink-Namensraums erforderlich sein.) Schadet auch nicht, sie immer zu verwenden.

    LLAP 🖖

    --
    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
  3. Vielen lieben Dank euch allen! 👍

    Gehe ich also recht in der Annahme, dass, wenn ich eine SVG als <img src="SVG.svg" alt="Beschreibung" > in HTML5 einbinde, folgendes Markup der SVG valide und völlig ausreichend ist?

    <svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="blue" />
    </svg>
    
    1. Servus!

      Vielen lieben Dank euch allen! 👍

      Gehe ich also recht in der Annahme, dass, wenn ich eine SVG als <img src="SVG.svg" alt="Beschreibung" > in HTML5 einbinde, folgendes Markup der SVG valide und völlig ausreichend ist?

      <svg width="100%" height="100%">
      <rect width="100%" height="100%" fill="blue" />
      </svg>
      

      Nein, das würde für die direkte Einbindung in HTML ausreichen.

      Als Standalone benötigst du noch die Namensraumangabe:

      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" fill="blue" />
      </svg>
      

      BTW: die Breiten- und Höhenangaben des rect-Elements müssen dimensionslose Einheiten sein.

      Herzliche Grüße

      Matthias Scharwies

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      1. Hallo Matthias,

        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
          <rect width="100" height="100" fill="blue" />
        </svg>
        

        BTW: die Breiten- und Höhenangaben des rect-Elements müssen dimensionslose Einheiten sein.

        Nein, hier gehst Du wohl vom img-Element in HTML aus. SVG erlaubt die üblichen, auch aus CSS bekannten, Einheiten.

        In der Regel wird man aber im Web-Kontext durchaus nur Zahlenwerte verwenden. Bei für den Druck bestimmten Grafiken eher mm, cm, in.

        Grüße,
        Thomas

        1. Servus!

          Hallo Matthias,

          Nein, hier gehst Du wohl vom img-Element in HTML aus. SVG erlaubt die üblichen, auch aus CSS bekannten, Einheiten.

          In der Regel wird man aber im Web-Kontext durchaus nur Zahlenwerte verwenden. Bei für den Druck bestimmten Grafiken eher mm, cm, in.

          Danke!

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
        2. Hallo,

          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <rect width="100" height="100" fill="blue" />
          </svg>
          

          [...]

          In der Regel wird man aber im Web-Kontext durchaus nur Zahlenwerte verwenden.

          und wie werden die dann interpretiert? Also welche Einheit wird dann impliziert?

          Bei für den Druck bestimmten Grafiken eher mm, cm, in.

          Das ist dann unmissverständlich.

          Ciao,
           Martin

          --
          Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
          1. Servus!

            In der Regel wird man aber im Web-Kontext durchaus nur Zahlenwerte verwenden.

            und wie werden die dann interpretiert? Also welche Einheit wird dann impliziert?

            SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten

            "In SVG können Sie Werte mit oder ohne Maßeinheiten angeben. Eine dimensionslose Größe (engl. unitless value) gilt als Benutzereinheit, der Wert wird aber als entsprechende Anzahl „px“ angenommen. Dies ist sinnvoll, weil so fehleranfällige Umrechnungen von Einheiten vermieden werden. Es sind aber alle Maßeinheiten von Längenangaben möglich."

            Bei für den Druck bestimmten Grafiken eher mm, cm, in.

            Das ist dann unmissverständlich.

            Aber nur im print-Bereich

            Herzliche Grüße

            Matthias Scharwies

            --
            25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
        3. Moin,

          BTW: die Breiten- und Höhenangaben des rect-Elements müssen dimensionslose Einheiten sein.

          Nein, hier gehst Du wohl vom img-Element in HTML aus. SVG erlaubt die üblichen, auch aus CSS bekannten, Einheiten.

          Korrekt. Zitat aus der SVG 1.1-Spezifikation des svg-Elements:

          Attribute definitions:

          width = "<length>"
          For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of the element. If the attribute is not specified, the effect is as if a value of 100% were specified.

          height = "<length>"
          For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded ‘svg’ elements, the height of the rectangular region into which the ‘svg’ element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of the element. If the attribute is not specified, the effect is as if a value of 100% were specified.

          Viele Grüße
          Robert

  4. Hallo Tom,

    Hallo, Diese Vorgabe scheint aber noch nicht mal von der Mozilla Dev-Platform (eine ja wohl doch seriöse Quelle) so wirklich durchwegs ernstgenommen zu werden, hier wird teils nur <svg>-Tags geöffnet und dann gleich die Grafiken "gezeichnet". (z.B. am Ende des Einstiegartikels zu SVGs fürs Web).

    Es wurde hier XML-technisch schon alles gesagt. Interessant ist am Ende der verlinkten Ressource »Active Learning: Playing with SVG«.

    Meine Spielwiese (dankenswerterweise auch im Wiki erwähnt) ist etwas umfangreicher und mit mehr Komfort ausgestattet. Hat auch gerade einige Erweiterungen wie größere SVG-Ausgabe und Farbauswahl erhalten.

    Grüße,
    Thomas

    1. Hallo ThomasM,

      Meine Spielwiese (dankenswerterweise auch im Wiki erwähnt) ist etwas umfangreicher und mit mehr Komfort ausgestattet.

      Dieses Tool habe ich auch schon das eine oder andere Mal benutzt. Ich habe jetzt im Forum das nofollow rausgenommen.

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.