Zu Inhalt springen

Welches Tool verwendet ihr zur Umwandlung einer Wort-Bild-Marke als JPG/PNG zu einem (hochwertigen) SVG?

Hervorgehobene Antworten

Moin.
Wir geben als gemeinnütziger Verein ein freies Fahrradmagazin heraus und möchten die Wort-Bild-Marke eines alten gedruckten Fahrradmagazins in ein hochwertiges SVG umwandeln.

Bildschirmfoto2024-12-03um15_38_32.png.a85706cb046aa852035cd5578548719d.png

Ich konnte relativ leicht herausfinden, welcher Font in der Wort-Bild-Marke eingesetzt wurde und habe diesen bereits als Webfont eingebunden: RockoFLF
https://www.fontzillion.com/fonts/casady-greene/rockoflf

Nun möchte ich ein hochwertiges SVG erzeugen. Mit hochwertig meine ich eine SVG-Codequalität, die schlank und elegant ist. Im Beispiel geht es um zwei Kreise, wobei der innere Kreis an zwei Stellen unterbrochen/überlagert ist.
Ich hätte gerne ein Tool, welches erkennt, wo in einem Bild geometrische Grundformen vorkommen und dies dann auch im SVG-Code umsetzt.
Typische SVG-Tools erzeugen "Pfade". Diese lassen sich naturgemäß viel umständlicher anpassen als geometrische Grundformen.

Ich beherrsche Grundlagen in SVG und kann daher existierenden Code auch händisch editieren. Aber initial Code zu erzeugen ist schnell zu anspruchsvoll, da ich auch nur selten mit SVG-Code hantiere.

Kennt ihr ein kostenloses (Online-)Tool, wo im obigen Sinne hochwertiger SVG-Code rauskommt?
Ich würde mich über einen Rat freuen. Danke.

  • Ersteller
vor 24 Minuten schrieb Diwarnai:

Ich würde das in einem Vektorprogramm nachbauen

Sowas geht immer, klar.  Aber ich suche ja nach einem Umwandlungstool. Mir geht es auch nicht um dieses eine Beispiel allein. Vergleichbare Aufgabe kommen immer wieder mal vor.
 

vor 26 Minuten schrieb Diwarnai:

Aus einem Pixelbild wird niemals hochwertiger svg-Code herauskommen.

Ok. Ich hatte gehofft, das wäre mittlerweile möglich. Mein Beispiel besteht aus total trivialen und wenigen Bestandteilen: zwei Wörter, 2 Kreise.

Danke für die Bereitstellung Deiner Datei. Ich erhalte bei dem Link "The transfer you requested has been deleted."

Dann probieren wir’s über

https://easyupload.io/z3kmvy

vor 2 Minuten schrieb Ibu:

Ok. Ich hatte gehofft, das wäre mittlerweile möglich. Mein Beispiel besteht aus total trivialen und wenigen Bestandteilen: zwei Wörter, 2 Kreise.

Leider ist die Software mit oder ohne KI nicht so weit, wie wir uns das wünschen.

  • Ersteller

Danke für den Upload.
Die Datei ist ein PDF.
Kannst Du dort auch ein SVG hochladen?
Oder einfach hier als Anhang?

Zu KI:
Hast Du oder andere hier Mitlesende schonmal systematisch mit (Custom-)GPTs für so eine Aufgabe herumgespielt?

Bearbeitet ( von Ibu)

  • Ersteller

Danke. Ich habe Deine beiden Dateien mit dem SVG-Code angesehen.

Das ist etwas was ganz Anderes als ich anstrebe.
Der Code Deiner beiden SVG-Datei besteht ausschließlich aus Pfadangaben.

Ich suchte ein Tool, welches SVG erzeugt, welches ausschließlich aus den Elementen text und circle besteht.

Haken wir das Thema ab : )

Danke jedenfalls für Deine Versuche.
 

  • Ersteller

Ein konkreter Vorteil wäre:
Man kann im Code mit der Änderung eines einzigen Wertes den Radius eines Kreises ändern. Oder mit einer einzigen Angabe den vertikalen Abstand zwischen den Wörtern oder einen geringeres Schriftgewicht, oder ...   Abstrakter: Wartbarkeit ist enorm viel besser. Aber sowas gilt generell, für beliebige SVGs. Eleganter, minimalistischer Code ist immer besser wartbar. Eine ganz andere Ebene einer Begründung: handwerklicher Stolz. Den empfinde ich bei schönem, minimalen, gut aufgebautem Code.

Automatisch umwandeln von einer wackligen Pixelgrafik: nein, das wird (noch) nichts, AI ist derzeit mehr Schein als Sein, wenn es um Weiterverarbeitbarkeit geht. Wenn das mal klappt, ist es Zufall, keine Absicht.

Wenn ein grafischer Editor auch "nur Pfade" erzeugt statt beschreibenden Syntax, dann ist das Tool halt eher um exakte Reproduktion des Ergebnisses bemüht – im Falle von Illustrator, der letztlich immer in Postscript notiert, was wiederum kein <circle> kennt sondern nur kubische Kurven, werden dann eben ganz der Ausgabetreue gemäß cubic(C)-<path> in SVG erzeugt.

Wobei ich gerade bei einem Minimalst-Beispiel – Dokument öffnen > Kreis zeichnen > Exportieren – durchaus ein <circle>-Element bekomme. Aber auch da entscheidet ein abstrakter Algorithmus, welche Elemente unter welchen Konstellationen wie ausgegeben werden.

 

Aber ...

SVG ist ja nach XML/SGML aufgebaut ... d.h. man kann da in Code und menschenlesbar beschreiben, was man sehen will. was man selbst geschrieben hat, versteht man und man kann es auch warten.

So wie bei anderen Markup-Sprachen wie HTML auch ...
Klar kann man das per AI schreiben lassen, das endet halt in unwartbarem Murks der vordergründig gut aussieht.
Oder man nimmt einen HTML-Generator, der einen grafisch arbeiten lässt und irgendwelchen Code nach abstrakten Prozessen erzeugt – das geht schon, aber ich werd's weder selbst lesen noch warten können.
Oder man schreibt halt auf, welche semantische Struktur und Inhalt man möchte, und wie diese Struktur visuell interpretiert werden soll. Lernkurve hoch, Wartbarkeit super.

  • Ersteller

Hallo Sebastian,
Danke für Deinen Kommentar.

vor einer Stunde schrieb Sebastian Nagel:

AI ist derzeit mehr Schein als Sein, wenn es um Weiterverarbeitbarkeit geht.

Da stimme ich voll zu. Das ist auch das Ergebnis meiner bisherigen Erfahrungen mit GPT 4 von OpenAI.

Warten wir ab, ob AI-Tools in näherer Zukunft wartbaren und hochwertigen SVG-Code – aus einem Beispiel wie hier im Thread erwähnt – erzeugen können.

Andreas

Erstelle ein Konto, um zu kommentieren

Wichtige Informationen

Wir setzen Cookies, um die Benutzung der Seite zu verbessern. Du kannst die zugehörigen Einstellungen jederzeit anpassen. Ansonsten akzeptiere bitte diese Nutzung.

Konto

Navigation

Browser-Push-Nachrichten konfigurieren

Chrome (Android)
  1. Klicke das Schloss-Symbol neben der Adressleiste.
  2. Klicke Berechtigungen → Benachrichtigungen.
  3. Passe die Einstellungen nach deinen Wünschen an.
Chrome (Desktop)
  1. Klicke das Schloss-Symbol in der Adresszeile.
  2. Klicke Seiteneinstellungen.
  3. Finde Benachrichtigungen und passe sie nach deinen Wünschen an.