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]

=> 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.]

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.

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.

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.

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]

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.]

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.]

[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]

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.

[Chris M.]

OK, dieser Export ist sehr mager, nur die IDs scheinen zu überleben (beim einen "Pumpe" und "Pfeil", beim anderen "WT_Unten", "WT_Oben", "Thermometer" und "Temperatur")

=> Das kannst Du auch selber leicht sehen, wenn Du die SVG in einem beliebigen Text-Editor (wie z.B. notepad) öffnest.

Du musst also mit den Optionen spielen, bis Du es mal schaffst irgendwie relativ freien Text in's SVG hinein zu bekommen. Z.B. gibt's anscheinend nach QuintalDesigns | SVG Files in Adobe Illustrator ein Feld "Description" - was passiert, wenn da Text drinnen steht?

Notlösung: Anscheinend kannst Du auch SVG-Events einstellen. Was passiert wenn Du da was eingibst, z.B. ein alert("hallo!");

[DasVantom]

Hallo zusammen,

ich habe die Icons aus dem KNX-UF Iconset mal in eine *.svg-Datei gewandelt.
Evt. kann diese Datei mal jemand Testen der Ahnung von der Sache hat.

Mit einem Text-Editor lässt sich die Größe und Farbe ändern.

Weitere Details, wenn die Datei funktioniert.


Gruß
Florian

[mfd]

Mit einem Text-Editor lässt sich die Größe und Farbe ändern.

Wenn "nur" die Anforderung ist die Größe und Farbe ändern zu können ist das natürlich völlig unproblematisch.

Das kann ich gerne als SVG ausgeben.
Dann wäre das Icon selbst aber zunächst mal ein einziges statisches Teil (alle Einzelbestandteile "zusammengeklebt").

[DasVantom]

1. Ich habe keine Ahnung von der Sache.

2. Ich dachte darum ging es im wesentlichen bei den Icons. Somit könnte jeder, z.B. in der CV, seine Farbe wählen, ohne das es für jede Farbe einen Ordner geben muss.

Mann hätte eine große Farbauswahl:
SVG/ SVG Farben


Wie gesagt, mein Name ist Hase.

Gruß
Florian

[mfd]

SVG-Test Script/Tool

Gibt es ein Tool (Browser?) mit dem sich die korrekte Darstellung von SVG-Dateien überprüfen läßt? Oder ist es damit ähnlich wie bei Webseiten-Inhalten immer von verschiedenen Faktoren abhängig und nicht so einfach überprüfbar?