SVG - Anforderungen an "dynamische" Symbole?

[Chris M.]

SVG ist klar definiert. (Ist HTML und CSS inzwischen auch, klappt inzwischen auch ziemlich gut, wenn man von einem prominenten Beispiel mal absieht. Aber das wird auch besser...)

Zum Anzeigen einfach mal im Browser öffnen (kann jeder), oder gleich richtig und Inkscape hernehmen.

[mfd]

Zum Anzeigen einfach mal im Browser öffnen (kann jeder), oder gleich richtig und Inkscape hernehmen.

Im Browser komme ich leider nicht weiter, der FF mäkelt beim Öffnen (Bei der Weitergabe des Befehls ist ein Fehler aufgetreten) und IE tut IMHO... einfach nichts.
Klar mit Inkscape funktioniert es, aber zum durchzappen nicht gerade handlich.

Was mir aufgefallen ist: beim Abspeichern als SVG werden die Dateien welche Buchstaben aus einer Schriftart enthalten im Verhältnis sehr groß (bis ca. 650kB). Das muss ich noch irgendwie in den Griff bekommen.

[Apollo]

Hallo mfd,

hab mir nun das Thema mal in der Tiefe angeschaut und getestet.

Für SVGs gibts prinzipiell 2 Ansätze:

1. Zeichnen des SVGs mit PATH-Elementen. So sind deine Icons abgespeichert, sprich dein Programm macht das so.

Plus:

• Einfach zu genereieren

Minus:

• Nicht für dynamische Zwecke einsetzbar, da der PATH dynamisch geändert werden müsste
• Größer (kb) und komplexer, da jede "Teillinie" im PATH aufgelöst wird und z. B.: keine Rundungen verwendet werden.

2. Zeichnen des SVGs mit Grundelementen (wie Rechteck, Linie...)

Plus:

• Dynamisch veränderbar, da einfach Grundelemente hinzugefügt oder geändert werden
• Klein und überschaubar, optimal im Browser rechenbar, da minimaler Ansatz

Minus:

• Wäre sehr Aufwendig, da jedes Icon nachprogrammiert werden müsste

Zur Verdeutlichung (control_arrow_up):

1.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
     height="361px" viewBox="0 0 361 361" >
<g>
    <path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M231.816,180.54c2.929,0,5.303,0.741,5.303,1.654
        v28.69c0,0.914-2.374,1.655-5.303,1.655H128.421c-2.928,0-5.302-0.741-5.302-1.655v-28.69c0-0.913,2.374-1.654,5.302-1.654H231.816
        z"/>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M104.872,182.354c26.75-35,53.501-70,80.252-105c-2.878,0-5.756,0-8.635,0
                c26.75,35,53.501,70,80.251,105c1.439-2.508,2.878-5.016,4.317-7.523c-49.383,0-98.765,0-148.147,0c-4.119,0-8.237,0-12.355,0
                c-6.449,0-6.449,10,0,10c49.382,0,98.765,0,148.147,0c4.118,0,8.237,0,12.355,0c3.436,0,6.707-4.397,4.317-7.523
                c-26.75-35-53.501-70-80.251-105c-2.429-3.178-6.206-3.178-8.635,0c-26.75,35-53.501,70-80.252,105
                C92.32,182.433,101.012,187.404,104.872,182.354z"/>
        </g>
    </g>
</g>
</svg>

2.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
    <g>
        <polyline id="line0" points="50,50, 25,50, 50,18, 75,50, 50,50" fill="none" />
        <polyline id="line1" points="32,50, 32,60, 68,60, 68,50" fill="none" />
    </g>
</svg>

Man sieht schon an dem sehr einfachen Beispiel die Unterschiede. Für "statische" ist der "Überhang" aus meiner Sicht zu vernachlässigen. Für dynamische ist der zweite Weg (2.) sehr viel übersichtlicher. In der aktuellen smartVISU hab ich die paar Koordinaten (Weg 2) dynamisch rechnen lassen, sodaß sich der Pfeil in einem beliebigen Winkel drehen kann.

Was ich gerade noch versuche ist den Weg 1 zu optimieren, da gibts scheinbar ein paar Programme.

Gruss

[mfd]

Was würde das bedeuten wenn ich in (m)einem Vektorgrafikprogramm ein "dynamisch"-taugliches Icon erstellen wollte?
Kann ich dann nur bestimmte Elemente verwenden?
Oder ist das in einer Nichtprogrammiersoftware sowieso nicht möglich?

Wenn ich das Prinzip richtig verstanden habe wären dann nur mehr oder weniger simple Formen möglich bzw. einfache (gefüllte?) Symbole.
Bei dem Pfeilbeispiel ist natürlich auch ein gewaltiger optischer Unterschied zwischen beiden Varianten.
Zumal bei den Icons bisher gar keine scharfen Ecken sondern nur abgerundete vorkommen...

[Apollo]

Was würde das bedeuten wenn ich in (m)einem Vektorgrafikprogramm ein "dynamisch"-taugliches Icon erstellen wollte?
Kann ich dann nur bestimmte Elemente verwenden?

Das wäre schon mal interessant das herauszufinden. Man müsste mal eine "pure" Linie, Polylinie, Rechteck und Kreis malen (ohne das die sich berühren) und dann exportieren.

Oder ist das in einer Nichtprogrammiersoftware sowieso nicht möglich?

Doch das müsste schon gehen, vereinzelt hab ich das auch schon in deinen SVGs gesehn.

Wenn ich das Prinzip richtig verstanden habe wären dann nur mehr oder weniger simple Formen möglich bzw. einfache (gefüllte?) Symbole.
Bei dem Pfeilbeispiel ist natürlich auch ein gewaltiger optischer Unterschied zwischen beiden Varianten.

Wirklich? Bei der Auflösung fällt es mir gar nicht so auf. Hab in Anhang mal den Unterschied dargestellt, mit der Preisfrage, welches ist welches? (Also welches statisch (1), welches dynamisch (2), wenn man das so nennen mag).

Zumal bei den Icons bisher gar keine scharfen Ecken sondern nur abgerundete vorkommen...

Ich meine der Browser rendert jede Linie am Ende mit einem Halbkreis, nicht mit einem Quadrat. Treffen zwei Linien aufeinander wird es spitz.

Gruss

[mfd]

Bei der Auflösung fällt es mir gar nicht so auf. Hab in Anhang mal den Unterschied dargestellt, mit der Preisfrage, welches ist welches?

Ich denke schon, dass man selbst in der Größe erkennt, dass das rechte Symbol abgerundete Kanten hat.
Aber es geht ja (gerade) auch bei SVGs um die Skalierbarkeit.
In Zeiten von "Retina-Displays" sollte man nicht auf "wird bei geringer Auflösung schon untergehen" hoffen.

Ich habe mal eine Testdatei mit ein paar Formen angehängt. Eine Linie ohne Kontur habe ich nicht dabei (macht IMHO wenig Sinn, da sie ja nicht sichtbar wäre...). Interessant für mich wäre, ob das Element unten rechs brauchbar ist (nur Konturlinie).

[Apollo]

Ich denke schon, dass man selbst in der Größe erkennt, dass das rechte Symbol abgerundete Kanten hat.
Aber es geht ja (gerade) auch bei SVGs um die Skalierbarkeit.
In Zeiten von "Retina-Displays" sollte man nicht auf "wird bei geringer Auflösung schon untergehen" hoffen.

Klar erkennt man das. Das schöne ist man kann was dagegen tun:

Es gibt im svg ein Attribut dafür "stroke-linejoin" die bestimmt wie die Ecken auszusehen haben.

Erstes Besipiel ohne,

<polyline id="line0" points="50,50, 25,50, 50,18, 75,50, 50,50" fill="none" />
<polyline id="line1" points="32,50, 32,60, 68,60, 68,50" fill="none" />

zweites Beispiel mit. (wobei das Linke jeweis das "statische" (programmerzeugte) und das Rechte das Programmierte ist.

<polyline id="line0" [B]stroke-linejoin="round"[/B] points="50,50, 25,50, 50,18, 75,50, 50,50" fill="none" />
<polyline id="line1" [B]stroke-linejoin="round"[/B] points="32,50, 32,60, 68,60, 68,50" fill="none" />

Natürlich ließe sich das auch in eine .css auslagern, genau hier fährt "elementbasiertes" svg seine Stärken aus.

Ich habe mal eine Testdatei mit ein paar Formen angehängt. Eine Linie ohne Kontur habe ich nicht dabei (macht IMHO wenig Sinn, da sie ja nicht sichtbar wäre...). Interessant für mich wäre, ob das Element unten rechs brauchbar ist (nur Konturlinie).

Das Rechteck und der Kreis oben links sind "sauber" der Rest wieder als Path.

Gruss

[mfd]

Gibt es möglicherweise ein Tool das das nachträglich erledigen bzw. "geradebiegen" kann?
Von meiner Software aus sehe ich keine Möglichkeit 100%ig zu gewährleisten, dass nur die "erlaubten" Elemente vorkommen.

[Apollo]

Ich kenne keines, würde auch vermuten, das das nicht ganz so einfach geht. Grundformen können noch erkannt werden, bei Rundungen (und das sind die meisten Angaben in dem Path) wirds schon schwierig.

Es gibt Programme, die die SVG Struktur vereinfachen, verschiedene Optimierungen vornehmen, aber die Nettoinfos unverändert lassen. Dadurch spart man schon gut die Hälfte, von deiner Basis ausgegangen.

Bei denen die man dynamisch machen will, würde es genügen, wenn du die Koordinaten der Eckpunkte liefern könntest (ich hab meine Icons mal auf 100x100 Einheiten normiert) und dann kann man die sehr sehr leicht nachprogrammieren. Es sind ja in der Regel nur ein paar wenige Formen.

Oder was meinst du?

Gruss

[mfd]

Bei denen die man dynamisch machen will, würde es genügen, wenn du die Koordinaten der Eckpunkte liefern könntest

Da muss ich mal in Ruhe suchen, ob das in der Software machbar ist... ich denke bei einer 3D-Software wäre das wohl kein Problem.
Wo ist bei "deinem" Koordinatensystem denn der Nullpunkt?

[Apollo]

Nullpunkt: Oben links.

Gruss

[Apollo]

Hier mal ein paar Beispiele, die nun schon dynamisch sind... .

Pro Icon schätze ich so ca. 20 Minuten, je nach dem wie aufwendig die Animation ist.

Gruss

[mfd]

Chris M. wie man an meinem letzten Posting sieht habe ich mich mal mit svg (in dem Fall als Hintergrund) auseinandergesetzt. An anderer Stelle im Forum habe ich gefunden, dass du schon mal Details zu Inkscape und SVGs gepostet hattest. Es wäre gut wenn wir mal einen Workflow finden wie "interaktive Icons" aussehen müssten, dass sie z.B. von der CV passend angesprochen werden können. Ich meine mich zu erinnern, dass hier mal die IDs angeprochen wurden, welche in Inkscape (im Gegensatz zu Illustrator) auch sichtbar sind...

[Chris M.]

Es wäre gut wenn wir mal einen Workflow finden wie "interaktive Icons" aussehen müssten, dass sie z.B. von der CV passend angesprochen werden können. Ich meine mich zu erinnern, dass hier mal die IDs angeprochen wurden, welche in Inkscape (im Gegensatz zu Illustrator) auch sichtbar sind...

Das Problem an dem wir gescheitert sind, war, dass ich nicht weiß, was im Illustrator geht - und Du nicht weißt, was interaktiv mit SVGs geht. Ein Deadlock...

Am einfachsten kann man interaktiv auf SVG Elemente zugreifen, die die ID gesetzt haben (damit wären individuelle Elemente adressierbar) und/oder die das class Attribut gesetzt haben (damit wären beliebig viele Elemente auf gleichartige Weise adressierbar).

So könnte man sich z.B. eine class "turn90" vorstellen, und einen generischen SVG-Icon-Handler der genau die Elemente mit dieser Klasse - je nach Wert - bis zu 90° dreht (also KNX Paket mit 0% dreht gar nichts, eines mit 50% dreht um 45° und eines mit 100% um 90°).
Da könnte man sich dann ein paar solcher Klassen vorstellen und das ganze würde automagisch funktionieren

[mfd]

Das Problem an dem wir gescheitert sind, war, dass ich nicht weiß, was im Illustrator geht - und Du nicht weißt, was interaktiv mit SVGs geht. Ein Deadlock...

Am einfachsten kann man interaktiv auf SVG Elemente zugreifen, die die ID gesetzt haben (damit wären individuelle Elemente adressierbar) und/oder die das class Attribut gesetzt haben (damit wären beliebig viele Elemente auf gleichartige Weise adressierbar).

Da sind wir ja jetzt etwas weiter, nachdem ich mir das mit den IDs in Inkscape mal angesehen habe. Falls das im Illustrator nicht zu machen ist sehe ich meine Aufgabe darin, dass ich mir alle relevanten Icons nochmal im Detail in Inkscape anschauen muss (das könnte ein hartes Stück Arbeit werden... ) und diese so umbaue, dass sie mit passenden IDs bzw. class vorliegen.
Es könnte aber mit ein paar Tricks auch im Illustrator klappen. Zumindest wenn ich diese Anleitung richtig interpretiere.

Mein Vorschlag, nehmen wir mal ein einfaches Beispiel-Icon bei dem es Sinn machen würde Interaktivität einzubauen (Raffstore o.ä.). Ich bräuchte dazu am besten eine Vorgabe wie class oder ids aussehen sollen.