Gibt es ein Tool zum Erstellen von SVG-Pfade aus einer SVG-Datei? [closed]

Lesezeit: 8 Minuten

Gibt es ein Tool zum Erstellen von SVG Pfade aus einer
Tim

Kennt jemand ein Tool, das eine SVG-Datei nehmen und in einen HTML 5-SVG-Pfad konvertieren kann? du kennst die d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" Teil?

Ich gehe hierher: Verwenden Sie Adobe Illustrator, um einen SVG-Pfad mit den Befehlen „Verschieben nach“ zu erstellen

Aber nicht sicher. Bedeutet dies, dass Illustrator jede Linienzeichnung nehmen und als SVG-Pfad speichern kann?

Notiz:
Ja, es gibt Inkscape, aber ich suche nach Unterstützung für Farbverläufe und Maskierungen, falls dies möglich ist. Ich möchte in der Lage sein, .ai-Dateien zu verwenden und sie mit Illustrator oder Acrobat oder so zu exportieren … gibt es da draußen etwas? Oder ist es als Ausgabeformat in Illustrator oder Acrobat integriert?

  • Inkscape unterstützt Farbverlauf und Maskierung. Außerdem verwendet es XML für seinen inneren Kern, während der Illustrator SVG speichern kann, aber mit wirklich schlechten Ergebnissen

    – französisch

    10. Dezember 2013 um 0:19 Uhr

  • Als diese Frage gestellt wurde, gab es das noch nicht, aber heutzutage können wir solche Dinge bei stellen softwarerecs.stackexchange.com

    – Mawg sagt, Monica wieder einzusetzen

    27. Februar 2017 um 10:00 Uhr

  • Es gibt ein Online-Tool zum Erstellen von SVG-Pfad aus verschiedenen Dateiformaten wie: image.online-convert.com/convert-to-svg

    – Narayan Yerrabachu

    16. März 2018 um 10:21 Uhr


  • Ich komme sehr spät zur Party, und da sie geschlossen ist, kann ich dies nicht als Antwort hinzufügen, aber webdogs.com/blog/export-svg-web-using-adobe-illustrator erklärt, wie man es mit Illustrator macht.

    – OsakaWebbie

    30. März 2019 um 3:25 Uhr


  • Sie könnten die Datei in Ihrem Browser öffnen, Inspect Element öffnen und das SVG-Element kopieren.

    – Nanoo

    1. Juli 2020 um 14:43 Uhr


Gimp kann verwendet werden, um SVGs mit Primitiven (z. B. Rechtecke, Kreise usw.) in einen einzelnen Pfad zu konvertieren, der in HTML5 verwendet werden kann.

  1. Erster Download von Gimp: https://www.gimp.org/downloads/
  2. Exportieren Sie Ihr SVG als .svg Datei mit einem beliebigen Werkzeug, z. B. Illustrator. Machen Sie sich keine Sorgen, wenn die SVG-Ausgabe vorerst chaotisch ist, Gimp wird sie bereinigen
  3. Importieren Sie die SVG-Datei in Gimp mit Datei -> Öffnenund der folgende (oder ähnliche) Dialog sollte erscheinen:

Gimp SVG-Öffnen-Dialog

Überprüfen Sie beide Pfade importieren und Importierte Pfade zusammenführen Optionen

  1. Dann geh zu Windows->Andockbare Dialoge->Pfade
  2. Klicken Sie mit der rechten Maustaste auf den einzelnen Pfad, der besagt Importierter Pfad und Sie sollten den folgenden Dialog sehen:

Geben Sie hier die Bildbeschreibung ein

  1. Klicken Pfad exportieren… und speichern Sie diese Textdatei an einem Ort Ihrer Wahl
  2. Suchen und öffnen Sie diese Datei mit einem Texteditor Ihrer Wahl, z. B. Notepad, TextEdit
  3. Kopieren Sie den Text innerhalb der <path d="copy this text here" />
  4. Da Gimp den Text mit vielen Leerzeichen formatiert, müssen Sie ihn möglicherweise neu formatieren, indem Sie einige der Leerzeichen entfernen, um ihn in einer einzigen Zeile in Ihren HTML-Code einzufügen

  • Das hat bei meinem ersten Versuch gut geklappt. Natürlich sind es nur die Pfade und keine Füllung. Ich habe einen komplizierten Logotyp, und er sieht dem Original sehr ähnlich. Es hat Text und wahrscheinlich mindestens so etwas wie 5 verschiedene gebogene Kurven, um eine stilistische Krone und zwei Schlüssel zu machen. Ich habe meinen HTML-Code für mein SVG-Objekt durch die aus GIMP exportierte SVG-Datei ersetzt, mit Ausnahme der allerobersten Informationen. Hat super funktioniert, danke, natürlich hochgestimmt!

    – Michael Larson

    24. August 2020 um 8:39 Uhr

  • Ich habe Fill=”True” gesetzt und es hat die Kurven perfekt ausgefüllt (erster Versuch), das ist zu gut, um wahr zu sein 🙂

    – Michael Larson

    24. August 2020 um 8:43 Uhr

  • Ich habe einen zu niedrigen Ruf, um ein Bild davon zu zeigen, was es getan hat, aber ich denke, es ist wirklich gut geworden.

    – Michael Larson

    29. August 2020 um 14:29 Uhr

Öffnen Sie das SVG mit Ihrem Texteditor. Wenn Sie etwas Glück haben, enthält die Datei so etwas wie:

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

Die d Attribut ist Wonach suchen Sie.

  • Dies ist keine Lösung mit automatisch generierten komplexen SVGs, werfen Sie einen Blick auf die Gimp-Lösung

    – code4jhon

    15. August 2018 um 11:55 Uhr

  • Es lohnt sich, es auszuprobieren, bevor man zu komplexeren Lösungen greift!

    – Augustin Riedinger

    6. Januar um 8:39 Uhr

1647106931 814 Gibt es ein Tool zum Erstellen von SVG Pfade aus einer
Französischeins

Öffnen Sie das SVG mit Inkscape.

Inkscape ist ein SVG-Editor, es ist ein bisschen wie Illustrator, aber da es speziell für SVG entwickelt wurde, handhabt es es viel besser. Es ist eine kostenlose Software und ist verfügbar @ https://inkscape.org/en/

  • Strg A (alles auswählen)
  • shift ctrl C (=Pfad/Objekt zu Pfaden)
  • Strg s (Speichern (als einfaches SVG auswählen))

fertig

Alle Rechtecke/Kreise wurden in Pfade umgewandelt

  • Funktioniert das nur mit Rechteck/Kreis oder auch mit anderen Polygonen?

    – Mawg sagt, Monica wieder einzusetzen

    27. Februar 2017 um 10:02 Uhr

  • Es funktioniert auch mit Polygonen.

    – französisch

    28. Februar 2017 um 9:43 Uhr

  • sieht für mich nach einer guten Antwort aus

    – Shanimal

    22. November 2017 um 7:57 Uhr

  • Gott sei Dank! Endlich eine robuste Anwendung, die kostenlos und Open Source ist. Nach langer und erfolgloser Suche habe ich endlich das tun können, was ich wollte. Ich liebe das!

    – Ragav Y

    9. Dezember 2018 um 11:19 Uhr

  • Wenn Sie ein komplexes SVG haben (dh eines mit vielen Objekten darin), verwenden Sie CTRL A alle auswählen, SHIFT CTRL C Um beliebige Objekte in Pfade umzuwandeln, verwenden Sie dann union CTRL + und/oder kombinieren CTRL K um sie zu einem einzigen Pfad zusammenzuführen.

    – McMurphy

    15. Januar 2020 um 2:10 Uhr

1647106932 987 Gibt es ein Tool zum Erstellen von SVG Pfade aus einer
versehentlich_PhD

(Als Antwort auf den Teil der Frage “Hat sich die Situation verbessert?”):

Leider nicht wirklich. Die Unterstützung von Illustrator für SVG war schon immer etwas wackelig, und nachdem ich in den Interna von Illustrator herumgepfuscht habe, bezweifle ich, dass wir in Bezug auf Illustrator große Verbesserungen sehen werden.

Wenn Sie nach einem Zugriff im DOM-Stil auf ein Illustrator-Dokument suchen, sollten Sie es ausprobieren Hanpuku (Offenlegung Nr. 1: Ich bin der Autor. Offenlegung Nr. 2: Es handelt sich um Forschungscode, was bedeutet, dass es viele Fehler gibt und eine zukünftige Unterstützung unwahrscheinlich ist.).

Mit Hanpuku könnten Sie so etwas tun:

  1. Wählen Sie den gewünschten Pfad in Illustrator aus
  2. Klicken Sie auf die Schaltfläche “Zu D3”.
  3. Geben Sie im Skript-Editor Folgendes ein:

    selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');

  4. Klicken Sie auf Ausführen

  5. Wenn die Änderung wie erwartet ist, klicken Sie auf „In Illustrator“, um die Änderungen auf das Dokument anzuwenden

Zugegeben, bei diesem Ansatz wird die ursprüngliche Pfadzeichenfolge nicht verfügbar gemacht. Wenn Sie den Anweisungen am Ende der Willkommensseite des Plugins folgen, ist es möglich, das Illustrator-Dokument mit den Entwicklertools von Chrome zu bearbeiten, aber es wird überall eine Menge hässlicher Technik sichtbar sein (das SVG-DOM, das das Illustrator-Dokument widerspiegelt, ist in einem Iframe vergraben tief in der Erweiterung – das Ändern des DOM mit den Tools von Chrome und das Klicken auf „Zu Illustrator“ sollte immer noch funktionieren, aber Sie werden wahrscheinlich auf viele Probleme stoßen).

TL;DR: Illustrator verwendet ein internes Modell, das sich in vielerlei Hinsicht von SVG unterscheidet, was bedeutet, dass Sie beim Iterieren zwischen den beiden derzeit nur die Möglichkeit haben, die Teilmenge der Funktionen zu verwenden, die beide auf die gleiche Weise unterstützen.

Überrascht, dass niemand die Option „Speichern unter“ > „Format“ > „.svg“ von Illustrator erwähnt hat.

Gibt eine .svg-Datei aus, die den Pfad (und den Rest der SVG-Definition) in einer .svg-Datei (xml) enthält.

Der Weg selbst ist innerhalb <path d>.

  • Wenn ich das richtig verstehe, geht es bei der Frage auch darum, Primitive in Pfade umzuwandeln. Illustrator behält Rechtecke, Kreise usw. bei, sodass diese Antwort nicht korrekt ist.

    – Essiggurken

    13. Januar 2014 um 15:25 Uhr

  • Wenn ich das richtig verstehe, geht es bei der Frage auch darum, Primitive in Pfade umzuwandeln. Illustrator behält Rechtecke, Kreise usw. bei, sodass diese Antwort nicht korrekt ist.

    – Essiggurken

    13. Januar 2014 um 15:25 Uhr

994630cookie-checkGibt es ein Tool zum Erstellen von SVG-Pfade aus einer SVG-Datei? [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy