SVG - Anforderungen an "dynamische" Symbole?

[mfd]

Bisher habe ich keine wirkliche Aussage gefunden welche Anforderungen ein Symbol erfüllen muss um es als SVG "dynamisch" verwenden zu können.
Das "Einfärben" mit einer bestimmten Farbe kann ich mir noch in etwa vorstellen, aber wie sieht das aus, wenn zum Beispiel ein Rollo in mehreren Stufen öffnen oder schließen soll? Der Animation müssen ja einzelne Vektorteile zur Verfügung stehen.
Es muss dann ja eine Art festgelegter Ebenen geben die einer einheitlichen Struktur (Nomenklatur) folgen oder etwas ähnliches.
Kann mir jemand hierzu Informationen liefern wie ich die Symbole bestmöglich darauf hin optimieren kann?

[RalfN]

Hallo Marco,
Ich bin auch nicht der Profi aber schau mal ob dir das weiter hilft. http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html
Die Animation wird wohl mit SMIL gemacht. Im Wikipedia hab ich auch was gefunden http://de.m.wikipedia.org/wiki/Scala...phics#Editoren




Viele Grüße

Ralf

[Chris M.]

Wenn wir jetzt mal nicht über "Animation" sprechen, sondern eher über Templates die nur noch am Client am Schluss gefüllt werden (so wie z.B. das "Fass" bei CometVisu-Client) dann wird's ganz einfach bis ganz schwer

Hier gibt es keine Vorgaben, das Programm ändert einfach Elemente direkt im SVG, genau so wie man es auch im Grafikprogramm könnte.

Das kann man dem Programm nun ganz einfach machen wie beim Beispiel: Da wird nur die Größe des roten Quadrates angepasst und oben das Oval mit verschoben.

Oder man kann sich beliebig komplexe Formen und Manipulationen vorstellen und umsetzen.

=> Hier liegt es in der Kunst des Grafik-Designers möglich einfache Manipulationen zu finden.
Einfach ist dabei weniger die Bewegung an sich, sondern eher dass nur wenige Elemente angefasst werden müssen.

[mfd]

Zitat von Chris M. => Hier liegt es in der Kunst des Grafik-Designers möglich einfache Manipulationen zu finden. Einfach ist dabei weniger die Bewegung an sich, sondern eher dass nur wenige Elemente angefasst werden müssen.

Ich glaube ich verstehe noch nicht 100%ig, wie das dann ein Script(?) letztendlich steuert.
Ich versuche mal ein Beispiel:
Ich nehme das Rollo-Symbol, das besteht aus dem Fenster mit Rahmen und den einzelnen "Lamellen". Nun soll es ja vermutlich so sein, dass der Rahmen mit Fenster immer sichtbar bleibt, also die Basis bildet. Je nach Öffnungsgrad kommen nun die Lamellen dazu (0-10 Stück).
Wie lege ich fest , dass das Script die richtigen Lamellen zur passenden %-Zahl ein- bzw. ausblendet?
Müssen diese jeweils auf einer eigenen Ebene liegen oder zumindest eine bestimmte Beschriftung aufweisen?
Oder muss diese Anpassung nachträglich in einer anderen Software/händisch erfolgen (was IMHO sehr umständlich wäre...)?

Kann ich das Ganze irgendwie selbst testen, damit ich weiß ob es überhaupt funktioniert?

Ich hänge mal einen Screenshot an wie das bei mir aussehen könnte.
Die Frage ist auch, was davon kommt überhaupt im SVG an?

[Hauke]

Ich hab bisher noch nicht allzuviel vom SVG Design verstanden, aber ich glaube es läuft auf folgendes hinaus:
Die Lamelle im SVG einmal definieren und dann x-mal verwenden. Im Otto-Normal-SVG würde man die Anzahl der Lamellen dann hart ins SVG codieren. In unserem Fall kommt das aus einer GA (wie hab ich noch nicht ganz durchschaut, aber ChrisM hat ja schon ein paar Beispiele gebracht die funktionieren).
Wo man jezt die GA (0..100%) in die Anzahl der Lamellen (z.B. 0..5) umrechnet (im SVG, in der Visu selbst oder per externe Logik) hab ich allerdings auch noch nicht raus.

Hoffe es hilft schon mal ein wenig.


Gruß,
Hauke

[Chris M.]

Zitat von mfd Ich glaube ich verstehe noch nicht 100%ig, wie das dann ein Script(?) letztendlich steuert. [...] Oder muss diese Anpassung nachträglich in einer anderen Software/händisch erfolgen (was IMHO sehr umständlich wäre...)?

Vorteil: Es geht per Skript quasi alles (eigene Vorstellung und Fähigkeit ist die Grenze; es gehen sogar vollständige Icons)
Nachteil: Ja, es muss händisch erfolgen

Man kann natürlich einen Zwischenweg probieren, wo man sich im Skript und im SVG auf ein paar Konventionen einigt und das dann halbautomatisch erledigen kann.

Zitat von mfd Ich versuche mal ein Beispiel: Ich nehme das Rollo-Symbol, das besteht aus dem Fenster mit Rahmen und den einzelnen "Lamellen". Nun soll es ja vermutlich so sein, dass der Rahmen mit Fenster immer sichtbar bleibt, also die Basis bildet. Je nach Öffnungsgrad kommen nun die Lamellen dazu (0-10 Stück). Wie lege ich fest , dass das Script die richtigen Lamellen zur passenden %-Zahl ein- bzw. ausblendet? Müssen diese jeweils auf einer eigenen Ebene liegen oder zumindest eine bestimmte Beschriftung aufweisen?

Bei diesem Beispiel würde ich per Skript abhängig von der Position die per GA kommt die entsprechenden Ebenen ein- bzw. ausblenden. Das geht ganz leicht.

Spannender sind Grafiken, die kontinuierlich und nicht diskret sind. Hier könnte man sich z.B. ein Rolladen-Icon vorstellen, das auf einer Ebene horizontale Linien für die Lamellen hat und die für Werte zwischen 0% und 100% einfach hoch und runter bewegt wird. Oben würde ein schwarzen Rechteck drüber liegen, dass die Linien, die zu viel sind, ausblendet. Der Rest vom Icon wird dann oben drüber gemalt.

Hier würde das Skript den Wert in eine vertikale Verschiebung umsetzen.

Zitat von mfd Kann ich das Ganze irgendwie selbst testen, damit ich weiß ob es überhaupt funktioniert?

Einfache Bewegungen kannst Du im Grafikprogramm dadurch testen, dass Du die Aktionen per Hand durchführst.
Also bei Deinem Beispiel per Hand die Ebenen an und ausschaltest.
Oder bei meinem per Hand die Ebene hoch und runter bewegst.

Bei deutlich komplexeren Animationen wird's schwierig, da wird man wohl mehrere Schleifen mit dem Skript-Programmierer drehen müssen.

Zitat von mfd Ich hänge mal einen Screenshot an wie das bei mir aussehen könnte. Die Frage ist auch, was davon kommt überhaupt im SVG an?

Einfach SVG-Export machen, dann kann man die in einem Text-Editor öffnen und ansehen, was angekommen ist.

[mfd]

Zitat von Chris M. Vorteil: Es geht per Skript quasi alles (eigene Vorstellung und Fähigkeit ist die Grenze; es gehen sogar vollständige Icons) Nachteil: Ja, es muss händisch erfolgen Man kann natürlich einen Zwischenweg probieren, wo man sich im Skript und im SVG auf ein paar Konventionen einigt und das dann halbautomatisch erledigen kann. Bei diesem Beispiel würde ich per Skript abhängig von der Position die per GA kommt die entsprechenden Ebenen ein- bzw. ausblenden. Das geht ganz leicht.

Ich dachte auch an etwas wie Ebenen ein- bzw. ausblenden. Und an eine Vorgabe wie die einzelnen Ebenen oder Teile benannt sein müssen, damit ein Script damit klar kommt.
Alles andere wäre für mich ein absolutes No-Go.
Sonst müsste ja der ganze Aufwand doppelt betrieben werden. Einmal Symbol-Design und dann nochmal das Anlegen für Scripttauglichkeit.

[Chris M.]

Zitat von mfd Ich dachte auch an etwas wie Ebenen ein- bzw. ausblenden.

So etwas kann man sicher schön generisch gestalten - ist aber nur eine Idee besser als lauter Icons für verschiedene Zustände. Aber auf jeden Fall schon mal ein guter Anfang.

Vorschlag (ohne Test, ob die SVG das auch schön zulässt):
Bau mal ein Icon, wo Du den Ebenen-Namen nach diesem Muster erstellst:

• [min, max] - Ebene soll einschließlich dem min und dem max Wert erscheinen

Wenn das gut funktioniert, kann man das ja in eine allgemeine Intervall-Schreibweise erweitern.

[Chris M.]

Zitat von Chris M. [min, max]

Ist Müll, geht im SVG-ID nicht.

Was ganz anderes, was das Thema in Summe noch flexibler gestalten sollte:

Kannst Du in deinem Programm irgend einen Kommentar o.ä. vergeben, der dann im SVG auch ankommt?
Wenn das geht, könnte wohl über eine sehr simple Syntax sehr flexibel dynamisiert werden

[mfd]

Zitat von Chris M. Kannst Du in deinem Programm irgend einen Kommentar o.ä. vergeben, der dann im SVG auch ankommt? Wenn das geht, könnte wohl über eine sehr simple Syntax sehr flexibel dynamisiert werden

Ich versuche mal das herauszufinden.

Im Normalfall liegen alle Einzelteile der Icons als Ebenen vor oder als Gruppen von Pfaden. Wie in meinem Screenshot weiter oben.

Ich habe mal noch zwei Icons aus dem Sanitärbereich zu SVG gewandelt und ins SVN gestellt. Dort sollten benannte Ebenen enthalten sein (Illustrator zeigt sie korrekt, Inkscape zeigt mir gar keine Ebenen... ).
Sonst habe ich auf Anhieb nichts gefunden was sich kommentieren ließe.
Werde aber nochmal testen.