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 Gegensatz zu den bekannteren Bildformaten, wie zum Beispiel .JPG, werden nicht die Pixel, son­dern Pfade in einer Text­da­tei ge­speichert. Es gibt mehrere Vek­torformate, SVG ist jenes für das Internet. Nutzen Sie die Vorteile von SVG, wo es eben geht.

Informationen gemäss Stand vom 21.4.2022

SVG-Dateiformat
Quelle: Gordon Johnson auf Pixabay.com

Inhaltsver­zeich­nis: SVG

Kundengewinnungslabor

Vorteile der Vektor-Grafikformate

Dateiformate wie .JPG, .PNG oder .GIF sind allgemein bekannt. Die Vektorformatw .SVG, .AI und .EPS sind weniger bekannt, obwohl sie ei­nige Vor­teile bieten:

  • 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 JavaScript animieren.
  • Bilderanzeige ohne zusätzlichen Dateiaufruf
    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 formatiert 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 Format 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 werden.

Diese Datei wurde durch die Programmiersprache 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 einfach 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 Bearbeitungssteuerungen sind kontextsensitiv 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 SVG
Quelle: drawsvg.org/doc/index.html

Mit dem Online-Tool Photopea kön­nen Sie SVG-Datein bearbeiten und beispielsweise 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.