Was leistet das Vektorformat SVG für Sie?

mit Keine Kommentare

SVG steht für Scalable Vector Graphics und ist ein skalierbares Grafikformat für Vektorgrafiken. Im Gegen­satz zu den be­kannteren Bildformaten, wie zum Bei­spiel .JPG, werden nicht die Pixel, son­dern Pfade in einer Text­da­tei gespeichert. Es gibt mehrere Vek­tor­for­mate, SVG ist jenes für das Inter­net. Nutzen Sie die Vor­teile von SVG, wo es eben geht.

Informationen gemäss Stand vom 11.5.2023

SVG-DateiformatBild: Gordon Johnson auf Pixabay.com

Inhaltsverzeichnis: SVG

Kundengewinnungslabor

Vorteile der Vektor-Grafikformate

Dateiformate wie .JPG, .PNG oder .GIF sind allgemein be­kannt. Die Vektor­forma­te .SVG, .AI und .EPS sind weniger bekannt, obwohl sie ei­nige Vor­teile bie­ten:

  • Grösse
    Die Dateien sind (in der Regel) sehr kompakt. Kleine Dateigrössen = schnellerer Web­sei­ten­aufbau!
  • Skalierbarkeit / Barrierefrei
    Die Dateien lassen sich ohne Verlust auf beliebige Grafikgrössen skalieren.
  • Javascript
    Zusätzlich lassen sie sich mit Java­Script animieren.
  • Bilderanzeige ohne zusätzlichen Datei­auf­ruf
    Bilder lassen sich direkt in den HTML-Code schreiben, indem die Anweisung svg benutzt wird. Vorteile: Sie müs­sen keine Datei einbinden.
  • Text
    Die Dateien können mit einem simplen Texteditor bearbeitet und mit CSS for­matiert werden.
  • Im Browser
    SVG-Dateien lassen sich ganz einfach im Browser betrachten. Sie benötigen dafür kein weiteres Programm.
  • Open Source
    Das W3C hat das Dateiformat als freien Standard kreiert, weshalb die Auszeichnungs­sprache ohne Ein­schrän­kungen genutzt werden kann.

Nachteil der Vektor-Formate

Viele Plattformen unterstützen das For­mat aus Sicherheitsgründen noch nicht: WordPress, Facebook, Twitter.

Beispiel als TXT-Datei

Eine SVG-Datei kann als txt-Datei oder als SVG-Datei in Webseiten eingebunden wer­den.

Der Schmetterling oben wurde durch die Pro­grammier­sprache PHP eingebunden und interpretiert den Wert innert Bruchteilen einer Sekunde. Die Datei ist nur 408 Bytes gross! Den Inhalt des Dateiformats können Sie mit einem ein­fachen Text­editor an­se­hen. So sieht es aus:

‹svg xmlns="http://www.w3.org/ 2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="76" height="76" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF9800" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <line x1="12" y1="8" x2="12" y2="12" />
  <line x1="12" y1="16" x2="12.01" y2="16" />
</svg>

Wie erstelle und bearbeite ich SVG-Dateien?

Diverse Bildbearbeitungsprogramme beherrschen das SVG-Format. Es gibt Programme, die haben sich auf dieses Dateiformat spezialisiert, zum Beispiel der kostenlose Vektor­grafiken­editor Inkscape, der es für Windows, Linux und macOS gibt.

Kostenlose Vektorgrafik-Software
Vectr ist eine kostenlose Grafiksoftware, mit der Vektor­grafiken einfach und intuitiv erstellt werden können. Es ist ein einfaches und dennoch leistungs­starkes, plattformüber­greifendes Web- und Desktop-Tool, mit dem Sie Ihre Designs in die Realität umsetzen können.
vectr.com

KlickTipp E-Mail-Marketing

Mit der App Boxy SVG können Sie gerne entsprechende Zeichnungen mit dem Chrome-, Edge- und Opera-Brow­ser erstellen. Ziel des Boxy-SVG-Projekts ist es, das beste Werkzeug zur Bearbeitung von SVG-Dateien zu schaffen. Sowohl für Anfänger als auch für professionelle Webdesigner und Webentwickler. Auf jedem Gerät und Betriebs­system.
Boxy SVG UI wurde mit Blick auf Einfachheit und Benutzer­freundlichkeit entwickelt. Jedes Panel kann mit einem einzigen Klick oder einem Tastaturkürzel auf- und zugeklappt werden. Grafische Objekte wie Farbverläufe, Muster und Pfade können direkt auf der Leinwand manipuliert werden. Die Bear­beitungs­steuerungen sind kontext­sensitiv und erscheinen nur, wenn ein editierbares Objekt ausgewählt ist.

Mit dem Online-Werkzeug DrawSVG-Tool lassen sich auch SVG-Zeich­nun­gen erstellen. Dieses Dokument stellt die Verwendung von “Draw SVG” vor, einer kostenlosen Online-Zeichen­an­wen­dung für Designer und Ent­wickler drawsvg.org. Zusätzlich zu diesem Dokument kann das Show­cases-Tool weitere Details und Erklärungen mit inter­aktiven Demon­strationen bieten. Diese Anwendung verwendet das SVG-Zeichenformat, einen vom W3C defi­nier­ten Standard. Zeichnen Sie frei, speichern und drucken Sie Ihre Dokumente. Lernen Sie das volle Po­tenzial von Vek­tor­grafiken mit SVG kennen. Sie können eine Vielzahl von Entwürfen, Kunst als Ikone von DRAW-SVG, Mapping, tech­nische, Präsen­ta­tions­folien, etc. aus­führen.
DRAW SVGBild: drawsvg.org/doc/index.html

Mit dem Online-Tool Photopea kön­nen Sie SVG-Datein bearbeiten und beispiels­weise in einem anderen For­mat auf Ihrem Computer speichern.

Manche Programme schreiben beim Erstellen von SVG-Dateien Bemer­kungen in die Datei, die wiederum Speicher be­nö­tigen. Deshalb lassen sich auch diese Dateien ohne Verluste komprimieren. Verwenden Sie dazu das Pro­gramm SVGOMG oder den SVG Optimizer.

SVG als Icons

Bei Tabler Icons können Sie Icons im SVG-Format in der Grösse und Farbe bestimmen und anschliessend via Zwi­schen­ablage herunterladen.

Ihre animierte Symbol-Bibliothek
Loaf ist eine hoch­wertige SVG-Sym­bol-Biblio­thek im Paket in einem wunder­schön gestal­teten Iko­nen-Editor.

SVG Repo
500’000+ Open-licensed SVG Vektoren und Icons. Suchen, erforschen und bearbeiten Sie die am besten passenden kostenlosen Icons oder Vektoren für Ihre Projekte mit einer grossen Vielfalt an Vektorbibliotheken. Laden Sie kostenlose SVG-Vektoren und -Symbole für die kommerzielle Nutzung herunter.

Durchsuchen Sie mehr als 6’700 Vektoren und Icons, die von DryIcons entworfen wurden!

Auf diesem Server finden Sie weitere SVG Icons.

Kann ich SVG-Dateien überall verwenden?

Nein. Jede Plattform, auf der Sie Grafiken hoch­laden können, be­stimmt selbst, welche Gra­fik­formate sie akzep­tiert.

P.S.:

„Ich bleibe dran und halte Sie auf dem Lau­fen­den. Um keine Up­dates und News mehr zu verpassen, empfeh­le ich Ihnen das NewsAbo, das Sie hier kos­tenfrei abon­nieren können.“

Bitte klicken, verwandte Themen:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung im Umgang mit dem Internet. Er gründete 2001 ein Magazin, kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Werkzeuge konzentrierte. Als Agenturleiter hatte er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Ausserdem hatte Walser kleine Unternehmen in Bezug auf ihre Internetpräsenz beraten und war spezialisiert auf die Wartung und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.