Kategorien
Bilder & Vektorgrafiken bearbeiten Design Editoren Webdesign

So zeichnest du SVG online mit der Web-App Method Draw

Adobe Illustrator und auch das kostenlose Inkscape beherrschen SVG und können Vektorgrafiken in diesem Format abspeichern. Doch es geht auch ohne. Mit der Webanwendung Method Draw zeichnest du Vektorgrafiken ähnlich wie in einer klassischen Desktopanwendung und kannst diese direkt im Browser testen. Neben SVG beherrscht Method Draw das bitmap-basierte PNG-Format.

So zeichnest du SVG online mit der Web-App Method Draw

Übersichtliche Bedienoberfläche für schnelles Zeichnen

Wenn du Method Draw in deinem Browser aufrufst, stellst du fest, dass die Webanwendung sich von der Bedienoberfläche eines klassischen Zeichenprogramms nicht allzu sehr unterscheidet. Sie ist nur deutlich aufgeräumter und reduzierter. In der Werkzeugleiste findest du die üblichen Tools, um Linien, Rechtecke und Ovale zu zeichnen. Außerdem gibt es einen Stift zum Freihandzeichnen und ein Pfadwerkzeug, um beliebige Polygone und Bézierkurven erstellen zu können.

Über eine Formenbibliothek hast du Zugriff auf eine Vielzahl unterschiedlicher vordefinierter Formen, die in zwölf Kategorien sortiert sind. Dazu zählen Basisformen wie Sterne, regelmäßige Polygone, Kreuze, Sprechblasen und Pfeile. Darüber hinaus findest du verschiedene Symbole zu Themen wie Wetter, Musik und Natur. Hast du dir eine dieser fertigen Formen auf die Zeichenfläche gezogen, kannst du sie natürlich nach Belieben verändern.

method-draw_library
Formen aus Bibliothek auswählen

Über eine Farbauswahl kannst du die Füll- und Rahmenfarbe einer Form definieren. Zusätzlich besteht natürlich die Möglichkeit, die Rahmenstärke und -art (durchgezogen, gepunktet oder gestrichelt) anzugeben.

Jede Form kannst du frei auf der Zeichenfläche platzieren, skalieren und drehen. Auch einen Unschärfefilter gibt es, den du auf eine Form anwenden kannst.

SVG mit Method Draw: Quelltext bearbeiten

Im Gegensatz zu Illustrator und Inskscape besitzt Method Draw einen eigenen Quelltexteditor. Über diesen kannst du dir jederzeit den generierten SVG-Quelltext deiner Zeichnung anschauen und diesen auch bearbeiten.

method-draw_quelltext
Integrierter Quelltexteditor

Auf diese Weise fügst du sehr schnell eigenen SVG-Quelltext ein oder änderst bestehenden Quelltext, um beispielsweise manuell eine Form zu bearbeiten. Das Ergebnis deiner Bearbeitung wird anschließend direkt in Method Draw umgesetzt.

Speichern als Data-URL

Willst du eine fertige Form speichern, bietet dir Method Draw die Zeichnung nicht als SVG-Datei zum Herunterladen an. Stattdessen wird die Datei als Data-URL direkt im Browser dargestellt. Das hat durchaus Vorteile. Denn oftmals werden eigenständige SVG-Dateien gar nicht benötigt. Vielmehr bindet man den SVG-Quelltext häufig direkt in ein HTML-Dokument ein. Da ist der Umweg, sich den Quelltext aus einer Datei herauszukopieren, eigentlich überflüssig.

Neben dem SVG-Format beherrscht Method Draw das PNG-Format. Das eignet sich beispielsweise als Fallback für alte Browser. Auch hierbei wird die Datei nicht zum Herunterladen angeboten, sondern als Data-URL im Browser dargestellt.

SVG: Dateien öffnen und Dateien importieren

Wer bereits SVG-Dateien hat, die er mit Method Draw bearbeiten möchte, kann diese einfach hochladen und importieren. Die Anwendung öffnet diese und stellt sie in der Zeichenfläche zum Bearbeiten dar.

method-draw_file
Speichern, Importieren und Exportieren

Ebenfalls ist es möglich, SVG-Dateien und verschiedene Bitmap-Formate in die Zeichenfläche zu importieren. Bitmap-Dateien, wie JPEG und PNG, werden über das <image>-Element als Data-URL in der SVG-Grafik gespeichert.

Fazit

Method Draw ist eine gute Alternative zu klassischen Desktopanwendungen für Webdesigner, wenn es ums SVG-Format geht. Vor allem die direkte Bearbeitbarkeit des Quelltextes im Programm und der Verzicht auf klassisches Speichern in Dateien ist ein interessanter Ansatz. Denn gerade beim SVG-Format wird der Quelltext oft direkt in andere Dateien implementiert, so dass eine eigene Datei gar nicht notwendig ist.

Method Draw ist kostenlos nutzbar und erfordert keine Anmeldung. Außerdem steht der Quelltext unter der MIT-Lizenz jedem zur Verfügung.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Antworten auf „So zeichnest du SVG online mit der Web-App Method Draw“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.