Was ist SVG?

SVG (Scalable Vector Graphic), Scalable Vector Graphics sind XML-basierte 2D-Vektorgrafiken.

Es hat die Dateierweiterung .svg und wird als HTML-Tag erstellt, sodass es im Code-Editor bearbeitet werden kann, ohne dass ein Grafikeditor erforderlich ist.

Beim Zoomen des Bildes bei Verwendung von skalierbaren Vektorgrafiken gibt es keine Verschlechterung wie bei PNG und JPEG Formaten. Beim Bearbeiten des skalierbaren Vektorgrafikformats (Ändern der Breiten- und Höhenwerte) gibt es keinen Qualitätsverlust. Der Grund dafür ist, dass die Vektorstruktur verwendet wird und das Bild mit Code erstellt wird.

SVG-Unterschied zwischen Bilddateiformaten

Von den drei oben genannten verschiedenen Bildtypen sind PNG- und JPG-Formate in unterschiedlichen Größen verpixelt, während das skalierbare Vektorgrafikformat keine Verzerrung zeigt.

Hinweis: Wenn die Bilder vergrößert sind, ist der Grad der Verzerrung deutlicher zu erkennen.

Es kann ohne Bildverzerrung in der gewünschten Größe auf der Webseite verwendet werden. Wenn ein skalierbares Vektorgrafikformat bevorzugt wird, erzeugt es weniger Last als die PNG  und JPEG Formate. Darüber hinaus sollte beim Erstellen von Websites .svg in Bezug auf Symbolsätze und die Leistung von Logobildern bevorzugt werden.

SVG-Struktur

Die Codes im Tag <svg></svg> erzeugen den Inhalt des Bildes.

Was ist SVG Viewbox?

Mit der Eigenschaft viewBox werden ihre Position in der x-Ebene, ihre Position in der y-Ebene, ihre Breite und ihre Höhe festgelegt. Betrachtet man die Koordinatenebene, da die x und y Werte der viewBox-Eigenschaft im Beispiel auf 0 gesetzt sind, liegt sie genau in der Mitte.

The <circle></circle> tag’s position in the x plane with the cx="" property, the position in the y plane with the cy="" property, and the radius of the circle with the r="" (radius) property.

Die Position des Tags <circle></circle> in der x-Ebene mit der Eigenschaft cx="", die Position in der y-Ebene mit der Eigenschaft cy="" und der Radius des Kreises mit der Eigenschaft r="" (radius ) Eigentum.

Quelle:

https://developer.mozilla.org/en-US/docs/Web/SVG

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images