In SVG

Was ist SVG? Vielleicht haben viele Leute inzwischen von SVG gehört, aber sie wissen nicht unbedingt, was SVG ist: SVG (Scalable Vector Graphics Ein Haufen unverständlicher englischer ) skalierbare Vektorgrafiken, die das XML-Format verwenden Definieren Sie vektorbasierte Grafiken für das Netzwerk. Ihr Merkmal ist, dass die Grafikqualität nicht verloren geht, wenn das Bild vergrößert oder in der Größe geändert wird. Gleichzeitig handelt es sich um einen W3C-Standard wie DOM.

Bitmaps und Vektorgrafiken werden hier erklärt:

Bitmap, das Bild, das wir oft sehen, ist eine Ansammlung von Geschäften, die dicht auf einer Ebene angeordnet sind, was bedeutet, dass sie aus Punkten bestehen. Und wenn Sie es vergrößern, werden die entsprechenden Punkte vergrößert, wodurch das Bild sehr unscharf und grob aussieht.

Vektorgrafiken, auch objektorientierte Bilder oder Zeichenbilder genannt, werden mathematisch als eine Reihe von Punkten definiert, die durch Linien verbunden sind. Grafische Elemente in Vektordateien werden als Objekte bezeichnet. Jedes Objekt ist eine eigenständige Einheit mit Eigenschaften wie Farbe, Form, Umriss, Größe und Bildschirmposition. Sein Merkmal ist, dass das Bild nach der Vergrößerung unabhängig von der Auflösung nicht verzerrt wird und sich für Grafikdesign, Textdesign, einige Logo-Designs, Layout-Designs usw. eignet. Zu den Vektorgrafikformaten gehören CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML usw.

(ps: Der folgende Inhalt dieses Aufsatzes stammt teilweise von W3Cschool)

Ein einfaches SVG

<span style="color: #0000ff;"><?</span><span style="color: #ff00ff;">xml version="1.0" standalone="no"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;">
  stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span>

SVG-Code-Analyse:

Die erste Zeile enthält die XML-Deklaration. Bitte beachten Sie das Standalone-Attribut! Diese Eigenschaft gibt an, ob diese SVG-Datei „eigenständig“ ist oder Verweise auf externe Dateien enthält. standalone="no" bedeutet, dass das SVG-Dokument auf eine externe Datei verweist – in diesem Fall eine DTD-Datei.

Die zweite und dritte Zeile verweisen auf diese externe SVG-DTD. Die DTD befindet sich unter „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“. Diese DTD befindet sich beim W3C und enthält alle erlaubten SVG-Elemente.

SVG-Code beginnt mit dem

SVGs wird zum Erstellen eines Kreises verwendet. Die Eigenschaften cx und cy definieren die x- und y-Koordinaten des Kreismittelpunkts. Wenn diese beiden Eigenschaften weggelassen werden, wird der Punkt auf (0, 0) gesetzt. Das r-Attribut definiert den Radius des Kreises.

Die Eigenschaften „Strich“ und „Strichbreite“ steuern, wie der Umriss einer Form angezeigt wird. Wir legen den Umriss des Kreises auf eine Breite von 2 Pixel und einen schwarzen Rand fest. Die Eigenschaft „fill“ legt die Farbe innerhalb der Form fest. Wir setzen die Füllfarbe auf Rot.

Das schließende Tag schließt das SVG-Element und das Dokument selbst.

Hinweis: Alle offenen Tags müssen ein schließendes Tag haben!

Vorteile von SVG

• SVG kann von vielen Tools gelesen und geändert werden (Notepad kann auch einfach geöffnet und geändert werden)
• SVG ist kleiner und komprimierbarer als JPEG- und GIF-Bilder.
• SVG ist skalierbar
• SVG-Bilder können in jeder Auflösung in hoher Qualität gedruckt werden
• SVG kann vergrößert werden, ohne dass die Bildqualität verloren geht
• Text in SVG-Bildern ist optional und durchsuchbar (ideal zum Erstellen von Karten)
• SVG kann mit Technologien wie Java ausgeführt werden
• SVG ist ein offener Standard
• SVG-Dateien sind reines XML

SVG-Dateien können mit den folgenden Tags in HTML-Dokumente eingebettet werden: ,