Eines der coolsten Dinge an SVG ist, dass es trotz all der mächtigen Dinge, die es kann, immer noch lesbarer Code ist. Möchten Sie ein Rechteck zeichnen? Es ist keine bizarre Zeichenfolge von Kauderwelsch, es ist
<rect x="50" y="20" width="300" height="100" />Sie würden das Markup, eine deklarative Sprache, nennen. Sie können damit jede Form zeichnen und Dinge wie Verläufe, Animationen und Interaktivität deklarieren und verwenden. Außerdem ist es kein proprietäres Format. Sie brauchen keine Erlaubnis, um es zu nutzen. Es ist eine offene Spezifikation!
Die Vorstellung, dass SVG nur Markup ist, kitzelt einige Entwickler genau richtig.
Sie können buchstäblich lernen selbst die auf den ersten Blick unintuitiv wirkende SVG <path d="" /> Syntax. Das sind nur Koordinaten! Mit Anweisungen, die erklären, wie man von Koordinate zu Koordinate wechselt. Möchten Sie ein Pluszeichen zeichnen? Es kann bis auf das Nötigste reduziert werden
<path d="M2 1 h2 v1 h2 v1 h-1 v1 h-1 v-1 h-1 v-1 h2 z" />Oder amüsieren Sie sich mit Präprozessoren, die SVG aus Schleifen erstellen!
Es reizt einen bestimmten Typ von Entwicklern zu dem Gedanken... Hey! Ich könnte eine App entwickeln, die beim Erstellen und Bearbeiten von SVGs hilft! Ja, in der Tat, das könnten Sie. JavaScript hat alle Werkzeuge, die Sie brauchen. Es gibt gerne Koordinateninformationen darüber aus, wo Sie klicken und dergleichen, und sogar Drag-and-Drop ist jetzt eine Sache. Kombinieren Sie Ideen wie diese, und Sie können sich eine vollwertige browserbasierte Anwendung zur Erstellung und Bearbeitung von SVGs vorstellen.
Die Schönheit des Internets liegt darin, dass viele Leute eine visuelle App zum Erstellen und Bearbeiten von SVG entwickelt haben, weil Sie es definitiv tun können.
Vorhersehbar gibt es sogar ziemlich viele Optionen! Das stimmt, völlig kostenlose browserbasierte SVG (Vektor)-Bearbeitungswerkzeuge.
Ich denke, viele von uns betrachteten ein Werkzeug wie Adobe Illustrator als den König des Berges für die Vektorbearbeitung. Oder vielleicht seinen Open-Source-Bruder Inkscape. Auch wenn dies immer noch großartige Werkzeuge sind, können Sie Geschwindigkeit gewinnen und Geld sparen, indem Sie sich diese Optionen ansehen, wenn Sie SVG-Bearbeitung benötigen.
Die meisten der folgenden benötigen nur wenig Erklärung. Die Werkzeugleisten geben Ihnen Zugriff auf Zeichen- und Bearbeitungswerkzeuge. Sie ändern Farben und ziehen Dinge herum und tun die meisten Dinge, die Sie erwarten würden. Natürlich variieren einige der Funktionen. Wenn Sie ernsthaft daran interessiert sind, eines für größere Arbeiten zu finden, sollten Sie alle ausprobieren.
Method Draw
SVG-edit
Vector Paint
Drawing SVG
Vecteezy Editor
Vectr
Janvas
Boxy SVG
RollApp / Inkscape
Dieses bedarf einer kleinen Erklärung. Sie haben vielleicht schon von Inkscape gehört. Die langjährige Open-Source-Alternative zu Adobe-Software, insbesondere zu Adobe Illustrator. Normalerweise würde Inkscape keinen Platz auf dieser Liste verdienen, da es nicht browserbasiert ist. Aber es stellt sich heraus, dass es das sein kann!
RollApp ist ein Dienst, der Ihnen hilft, Inkscape (und eine Vielzahl anderer Apps) praktisch als Pop-up-Browserfenster zu starten.
Ich habe am Anfang erwähnt, dass Sie, wenn Sie ernsthaft größere Arbeiten mit einem dieser Tools durchführen möchten, sie ausprobieren sollten. Das stimmt. Da die meisten davon kostenlos sind und ich zugegebenermaßen noch nie ernsthafte harte Arbeit damit gemacht habe, bin ich zurückhaltend, Ihnen zu sagen, was das Beste ist.
Ich kann Ihnen jedoch sagen, was ich definitiv vertraue, ein weiteres browserbasiertes Design-Tool namens Figma. Es gehört zu einer etwas anderen Kategorie, da es eher für umfassende Designarbeiten als nur für die SVG-Bearbeitung gedacht ist, aber es ist sicherlich eine vektorbasierte App. Ich arbeite buchstäblich einen harten Tag lang in Figma und es funktioniert großartig. Eine weitere Überlegung? Invision Studio, sobald es für alle geöffnet ist.