Was leistet das Vektor­for­mat 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 ge­speichert. 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 28.7.2022

SVG-DateiformatQuelle: Gordon Johnson auf Pixabay.com

Inhaltsver­zeich­nis: SVG

Kundengewinnungslabor

Vorteile der Vektor-Gra­fik­for­mate

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-For­ma­te

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 SVGQuelle: 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 Ver­luste kompri­mieren. 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.

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

Kann ich SVG-Dateien überall verwenden?

Nein. Jede Plattform, auf der Sie Gra­fiken 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, ver­wandte The­men:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Walser arbeitet seit 1995 mit dem In­ter­net. Er ist Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting- und Online-Tools-Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing-Manager. Er half frü­her als Agenturleiter Un­ter­neh­mern 100% mehr aus Ihrer Web­site heraus­zu­holen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert. Spezielle Interessen: Umweltschutz und Geopolitik.