SVG für Webdesigner in 60 Sekunden

Bitmap-Bilder wie JPEGs, GIFs und PNGs sehen beim Skalieren alle schlecht aus. Wenn Sie also die Qualität bei großen Abmessungen beibehalten möchten, müssen Sie die Dateigröße erhöhen. SVG-Bilder (was für skalierbare Vektorgrafiken steht) sehen jedoch unabhängig von den Bemaßungen, auf die sie skaliert werden, genau gleich aus und Sie behalten die gleiche Dateigröße. 

Schauen wir uns SVGs für das Webdesign in sechzig Sekunden an!

Grundlegendes zu SVG für Webdesign

 

SVGs können in CSS als Hintergrund verwendet werden oder Sie können sie als normale Bilder in den Inhalt einfügen. Sie können Symbole und Logos erstellen, die bei jeder Größe immer perfekt aussehen, sie können animiert und verwandelt werden, und Sie können coole Filter und Effekte anwenden (siehe SVG-Filter-Demo von Lucas Bebber unten). Sie können sogar ihre Färbung mit CSS steuern.

Innen ist eine SVG-Datei nur lesbarer, bearbeitbarer XML-Code. Und Text in SVGs ist normaler, indexierbarer, suchmaschinenfreundlicher Text.

Sie können SVGs mit praktisch jedem Vektorgrafikprogramm erstellen, z. B. Affinity Designer, Boxy SVG, Illustrator, Gravit Designer oder Inkscape. Erstellen Sie einfach Ihr Bild, exportieren Sie es als SVG-Datei und können Sie es auf Ihren Websites verwenden. Das ist SVG für Webdesign in sechzig Sekunden!

Weitere nützliche SVG-Ressourcen