SVG/Grafiken erstellen

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

In diesem Artikel werden Programme besprochen, mit denen Sie SVG-Grafiken erstellen können. Um diese SVG-Grafiken im Web perfekt nutzen zu können, sind einige Tricks zu beachten.


Adobe Illustrator oder Inkscape?[Bearbeiten]

Der kostenlose Open-Source-Editor Inkscape hat die beste Unterstüzung für SVG, eine Alternative ist Adobe Illustrator. Adobe erzeugt aber beim Exportieren eine Datei mit dem svg-Code und .AI source code, der ein schnelleres Editieren und Rendering durch Adobe-Produkte erlaubt.

Ein Editieren solcher Dateien würde den SVG-Code verändern, den .AI-Code jedoch nicht. Ein Workaround wäre es, in Inkscape gleich nach dem Öffnen alle nicht-SVG-Elemente zu entfernen. Alternativ könnten Sie schon beim Speichern im Illustrator die Häkchen bei den Optionen

"Illustrator-Bearbeitungsinformationen behalten"
"für Adobe SVG Viewer optimieren"

entfernen.

Boxy SVG[Bearbeiten]

Nachdem google mit svg-edit schon früher einen browser-basierten Editor anbot, wurde im April 2016 der Nachfolger boxySVG vorgestellt.[1]

Boxy SVG konzentriert sich auf wenige, aber für das Webdesign nötige Grundfunktionen wie Grundformen, Pfade, Symbole und Gruppierungen sowie Farben, Verläufe und Transformationen. Dabei legt es Wert auf einen übersichtlichen und sparsamen Ausgangscode.

Es ist unter allen verfügbaren Anwendungen der erste WYSIWYG-Editor, bei dem Formen bearbeitet werden können, ohne sich in einzelnen Vektoren verlieren zu müssen.

Boxy-SVG ist im google-play-Store kostenlos erhältlich und läuft auf allen Systemen mit dem Chrome-Browser.

TMs PocketSVGEditor[Bearbeiten]

In TMs PocketSVGEditor können Sie Code einfügen. Einige direkt nutzbare Snippets stehen ebenfalls zur Verfügung.

So können Sie mit SVG experimentieren, ohne dauernd zwischen Editor und Browser umschalten zu müssen.

weitere SVG-Editoren[Bearbeiten]

  • svg-edit (Ein vollständiger Vektorgrafik Editor im Browser (in JavaScript))
  • polylineTest (ein einfacher SVG-Editor von David Dailey)
  • Method Draw (ein komfortablerer SVG-Editor - Github Fork von SVG-Edit von Mark MacKay)

SVG in Data URI -Umwandler:[Bearbeiten]


Quellen[Bearbeiten]

  1. sitepoint: Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editorvom 21.04.2016