SVG: Unterschied zwischen den Versionen

Aus KGS-Wiki
Keine Bearbeitungszusammenfassung
K (Vorlage XML)
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:


'''SVG (Scalable Vector Graphics''') ist ein Bild-Dateiformat, welches statt mit [[Pixel|Pixeln]] mit Linien arbeitet. Es basiert auf der Dateiform [[XML]].
'''SVG (Scalable Vector Graphics''') ist ein Bild-[[Dateiformat]], welches statt mit [[Pixel|Pixeln]] mit Linien arbeitet. Es basiert auf der Dateiform [[XML]].


Ein Vorteil des SVG-Formates gegenüber anderen Grafikformaten wie JPG oder PNG, insbesondere beim Arbeiten mit niedriger Datenverbindung, ist die Skalierbarkeit ohne Qualitätsverlust, gegenüber der Skalierbarkeit von pixel-basierten [[Rastergrafik|Rastergrafiken]], deren Auflösung entsprechend des Pixel-Systems schlechter wird.
Ein Vorteil des SVG-Formates gegenüber anderen Grafikformaten wie JPG oder PNG, insbesondere beim Arbeiten mit niedriger Datenverbindung, ist die Skalierbarkeit ohne Qualitätsverlust, gegenüber der Skalierbarkeit von pixel-basierten [[Rastergrafik|Rastergrafiken]], deren Auflösung entsprechend des Pixel-Systems schlechter wird.
Zeile 9: Zeile 9:
[[Datei:SVG_Coordinates.svg|mini|Der Ursprung des SVG-Koordinatensystems liegt in der oberen linken Ecke des Bildes]]
[[Datei:SVG_Coordinates.svg|mini|Der Ursprung des SVG-Koordinatensystems liegt in der oberen linken Ecke des Bildes]]


Eine SVG-Datei beginnt immer mit einem öffnenden <code><svg></code> und endet mit einem schließenden <code></svg></code>. Im öffnenden <code><svg></code> sollten zusätzlich noch die [[Attribut (Informatik)|Attribute]] <code>width</code> und <code>height</code> angegeben werden, die die Breite und Höhe des fertigen Bildes festlegen. Zu beachten ist die Schreibweise: eine Breite von 200 Einheiten wird als <code>width="200"</code> angegeben, wobei das Gleichheitszeichen und die Anführungszeichen wichtig sind.<syntaxhighlight lang="xml" line="1">
Eine SVG-Datei beginnt immer mit einem öffnenden {{XML|<svg>}} und endet mit einem schließenden {{XML|</svg>}}. Im öffnenden {{XML|<svg>}} sollten zusätzlich noch die [[Attribut (Informatik)|Attribute]] {{XML|width}} und {{XML|height}} angegeben werden, die die Breite und Höhe des fertigen Bildes festlegen. Zu beachten ist die Schreibweise: eine Breite von 200 Einheiten wird als {{XML|width{{=}}"200"}} angegeben, wobei das Gleichheitszeichen und die Anführungszeichen wichtig sind.<syntaxhighlight lang="xml" line="1">
<svg width="100" height="100">
<svg width="100" height="100">


Zeile 18: Zeile 18:


==Zeichen-Anweisungen==
==Zeichen-Anweisungen==
Jede Anweisung gibt für ein grafisches Objekt vor, wie es zu zeichnen ist. Dabei gibt es Anweisungen für Standardformen wie Kreise und Rechtecke und die sehr mächtige Form <code>path</code>, die quasi jede vorstellbare Gestalt annehmen kann.
Jede Anweisung gibt für ein grafisches Objekt vor, wie es zu zeichnen ist. Dabei gibt es Anweisungen für Standardformen wie Kreise und Rechtecke und die sehr mächtige Form {{XML|path}}, die quasi jede vorstellbare Gestalt annehmen kann.


Für alle ''kursiv'' gesetzten Platzhalter müssen bei der Umsetzung konkrete Werte eingegeben werden.
{{Achtung|Für alle rot gesetzten Platzhalter müssen bei der Umsetzung konkrete Werte eingesetzt werden.}}
*'''Gerade Linien''' fügt man mit der Anweisung {{XML|<line x1{{=}}"a" y1{{=}}"b" x2{{=}}"c" y2{{=}}"d"/>}} ein. Diese Linie verbindet dann die Punkte (''a''|''b'') und (''c''|''d'').
*'''Rechtecke''' fügt man mit der Anweisung {{XML|<rect x{{=}}"x" y{{=}}"y" width{{=}}"Breite" height{{=}}"Höhe"/>}} ein. ''x'' und ''y'' markieren dabei die Koordinaten der oberen linken Ecke des Rechtecks.
*'''Kreise''' fügt man mit der Anweisung {{XML|<circle cx{{=}}"x" cy{{=}}"y" r{{=}}"Radius"/>}} ein. ''cx'' und ''cy'' markieren dabei den Mittelpunkt des Kreises.
*'''Ellipsen''' fügt man mit der Anweisung {{XML|<ellipse cx{{=}}"x" cy{{=}}"y" rx{{=}}"halbe Breite" ry{{=}}"halbe Höhe"/>}} ein. ''cx'' und ''cy'' markieren dabei den Mittelpunkt der Ellipse.
*'''Polygone''', also eckige Formen mit beliebig vielen Ecken, fügt man mit der Anweisung {{XML|<polygon points{{=}}"a,b c,d e,f ... y,z"/>}} ein, wobei eine Form entsteht, die die Punkte (''a''|''b''), (''c''|''d''), (''e''|''f'') ... und (''y''|''z'') miteinander verbindet. Es müssen mindestens drei und dürfen beliebig viele Punkte angegeben werden
*'''Texte''' werden mit folgender Anweisung erzeugt: {{XML|<text x{{=}}"x" y{{=}}"y">Hierhin kommt der Text</text>}}. Am Punkt (''x''|''y'') beginnt dann eine gedachte waagerechte Linie, auf der der Text steht.
Diese Anweisungen geben nur vor, ''was'' gezeichnet werden soll, aber nicht genau, ''wie''. Details der Gestaltung wie Farben und Schriftarten können aber auch vorgegeben werden. Zunächst die Farben:


*'''Gerade Linien''' fügt man mit der Anweisung <code><line x1="</code>''a'' <code>y1="</code>''b''<code>" x2="</code>''c''<code>" y2="</code>''d''<code>" stroke="</code>''Linienfarbe''<code>"/></code> ein. Diese Linie verbindet dann die Punkte (''a''|''b'') und (''c''|d).
* {{XML|fill{{=}}"Farbe"}} kann in jede Anweisung hineingeschrieben werden, um für die Form eine Füllfarbe vorzugeben.
*'''Rechtecke''' fügt man mit der Anweisung <code><rect x="</code>''x''<code>" y="</code>''y''<code>" width="</code>''Breite''<code>" height="</code>''Höhe''<code>" fill="</code>''Füllfarbe''<code>" stroke="</code>''Linienfarbe''<code>"/></code> ein. ''x'' und ''y'' markieren dabei die Koordinaten der oberen linken Ecke des Rechtecks.
** Beispiele: {{XML|fill{{=}}"red"}} füllt rot, {{XML|fill{{=}}"#BADB01"}} füllt braun, {{XML|fill{{=}}"none"}} lässt die Form unausgefüllt und durchsichtig erscheinen
*'''Kreise''' fügt man mit der Anweisung <code><circle cx="</code>''x''<code>" cy="</code>''y''<code>" r="</code>''Radius''<code>" fill="</code>''Füllfarbe''<code>" stroke="</code>''Linienfarbe''<code>"/></code> ein. ''cx'' und ''cy'' markieren dabei den Mittelpunkt des Kreises.
* {{XML|stroke{{=}}"Farbe"}} kann in jede Anweisung hineingeschrieben werden, um für die Form eine Linienfarbe vorzugeben.
*'''Ellipsen''' fügt man mit der Anweisung <code><ellipse cx="</code>''x''<code>" cy="</code>''y''<code>" rx="</code>''halbe Breite''<code>" ry="</code>''halbe Höhe''<code>" fill="</code>''Füllfarbe''<code>" stroke="</code>''Linienfarbe''<code>"/></code> ein. ''cx'' und ''cy'' markieren dabei den Mittelpunkt der Ellipse.
** Beispiele: {{XML|stroke{{=}}"green"}} zeichnet eine grüne Umrandung, {{XML|stroke{{=}}"#C0FFEE"}} zeichnet eine helltürkise Umrandung, {{XML|stroke{{=}}"none"}} zeichnet gar keine Umrandung
*'''Polygone''', also beliebige Vielecke, fügt man mit der Anweisung <code><polygon points="</code>''a''<code>,</code>''b''<code> </code>''c''<code>,</code>''d''<code> </code>''e''<code>,</code>''f''<code> </code>...<code> </code>''y''<code>,</code>''z''<code>"/></code> ein, wobei eine Form entsteht, die die Punkte (''a''|''b''), (''c''|''d''), (''e''|''f'') ... und (''y''|''z'') miteinander verbindet. Es müssen mindestens drei und dürfen beliebig viele Punkte angegeben werden
Die Farben können entweder mit ihren [[Liste von Farbnamen|Namen]] oder einem [[RGB-Farbmodell|RGB-Hexcode]] angegeben werden.
*'''Texte''' werden mit folgender Anweisung erzeugt: <code><text x="</code>''x''<code>" y="</code>''y''<code>" fill="</code>''Füllfarbe''<code>" stroke="</code>''Linienfarbe''<code>" font-family="</code>''Schriftart''<code>"></code>''Hierhin kommt der Text''<code></text></code>. Am Punkt (''x''|''y'') beginnt dann eine gedachte waagerechte Linie, auf der der Text steht.


=== Beispiel ===
Für Texte können diverse [[Attribut (Informatik)|Eigenschaften]] festgelegt werden:
 
* {{XML|font-family{{=}}"Schriftart"}} legt die Schriftart fest.
* {{XML|font-size{{=}}"Schriftgröße"}} legt die Schriftgröße fest.
* {{XML|font-style{{=}}"italic"}} setzt den Text ''kursiv''
* {{XML|font-weight{{=}}"bold"}} setzt den Text '''fett'''


[[Datei:Tasse mit Text.svg|mini|rechts|Eine Kaffeetasse mit dem Text COFFEE LOVER]]
Von diesen direkten Änderungen abgesehen können SVG-Elemente auch mit [[CSS]]-Regeln gestaltet werden.


Der folgende SVG-Code erzeugt das Bild auf der rechten Seite:<syntaxhighlight lang="xml" line="1">
=== Beispiel ===
Der folgende SVG-Code erzeugt das Bild auf der rechten Seite:
[[Datei:Tasse mit Text.svg|mini|Das Bild, das von dem links stehenden Code erzeugt wird.|100x100px]]
<syntaxhighlight lang="xml" line="1">
<svg width="100" height="100">
<svg width="100" height="100">
<circle cx="40" cy="60" r="35" fill="red"/>
  <circle cx="40" cy="60" r="35" fill="red"/>
<rect x="5" y="25" width="70" height="35" fill="red"/>
  <rect x="5" y="25" width="70" height="35" fill="red"/>
<ellipse cx="75" cy="50" rx="20" ry="10" stroke="red" fill="none"/>
  <ellipse cx="75" cy="50" rx="20" ry="10" stroke="red" fill="none"/>
<polygon points="5,95 25,100 55,100 75,95" fill="red"/>
  <polygon points="5,95 25,100 55,100 75,95" fill="red"/>
<text x="13" y="50" fill="white" font-family="Source Sans Pro" font-weight="900">COFFEE</text>
  <text x="13" y="50" fill="white"
<text x="17" y="75" fill="white" font-family="Source Sans Pro" font-weight="900">LOVER</text>
        font-family="Source Sans Pro" font-weight="900">
    COFFEE
  </text>
  <text x="17" y="75" fill="white"
        font-family="Source Sans Pro" font-weight="900">
    LOVER
  </text>
</svg>
</svg>


</syntaxhighlight>
</syntaxhighlight>Der Körper der Tasse besteht dabei aus dem roten {{XML|circle}} und dem roten {{XML|rect}}, der Henkel wird von der {{XML|ellipse}} gebildet, das {{XML|polygon}} formt die Untertasse und zuletzt steht der Text in zwei Zeilen.


==Weblinks==
==Weblinks==


*[https://www.w3schools.com/graphics/svg_intro.asp SVG-Tutorial von W3Schools.com]
*[https://www.w3schools.com/graphics/svg_intro.asp SVG-Tutorial von W3Schools.com 🇬🇧]
*[https://developer.mozilla.org/en-US/docs/Web/SVG?retiredLocale=de SVG-Dokumentation von Mozilla]
*[https://developer.mozilla.org/en-US/docs/Web/SVG?retiredLocale=de SVG-Dokumentation von Mozilla 🇬🇧]
*[https://wiki.selfhtml.org/wiki/SVG SVG-Tutorial von SelfHTML]
*[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute Übersicht über alle SVG-Attribute von Mozilla] [https://developer.mozilla.org/en-US/docs/Web/SVG?retiredLocale=de 🇬🇧]
*[https://wiki.selfhtml.org/wiki/SVG SVG-Tutorial von SelfHTML 🇩🇪]
*[https://www.w3schools.com/colors/colors_names.asp Liste von Farbnamen von W3Schools.com {{Flagge|GB}}]
[[Kategorie:Bildcodierung]]
[[Kategorie:Bildcodierung]]
[[Kategorie:XML]]
[[Kategorie:XML]]

Aktuelle Version vom 3. August 2024, 23:08 Uhr

SVG (Scalable Vector Graphics) ist ein Bild-Dateiformat, welches statt mit Pixeln mit Linien arbeitet. Es basiert auf der Dateiform XML.

Ein Vorteil des SVG-Formates gegenüber anderen Grafikformaten wie JPG oder PNG, insbesondere beim Arbeiten mit niedriger Datenverbindung, ist die Skalierbarkeit ohne Qualitätsverlust, gegenüber der Skalierbarkeit von pixel-basierten Rastergrafiken, deren Auflösung entsprechend des Pixel-Systems schlechter wird.

SVG-Bilder bestehen aus einer Reihe von Zeichen-Anweisungen, die von geeigneten Programmen, z.B. von den meisten Webbrowsern in Zeichnungen umgesetzt werden können. Diese Zeichenanweisungen orientieren sich an einem gedachten Koordinatensystem, dessen Ursprung in der oberen linken Ecke des Bildes liegt. Das heißt, jeder Punkt des Bildes hat eine x-Koordinate und eine y-Koordinate, die x-Koordinate ist 0 am linken Bildrand und wächst nach rechts, die y-Koordinate ist 0 am oberen Bildrand und wächst nach unten.

Struktur eines SVG-Bildes

Der Ursprung des SVG-Koordinatensystems liegt in der oberen linken Ecke des Bildes

Eine SVG-Datei beginnt immer mit einem öffnenden <svg> und endet mit einem schließenden </svg>. Im öffnenden <svg> sollten zusätzlich noch die Attribute width und height angegeben werden, die die Breite und Höhe des fertigen Bildes festlegen. Zu beachten ist die Schreibweise: eine Breite von 200 Einheiten wird als width="200" angegeben, wobei das Gleichheitszeichen und die Anführungszeichen wichtig sind.

<svg width="100" height="100">

<!-- hierhin kommen die Zeichenanweisungen -->

</svg>

Zeichen-Anweisungen

Jede Anweisung gibt für ein grafisches Objekt vor, wie es zu zeichnen ist. Dabei gibt es Anweisungen für Standardformen wie Kreise und Rechtecke und die sehr mächtige Form path, die quasi jede vorstellbare Gestalt annehmen kann.

⚠️
Achtung

Für alle rot gesetzten Platzhalter müssen bei der Umsetzung konkrete Werte eingesetzt werden.

  • Gerade Linien fügt man mit der Anweisung <line x1="a" y1="b" x2="c" y2="d"/> ein. Diese Linie verbindet dann die Punkte (a|b) und (c|d).
  • Rechtecke fügt man mit der Anweisung <rect x="x" y="y" width="Breite" height="Höhe"/> ein. x und y markieren dabei die Koordinaten der oberen linken Ecke des Rechtecks.
  • Kreise fügt man mit der Anweisung <circle cx="x" cy="y" r="Radius"/> ein. cx und cy markieren dabei den Mittelpunkt des Kreises.
  • Ellipsen fügt man mit der Anweisung <ellipse cx="x" cy="y" rx="halbe Breite" ry="halbe Höhe"/> ein. cx und cy markieren dabei den Mittelpunkt der Ellipse.
  • Polygone, also eckige Formen mit beliebig vielen Ecken, fügt man mit der Anweisung <polygon points="a,b c,d e,f ... y,z"/> ein, wobei eine Form entsteht, die die Punkte (a|b), (c|d), (e|f) ... und (y|z) miteinander verbindet. Es müssen mindestens drei und dürfen beliebig viele Punkte angegeben werden
  • Texte werden mit folgender Anweisung erzeugt: <text x="x" y="y">Hierhin kommt der Text</text>. Am Punkt (x|y) beginnt dann eine gedachte waagerechte Linie, auf der der Text steht.

Diese Anweisungen geben nur vor, was gezeichnet werden soll, aber nicht genau, wie. Details der Gestaltung wie Farben und Schriftarten können aber auch vorgegeben werden. Zunächst die Farben:

  • fill="Farbe" kann in jede Anweisung hineingeschrieben werden, um für die Form eine Füllfarbe vorzugeben.
    • Beispiele: fill="red" füllt rot, fill="#BADB01" füllt braun, fill="none" lässt die Form unausgefüllt und durchsichtig erscheinen
  • stroke="Farbe" kann in jede Anweisung hineingeschrieben werden, um für die Form eine Linienfarbe vorzugeben.
    • Beispiele: stroke="green" zeichnet eine grüne Umrandung, stroke="#C0FFEE" zeichnet eine helltürkise Umrandung, stroke="none" zeichnet gar keine Umrandung

Die Farben können entweder mit ihren Namen oder einem RGB-Hexcode angegeben werden.

Für Texte können diverse Eigenschaften festgelegt werden:

  • font-family="Schriftart" legt die Schriftart fest.
  • font-size="Schriftgröße" legt die Schriftgröße fest.
  • font-style="italic" setzt den Text kursiv
  • font-weight="bold" setzt den Text fett

Von diesen direkten Änderungen abgesehen können SVG-Elemente auch mit CSS-Regeln gestaltet werden.

Beispiel

Der folgende SVG-Code erzeugt das Bild auf der rechten Seite:

Das Bild, das von dem links stehenden Code erzeugt wird.
<svg width="100" height="100">
  <circle cx="40" cy="60" r="35" fill="red"/>
  <rect x="5" y="25" width="70" height="35" fill="red"/>
  <ellipse cx="75" cy="50" rx="20" ry="10" stroke="red" fill="none"/>
  <polygon points="5,95 25,100 55,100 75,95" fill="red"/>
  <text x="13" y="50" fill="white"
        font-family="Source Sans Pro" font-weight="900">
    COFFEE
  </text>
  <text x="17" y="75" fill="white"
        font-family="Source Sans Pro" font-weight="900">
    LOVER
  </text>
</svg>

Der Körper der Tasse besteht dabei aus dem roten circle und dem roten rect, der Henkel wird von der ellipse gebildet, das polygon formt die Untertasse und zuletzt steht der Text in zwei Zeilen.

Weblinks

Abgerufen von „https://wiki.kah.gs/index.php?title=SVG&oldid=6115“