Erstellen einer laufenden Handschrift als SVG
 

Hallo zusammen!

Ich habe mich bisher grob in SVG eingelesen, aber keine Idee, wie ich folgendes verwirklichen kann:
Ich würde gerne eine SVG-Grafik erstellen (für die Homepage eines Grundschulpädagogik-Instituts), die so aussieht, als würde gerade jemand auf dem Bildschirm die Worte "Grundschulpädagogik Deutsch" in Echtzeit schreiben. Ist das einfach zu verwirklichen oder eher kompliziert?
Cool wäre, wenn man JavaScript vermeiden könnte.
Vielen Dank vorab!

Grüße,
Dennis

SVG baut auf geometrischen Figuren auf, eine Handschrift ist das eben nicht, weil zu ungleichmäßig. Nimm doch ein gif mit 8 Farben (smooth) und Transparenz und lass das animieren. Solltest mit 40 frames hinkommen: 100k oder kleiner. (geschätzt)

ich habe von meinem prof folgende datei erhalten, die aus handschriftdaten erstellt wurde:
http://classicservice.bplaced.net/test2.svg
diese hat den effekt "verblassen". also geht es doch eigentlich schon mit "svg", oder?
ich bin wirklich ein laie, wie stelle ich es denn mit gif an? gibt es ein programm?
danke vorab!

falls ich mich missverständlich ausgedrückt haben sollte, so soll das aussehen (nur mit echten handschriftdaten):

http://classicservice.bplaced.net/test.gif

SVG ist schon sehr sparsam, was die Dateigrösse angeht. Aber ich kenne das Format auch nicht so gut. "Verblassen" blendet Dir aber nur die ganze Grafik ein oder aus. Du müßtest also sehr viele Grafiken anlegen und dann kannst Du gleich ein gif nehmen, zumal die Illusion des "Schreibens" damit nicht geht.
Aber vielleicht hat svg entlang des Paths eine andere Funktion dafür.

Animierte Gifs kannst Du mit jedem halbwegs tauglichen Grafikprogramm erstellen. Du nimmst die immer gleiche Grafik, Beispiel der Name "Bernd" und radierst ( oder malst weiß z.B.) erstmal alles aus, dann läßt Du einen Teil stehen und dann nochmal ein Teil. Das Grafikprogramm erstellt dann in der gewünschten Reihenfolge (grafiken nummerieren kann helfen) ein animiertes gif und erzeugt den Eindruck des "Schreibens" wenn man es geschickt macht.

Obiges habe ich fett geschrieben, weil ich denke, dass es dafür eine Funktion in svg gibt - du musst sie nur finden.

SVG (ohne JS polyfill) kannst du vergessen. Das wird meines Wissens vom IE < 9 nicht unterstützt. Selbst der IE9 unterstützt dann nicht SMIL, was ziemlich sicher auch bedeutet: JavaScript muss sein. (Ob SMIL überhaupt eine Option wäre, weiß ich nicht.)

Quelle: When can I use... Support tables for HTML5, CSS3, etc

Generell solltest du dich fragen, ob ein ziemlich sekundäres Feature den Aufwand wert ist. Der ist nämlich so oder so meiner Einschätzung nach erheblich. Selbst wenn du fertigen Code findest, muss der Handschrift-Pfad ja definiert werden.

Hast du so ein Script schon mal irgendwo gesehen?

(Ich weiß von dieser einen Mozilla-Aktion, bei der Unterschriften geschrieben werden konnten… Aber habe alle Links dazu gelöscht und glaube, das Zeugs war zuletzt ohnehin wieder offline.)

Falls du dazu was findest, würde mich das interessieren.

Ein halbwegs guter Suchbegriff wäre etwa: „svg draw path progressive“

- javascript - How to draw a vector path progressively? (Raphael.js) - Stack Overflow

Das ist ziemlich einfach, hier mit Inkscape

http://www.abload.de/thumb/unbenannt-15rfx0.jpg

mit Illustrator geht das auch, wie, findest du im unten verlinkten Tutorial...


jVectorMap arbeitet z.B. mit definierten Pfaden, hier findest ein Tut, wie du dort eigene Pfade definieren kannst jQuery-Tutorial: SVG-Daten mit jVectorMap darstellen - Matthias Schütz

Wie ich es verstehe, ist die Aufgabe:

Umwandlung eines Scans eines handgeschriebenen Worts in einen SVG-Pfad, dessen Nodes so arrangiert sind, dass sich durch zeitlich voranschreitendes Einblenden von Folgenodes der Eindruck ergibt, das Wort würde in Echtzeit geschrieben.

Wegen t-Strichen und i-Punkten und generell Stellen, an denen neu angesetzt werden muss, müssten es vermutlich sogar mehrere Pfade sein.

Mehrere Pfade werden dort untereinander aufgelistet, man kann sich jeden einzelnen kopieren. Die Daten könnte man dann nutzen um in einem Canvas das Ganze nachzuzeichnen - auch animiert. Ohne JavaScript kommst dabei freilich nicht aus.

Ich weiß nicht, was Inkscape so treibt. Nutze das zwar auch, aber noch nie für so was. Die Umwandlung des Scans in einen Pfad sollte generell durch etwas Gebastel machbar sein, oder?

Aber müsste man nicht dennoch wahrscheinlich an allen möglichen Stellen Hand anlegen, um etwa Bögen (l, e, o, …) zu reparieren (da muss der Pfad ja ein Stück „rückwärts“ laufen)?

Wie sieht es generell mit Bezier-Kurven aus? Deren Schwünge sind ja in der „unfixierten“ Variante (mir fehlt Vokabular) vom Folgepunkt abhängig, der aber bei fortschreitender Darstellung noch nicht existiert, sodass die Kurve dann theoretisch nachträglich ihren Verlauf ändern würde, wenn sie nicht „korrekt“ definiert ist.

Zudem müssen Knotenpunkte gleichmäßig verteilt sein, sodass sich eine fließende Schreibbewegung ergibt.

Das ist alles nicht mein Gebiet, ich glaube aber, mit der ganzen Sache kann man sich schon eine ganze Zeit beschäftigen…

Edit: Wobei das Bezierproblem wohl wegfällt, wenn du auf canvas zeichnest? Das ist ja afaik Raster.

Einen Pfad bekommst du, wenn du ein bspw. eingescanntes Bild öffnest und dann auf Pfad -> Bitmap vectorisieren gehst, da gibbet dann noch paar Optionen, hab dir mal das Erstbeste zu rausgesucht ;) Inkscape tutorial: Vektorisieren

Zu deinem Edit - auf Canvas kannst du beides - einzelne Pixel manipulieren aber auch Pfade definieren und zeichnen... http://canvas.quaese.de/