Lohnt es sich, das SVG-Pfadattribut zu lernen, oder sollte ich ein Werkzeug zum Zeichnen verwenden?

7

Gibt es einen Vorteil beim manuellen Erstellen der Grafik mit dem Pfadelement und dem Attribut d (ich denke mit Hilfe von Mathematik?) Gegenüber einem Werkzeug wie Inkscape zum Zeichnen der Grafik? Generiert Inkscape ineffizienteren SVG-Code?

Katie
quelle

Antworten:

1

Hier ist eine Seite mit einer Reihe von Tutorials in SVG, eines davon über Pfade.

Ich habe damit viele Kreise mit Hilfe eines Programms gezeichnet, und zu meiner Überraschung gibt es in SVG eine Kernkreisdefinition, die viel einfacher ist als das, was Inkscape erzeugt, wenn ich sie von Hand zeichne.

Aber Inkscape konnte dieses Format gut lesen und zeichnete, was ich erwartet hatte. Beim Speichern der Datei wurde eine eigene Boilerplate hinzugefügt.

Daher würde ich empfehlen, aus solchen Tutorials zu lernen und nicht (nur) aus der SVG-Inspektoransicht inkscape-Angebote.

Benutzer unbekannt
quelle
6

Nun, hier gibt es zwei Schulen ...

  • Fragen Sie einen Druckdesigner, ob er / sie Postscript-Code schreiben kann, und er wird Sie auslachen. Druckdesigner waren noch nie daran interessiert zu lernen, wie eine Postscript-Datei für die Ausgabe manuell codiert wird. Sie verlassen sich vollständig auf WYSIWYG-Editoren (Photoshop, Indesign, Illustrator usw.). Die Antwort wäre also ein nachdrückliches Nein .

  • Fragen Sie einen Webdesigner, ob er Markups oder Code zum Erstellen einer Website schreiben kann, und Sie erhalten hier im Allgemeinen ein "Ja". Die meisten WYSIWYG-Webeditoren sind nicht so kompetent wie ein Mensch. Sicher, sie können schneller sein, aber in einigen Bereichen sind sie nicht immer so gründlich oder detailliert. So viele versierte Webdesigner / Entwickler ziehen es vor, Markups / Code manuell zu erstellen. Wenn Sie diese Gruppe fragen, erhalten Sie ein allgemeines Ja .

Nun ist es eine andere Frage , ob das direkte Schreiben von SVG-Code für Sie wertvoll ist oder nicht . Ich persönlich mache mir keine Gedanken darüber, wie der SVG-Code geschrieben ist, vorausgesetzt, er wird wie erwartet angezeigt. Ich weiß auch, dass ich einen WYSIWYG-Editor verwenden und dann die SVG-Datei in einem Texteditor manuell öffnen kann, um sie bei Bedarf zu "optimieren". Ich kenne also nicht alle Vor- und Nachteile von SVG-Code und möchte es auch nicht wissen. Ich lerne, wie ich muss.

  • Ein Vorteil beim Schreiben Ihres eigenen SVG wäre die Kontrolle . Manuelles Schreiben kann oft weitaus detaillierter und strukturierter sein als jede automatische Methode. Siehe das Web Bullet oben. Wenn Sie ein akribischer Typ sind, werden Sie möglicherweise sehr zufrieden sein, wenn Sie SVG-Grafiken aus einem Texteditor erstellen können.

  • Eine Abschreckung wäre Zeit. Die Verwendung eines WYSIWYG-Editors ist oft viel schneller. Oder verwenden Sie den Editor und ändern Sie den SVG-Code manuell.

Es ist also wirklich dein Anruf.

Die Vorteile für andere (Arbeitgeber / Kunden usw.) sind schwer zu sagen und hängen in hohem Maße von Ihren Fähigkeiten und Ihrer Geschwindigkeit ab. Wenn Sie eine manuell geschriebene SVG-Grafik in der gleichen Zeit erstellen können, die zum Öffnen und Speichern von Illustrator / inkscape erforderlich ist, kann dies für Dritte von Nutzen sein. Wenn Sie jedoch zwei- oder dreimal länger brauchen, um den Code zu schreiben, kenne ich niemanden, der dasselbe zum doppelten Preis will.

Scott
quelle
Interessante Sicht. Ein dritter Weg ist der Weg des Entwicklers : SVG ist eine wertvolle Art der Ausgabe für Anwendungen, da sie genau und einfach zu generieren ist (und die Antwort ein offensichtliches Ja wäre ).
Paolo Gibellini
@PaoloGibellini Ja, das war das, worauf ich in der "Web" -Kugel anspielte. Wenn Sie absolute Kontrolle wünschen , gibt es sicherlich keine bessere Methode - genau wie beim Markup.
Scott
Ich stimme zu, könnte aber auch die Unterscheidung zwischen dem Webentwickler, der SVG in einem bestimmten Kontext (als Bilder auf der Webseite) verwendet, und dem Entwickler, der SVG als Ausgabe einer Ausarbeitungssoftware (als Diagramm oder als Element für) verwendet, interessant sein in einen Bericht oder eine Forschung aufgenommen werden).
Paolo Gibellini
3

SVG ist nicht besonders schwer von Hand zu schreiben. Es ist ein bisschen zu ausführlich für meinen persönlichen Geschmack, aber das ist nicht der Punkt.

Kommt darauf an, was du tust

Es gibt mehrere Gründe, eine Vektordatei manuell zu schreiben.

  1. Sie haben Zugriff auf einige Daten und müssen diese in einem Grafikeditor öffnen können. Das Speichern der Daten in SVG, EPS oder DWG ist relativ einfach. Sie können es dann in jeder Anwendung weiterverarbeiten.

    Dies kann Sie in einigen Fällen unglaublich viel produktiver machen. Aber Sie können niemals Produktivität erreichen, wenn Sie sich nie die Mühe machen, das Format zu lernen. Wenn Sie ein Programmierer sind, sollten Sie auf jeden Fall aus diesem Grund lernen.

    Beispielfrage und Anwendungsfall: Importieren von Vektordaten in den Illustrator

  2. Sie tun etwas, was Ihr Redakteur nicht gut macht. Es gibt immer noch Dinge, die in nicht-grafischen Editoren einfacher zu tun sind. Vor allem mathematischer Satz, aber manchmal auch andere Dinge wie benutzerdefinierte Halbtongenerierung usw. usw.

    Ein großer SVG-Anwendungsfall ist die Generierung von CSS für eine interaktive Verwendung. Oder Vorbereitung der SVG-Animation. Aber es ist nicht nur darauf beschränkt. In vielen Fällen können eine for-Schleife oder ein einfaches Suchen und Ersetzen oder einige Textkopypasten Wunder bewirken, die von Hand äußerst mühsam wären. Die Möglichkeit, verschachtelte Transformationen zu erstellen, kann für die Fraktalerzeugung auf eine Weise verwendet werden, die in Ihrer GUI ein Albtraum wäre.

Aber wenn Sie wissen, wie man das macht, tauchen alle möglichen seltsamen Gründe auf. Sowie:

  1. Sie müssen ein Bild zeichnen, aber alles, was Sie haben, ist ein Terminal. Neben Ihrer Beschreibung, wie eine Sequenz abläuft, ist es ein Bonus, lesen zu können, was ich getan habe. Ein Beispiel dieser Art finden Sie hier

Allgemein

Für die meisten Benutzer ist es nicht sinnvoll zu lernen. Also nein. Es tut jedoch nicht weh, dies zu wissen, sodass Sie möglicherweise einige Wochen mit dem Thema verbringen, wenn Sie es interessant finden. Es könnte sich viel Zeit auszahlen.

Zugegeben, das Bedürfnis steigt selbst für mich nicht sehr oft auf.

joojaa
quelle
Ihr erster Punkt ist zwar gültig, aber nicht genau das, was ich "manuell" nennen würde. Der wichtige Unterschied besteht darin, Pfade manuell zu generieren und über das Wissen zu verfügen, das zum manuellen Generieren von Pfaden erforderlich wäre. Letzteres ist wichtig.
Wrzlprmft
Um etwas automatisch zu machen, müssen Sie es manuell bis zu einem gewissen Punkt @Wrzlprmft machen. Sie würden also wahrscheinlich 10% manuell ausführen und dann den Rest in eine Schleife einwickeln. Manuelles Tun ist das Skizzieren von Automatik. Beachten Sie, dass der Benutzer fragt, wie es geht. Sie beginnen in allen Fällen manuell.
joojaa
Nicht unbedingt. Ich habe automatisch viel mit Bézier-Kurven herumgespielt, aber nie ganz manuell programmiert. Für meinen Numerikkurs habe ich einmal einen Bézier-Renderer programmiert, aber als ich beauftragt wurde, ihn mit einigen Daten zu testen, habe ich ihn sofort von Inkscape erhalten.
Wrzlprmft
Sicher, etwas anders, aber Sie müssen nicht genau so tief in svg gehen. Sie müssen immer noch die Punkte füllen, die mit Suchen und Ersetzen vergleichbar sind, also nicht wirklich manuell, selbst wenn Sie einen Texteditor verwenden. In vielen Fällen kann automatisch bedeuten, dass Sie auf Ihrem Datendump suchen und ersetzen.
Joojaa
Was ich vorhabe ist, dass es nicht viel gibt, was auf einem Computer vollständig manuell ist. YMMV, soweit es mich betrifft, ist alles gleich.
Joojaa
2

So beantworten Sie Ihre wörtlichen Fragen:

Gibt es einen Vorteil beim manuellen Erstellen der Grafik mit dem Pfadelement und dem Attribut d (ich denke mit Hilfe von Mathematik?) Gegenüber einem Werkzeug wie Inkscape zum Zeichnen der Grafik?

Sehr selten. Normalerweise verwende ich nie WYSIWYG-Tools, aber zum Entwerfen von Grafiken. Darüber hinaus können Sie Knotenpositionen und ähnliches manuell über die Inkscape-Oberfläche anpassen, wenn Sie möchten.

Es kann jedoch sehr wertvoll sein zu wissen, wie Sie Pfade manuell generieren würden:

  • Wenn Sie wissen, was unter der Haube passiert, können Sie besser verstehen, was Sie mit WYSIWYG-Tools tun. Es besteht eine starke Beziehung zu: Wird Mathematik für Grafikdesign benötigt? . Für ein Beispiel, das sich direkt mit den mathematischen Kurven befasst, möchte ich auf meine Antwort verweisen .

  • Wenn Sie wissen, wie Sie Pfade manuell generieren würden, wissen Sie auch, wie Sie SVGs automatisch bearbeiten würden, dh mit einem Programm. Joojaas Antwort gab bereits ein gutes Beispiel dafür.

Generiert Inkscape ineffizienteren SVG-Code?

Ja. Der Code von Inkscape zielt nicht darauf ab, klein zu sein. Es gibt spezielle Tools, um die Dateigröße Ihrer SVG zu reduzieren, aber sie können nur so weit gehen, weil sie nicht wissen, was wichtig ist. Wenn Sie aus irgendeinem Grund weiter gehen müssen, müssen Sie Ihre SVG manuell „golfen“. In dieser Antwort finden Sie ein Beispiel. Wenn Sie dies dennoch tun, beginnen Sie normalerweise mit einem von WYSIWYG generierten SVG und nicht von Grund auf neu.

Wrzlprmft
quelle
2

Die Antwort ist beides. Deshalb gibt es beide Möglichkeiten.

Ich meine nicht, dass einige Grafiken in einer Zeichen-App erstellt werden und andere mit Code. Ich meine, dass Sie mit jeder Grafik, die Sie erstellen, die folgenden Tools bereithalten:

  • Stift
  • Vektorzeichnungswerkzeug
  • UTF-8-Code-Editor

… Weil das das SVG-Toolkit ist. Und im Allgemeinen verwenden Sie sie in dieser Reihenfolge.

Für jede Grafik, die Sie erstellen, können Sie 99% Zeichnung und 1% Code oder 10% Zeichnung und 90% Code oder 50:50 verwenden. Wenn Sie jedoch die beste Grafik erstellen möchten, die Sie erstellen können, ist es sehr unwahrscheinlich, dass Sie nur Zeichnen oder nur Code verwenden.

Der Codeteil kann nur eine Optimierung sein, oder es kann eine Animation sein, oder es kann eine einfache Grafik sein und eine komplexe mit Rotationen erstellen, oder es kann nur überprüft werden, ob Sie nicht versehentlich eine SVG erstellt haben, die nur eine hat eine eingebettete Bitmap darin. Aber letztendlich erstellen und veröffentlichen Sie Code, sodass Sie zumindest abmelden möchten, was Sie versenden.

Wenn Sie andererseits eine interessante Grafik erstellen möchten, die etwas Kunst und Leben enthält, werden Sie viel gewinnen, wenn Sie Ihre Augen und Ihren visuellen Kortex verwenden, um zumindest einen ersten Entwurf Ihrer endgültigen Grafik zu erstellen. Möglicherweise möchten Sie Cliparts als Ausgangspunkt importieren oder zuvor erstellte Grafiken als Vorlagen verwenden. Diese und andere bewährte Methoden zur Erstellung von Vektorgrafiken werden nicht aus dem Fenster geworfen, da SVG als textbearbeitbares XML-Webdokument gespeichert wird. Das XML-Dokument ist eine zusätzliche Funktion für die Erstellung von Vektorgrafiken und kein Ersatz für das Zeichnen.

Kurzum: Verwenden Sie das gesamte Toolkit. Binden Sie keine Hand hinter den Rücken.

Simon White
quelle
Naja eigentlich eigentlich nicht wirklich, vielleicht oder nicht ganz. Der Grund, warum Sie für Menschen lesbare Formate haben, liegt darin, dass dies das Debuggen und Programmieren erleichtert. Es war ursprünglich nie für sie gedacht, Software zu ersetzen. Aber im Laufe der Zeit begannen die Formate ein Eigenleben zu führen und wurden zu etwas, mit dem die Software nicht mithalten konnte. Sie wurden zu flexibel für GUIs und wurden zu Beschreibungen, die für die GUI-Seite zu weit gefasst werden konnten, um mithalten zu können. Markup sollte also gut für die ursprünglichen Entwickler sein, aber am Ende übertrafen sie ihren ursprünglichen Zweck.
Joojaa
-1

Wie Sie im Grafikdesign-Forum fragen, lautet die Antwort nein.

Wenn Sie auf stackoverflow.com gefragt haben, ja.

Rafael
quelle
Obwohl ich denke, dass dies die Antwort ist, die Sie erhalten würden, wenn Sie diese beiden Gemeinschaften fragen würden, was sie selbst tun / tun würden - ich denke nicht, dass dies die Antwort auf die Frage ist.
Cai