Das praxisnahe Schweizer Online-Marketing Magazin
Im Ratgeber-Magazin erfahren Leser praxisnahe Tipps zu Online-Marketing, Webdesign, Website-Optimierung und Online-Tools!
Über 2'000 Links für Webmaster und Websiteverantwortliche. RSS   Facebook   Twitter


Gratis NewsAboNews­abo Tipps: Als Danke­schön er­hal­ten Sie die PDF-Reporte „Alles was Sie über die Verlin­kung wissen müssen“ und „Wie Sie mit meiner Hilfe Tools fin­den, mit denen Ihre Web­site effek­ti­ver wird“ gra­tis!

„Was leistet das Grafikformat SVG für Sie?“

Informationen gemäss Stand vom 10.10.2020

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, sondern Pfade in einer Textdatei gespeichert.

Was leistet das Grafikformat SVG
Quelle: Bild von Gordon Johnson auf Pixabay

ANZEIGE
Newsletter 14 Tage gratis

„Inhaltsverzeichnis: SVG“

nach oben

„Vorteile des SVG-Grafikformates“

Dateiformate wie .JPG oder .GIF sind allgemein bekannt. Das Grafikformat .SVG ist weniger bekannt, obwohl es einige Vorteile bietet:

Vorteile

nach oben

„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 Texteditor ansehen. 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>

OK, sehr technisch. Nun sehen wir uns ein paar Beispiele an:

nach oben

„Beispiel einer SVG-Datei“

Dieses Grafikformat ist ideal, um es stufenlos zu vergrössern oder zu verkleinern.

SVG-Datei

SVG-Datei

SVG-Datei

Der Schmetterling oben auf dieser Seite ist auch eine SVG-Grafik. Sie ist 154 KB schwer.

Erfahren Sie jetzt, wie Sie SVG-Dateien erstellen und überarbeiten.

nach oben

„Wie erstelle und bearbeite ich SVG-Dateien?“

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

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

Mit der App Boxy SVG können Sie gerne entsprechende Zeichnungen mit dem Chrome-, Edge- und Opera-Browser 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 Betriebssystem.
Boxy SVG UI wurde mit Blick auf Einfachheit und Benutzerfreundlichkeit 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-Zeichnungen erstellen. Dieses Dokument stellt die Verwendung von "Draw SVG" vor, einer kostenlosen Online-Zeichenanwendung für Designer und Entwickler drawsvg.org. Zusätzlich zu diesem Dokument kann das Showcases-Tool weitere Details und Erklärungen mit interaktiven Demonstrationen bieten. Diese Anwendung verwendet das SVG-Zeichenformat, einen vom W3C definierten Standard. Zeichnen Sie frei, speichern und drucken Sie Ihre Dokumente. Lernen Sie das volle Potenzial von Vektorgrafiken mit SVG kennen. Sie können eine Vielzahl von Entwürfen, Kunst als Ikone von DRAW-SVG, Mapping, technische, Präsentationsfolien, etc. ausführen.
DrawSVG-Tool
Quelle: drawsvg.org/doc/index.html

Mit dem Online-Tool Photopea können Sie SVG-Datein bearbeiten und beispielsweise in einem anderen Format auf Ihrem Computer speichern.

SVG-Optimiser: Durch die Optimierung der Schreibweise von SVGs ist es oft möglich, die Dateigrösse zu reduzieren und die Arbeit mit ihnen zu erleichtern. Dateien, die in Inkscape oder Illustrator erstellt wurden, lassen sich besonders gut optimieren.

Manche Programme schreiben beim Erstellen von SVG-Dateien Bemerkungen in die Datei, die wiederum Speicher benötigen. Deshalb lassen sich auch diese Dateien ohne Verluste komprimieren. Verwenden Sie dazu das Programm SVGOMG oder den SVG Optimizer.

nach oben

„SVG als Icons“

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

Ihre animierte Symbol-Bibliothek
Loaf ist eine hochwertige SVG-Symbol-Bibliothek im Paket in einem wunderschön gestalteten Ikonen-Editor.

nach oben

„Kann ich SVG-Dateien überall verwenden?“

Nein. Jede Plattform, auf der Sie Grafiken hochladen können bestimmt selbst, welche Grafikformate sie akzeptiert.

nach oben

„P.S.“

„Wir bleiben dran und halten Sie auf dem Laufenden. Um keine Updates und News mehr zu verpassen, empfehlen wir Ihnen unseren NewsAbo Newsletter, den Sie hier kostenfrei abonnieren können.“

Autor: Walter B. Walser, kundennutzen.ch

AutorWalter B. Walser ist Online-Marke­ting Manager und Re­dak­tor. Er half frü­her Unter­neh­mern 100% mehr aus Ihrer Web­site heraus­zuholen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­site-Pflege, Web­site-Opti­mie­rung und das Online-Mar­ke­ting mit Online-Tools spe­ziali­siert.
„Sie dürfen ihn gerne kontak­tie­ren!“

nach oben