Wie muss wohlgeformte SVG-Konstruktion aussehen?

[Tom Ralph]

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

[Robert B.]

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

[Matthias Scharwies]

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.

• SELF-Wiki: SVG/Tutorials/Einstieg

• SELF-Blog: SVG 2 (2020)

• SELF-Blog: SVG 2 — was lange währt …

Herzliche Grüße

Matthias Scharwies

[Der Martin]

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

[Matthias Scharwies]

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

[Gunnar Bittersmann]

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

[Tom Ralph]

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>

[Matthias Scharwies]

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

[ThomasM]

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

[Matthias Scharwies]

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

[Der Martin]

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

[Matthias Scharwies]

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

[Robert B.]

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

[ThomasM]

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

[Matthias Apsel]

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