Icon als SVG für Smartvisu erstellen - welche Software?

[bmx]

Moin,

mich würde interessieren, womit die SVG Icons für die Smartvisu erstellt worden sind. Illustrator, Inkscape, Handarbeit?

Ich habe festgestellt, das Inkscape doch etliches mehr reinschreibt, als in der derzeitigen Icons zu finden ist...

@Apollo: Wenn demnächst mal die farbigen Ordner rausfallen sollen, sind dann die Standard Icons im SVG Format schwarz oder weiß vorgefärbt?

Gruß,
Bernd

[Apollo]

Hi,

also die SVGs wurden von mfd erstellt meines wissens nach im illustrator.

Bevor sie in smartVISU Verwendung lass ich die durch die verscheidensten Filter laufen (zum Teil auch selbst geschriebene) um die Daten aufzuarbeiten zu komprimerien und unnötiges wegzuschmeisen.

Sie werden immer in schwarz und in weiß mitgeliefert, aber aus einem anderm Grund: Will man die Icons, die über einen exteren Vereis (img Tag) färben, so müssen die Teil des Namensraums der Seite sein (machen halt die Browser so) und damit auch Teil des DOMs. Dies wird umgerechnet, und um diesen kurzen Moment zu überbrücken ist es besser, wenn die SVGs schon ursprünglich mal in der Farbe vorliegen die gewünscht wird.

Gruss

[Apollo]

Wenn du eigene Icons machen willst, dann am Besten direkt von Hand, das hat den Vorteil, das wir diese auch dynamisch animeren können. Das geht super einfach, schau dir mal die widgets/icon.html an.

Entsprechende Amimationsfunktionen (Punkte drehen, bewegen) hab ich schon fertig gemacht. In der widget.js ganz unten.

Bei der Erstellung wird ein 100x100 Raster zugrunde gelegt, wobei 0/0 oben links ist.

Bin gespannt was du machst

Gruss

[bmx]

Bevor sie in smartVISU Verwendung lass ich die durch die verscheidensten Filter laufen (zum Teil auch selbst geschriebene) um die Daten aufzuarbeiten zu komprimieren und unnötiges wegzuschmeissen.

Aha, sowas hatte ich mir gedacht. Dann vermute ich, dass Du die Toolchain nicht publizieren wirst, oder?

Wenn du eigene Icons machen willst, dann am Besten direkt von Hand, das hat den Vorteil, das wir diese auch dynamisch animeren können. Das geht super einfach, schau dir mal die widgets/icon.html an.

Es werden nur ein paar Kleinigkeiten sein, die aber nicht dynamisierungswürdig sind...

Danke für die Info,
Gruß,
Bernd

[Apollo]

Hi Bernd,

Toolchain ist nicht geheim, jedoch auch nicht sonderlich aufregend.

Gruss

[bmx]

Ok, falls jemand das auch machen möchte, hier kurz die Beschreibung, was ich derzeit mache:

1.) Altes SVG-Icon im Inkscape öffnen, quasi als Vorlage.
2.) Neues Icon zeichnen, ggf. aus anderen Icons was zusammenkopieren.
3.) Zeichnung vereinfachen, dazu:
- Auflösen von Konturen zu Pfadobjekten und alles zusammenrechnen, so daß es theoretisch nur noch einen Pfad geben braucht, das ist z.B. wichtig, wenn man das SVG später mal ohne Probleme einfärben möchte.
4.) Speichern als SVG über die normale Speicherfunktion.
5.) Export als ""Normale SVG" in einen Export-Ordner
6.) SVG Cleaner zum Bereinigen nutzen und die SVG in einen Export.Cleaned Ordner schreiben.
7.) SVG mit Editor öffnen, am Anfang der Pfade ein fill="#000" für schwarz oder fill="#fff" für weiß einfügen. Wegen Punkt 3. ist das kein Problem.
Am Ende der Zeilen dann ggf. style-Angaben entfernen.
Nun noch ggf. zur Lesbarkeit noch vor jedem < ein \n einfügen und in den ws oder sw Ordner reinkopieren.

Zu SVG finden sich hier noch recht gut gesammelte Informationen. Bei der Recherche habe ich noch eine tolle Uhr in SVG gefunden. Ist einen Blick wert...

Gruß,
Bernd

[Apollo]

Ich verwende auch SVG Cleaner, zusästzlich entferne ich noch einige Angaben wie width und height (falls die bei dir vorhanden sind), die kann man später schöner setzten (und noch ein paar weitere störende Attribute).

Zum dynamischen Einfärben wird später das svg nochmal nachgeladen und in den DOM gesetzt, nicht wundern mit einem img - Tag und externer Link auf svg funktionierts nicht.

Gruss

[Funsailor]

Ich weiß der Beitreg ist schon Uralt, aber ich versuche im Moment ein Icon zu ändern und komme hiermit:
- Auflösen von Konturen zu Pfadobjekten und alles zusammenrechnen
einfach nicht weiter..

Wie geht das mit dem inkscape?
Also "Pfad -> Kontur in Pfad umwandeln habe ich gemacht
Mache ich dann aber wie im Inkscape Forum vorgeschlagen ein Ctrl-A und dann ein Ctrl-K bekomme ich seltsame Zustände.

Ich such mir schon einen Wolf und finde keine weiteren Hinweise wie ich daraus ein ordentliches Icon hinbekomme.
Die *.svg Datei habe ich mit der ZIP Endung "ladbar" gemacht..
Vieleicht kann mir da jemand auf die Sprünge helfen.
Danke
Michael

[bmx]

Es ist nicht ganz so einfach. Zum einen Gruppierst Du wild Objekte die schon Pfade oder aber noch Objekte sind. Dann hilft kombinieren nicht immer.
Ein Objekt muß erst als Pfad vorliegen bevor er mit anderen Pfaden kombiniert werden kann.
Oftmals hilft auch ein verschmelzen der Pfade.
Ob Deine Datei nun funktioniert, weiß ich nicht aber jetzt kannst Du zumindest sehen, wie die verschmolzenen und dann kombinierten Objekte bei Deinem Icon aussehen.

[Funsailor]

Hallo Bernd,
du hattest das am 04.01.2015 als Rezept beschrieben... So habe ich das dann auch versucht zu machen.
1.) Nehme ein beliebiges funktionierendes "svg" (ich habe das icon "sani_heating_automatic.svg" genommen)
2.) Ändere dies nach deinen Wünschen (Durch kopieren, zeichnen)
3.) Zeichnug vereinfachen ....
Die wilden Gruppierungen mit Pfaden etc .. sind dann wahrscheinlich beim Punkt 3 passiert. Da habe ich mir aus dem Inkscape Forum verschieden Anleitungen angeschaut und gemacht... Das hat aber überhaupt nichts gebracht.
Schon beim Speichern gibt es unterschiede, ich habe dann anstatt "export" (gibt es bei Inkscape nicht mehr) "speichern unter" "normales svg" genommen.
Aber wie gesagt, schon bei Punkt 3.) habe ich wahrscheinlich zu viel falsch gemacht.
Im Projekt ist das nicht betätigte Icon schwarz, beim betätigen ist die Uhr und die Schrift grün, bzw in der Statusanzeige (Testweise) rot

Ich habe auch mal den SVG-Cleaner benutzt, aber das war auch nicht Zielführend.
Versuche ich die Farbe im Inkscape zu ändern, wird alles z.B.: grün außer die vier Balken😯

Gruß
Michael

[wvhn]

Ich habe für v3.0 knapp 100 SVGs bereinigt und dabei überwiegend mit Notepad++ gearbeitet. Inkscape nehme ich nur, wenn ich etwas Neues erstelle, oder ein Icon ergänze.

Beim Bereinigen muss man aufpassen, dass man die Strukturen der Gruppierungen möglichst vereinfacht, aber nicht zerstört. Viele Gruppen (<g> / </g>) kann man einfach rausschmeißen. Gruppen sind sinnvoll, wenn man in den Tags Formate definiert, die für alle gruppierten Elemente gleich sind. Also im Wesentlichen Farben (stroke und fill) und Strichstärken etc. Bei den icons/sw nutzt man die Farbe #000, während icons/ws #fff verwendet. Beim Einfärben von Icons werden diese Farben später von smartVISU automatisch ersetzt.

IDs kann man auch rausschmeißen und als Kopfzeile kopiert man am besten die Kopfzeile eines mitgelieferten Icons (<svg xmlns.... ). Den Rest bis zum Start der ersten Gruppe bzw. des ersten Pfades kann man dann löschen. Ich habe die Variante von bmx mal kurz weiter bearbeitet, aber das Einfärben nicht in SV testen können (siehe Anhang - Endung .zip einfach entfernen)

Gruß
Wolfram

[bmx]

Sorry, die Variante ist nicht zur sofortigen Nutzung in SV gedacht gewesen sondern nur als Arbeitsgrundlage für das weitere Vorgehen.

Prinzipiell gelten die gleichen Regeln für Icons wie für den technische Umsetzung von Schriftentwürfen. Das bedeutet das Du Dich auf Pfade konzentrierst.
Wenn Du mal ein gefülltes "O" anschaust und das umwandelst in einen Pfad wirst Du nur ein Objekt haben. Dieses Objekt kannst Du durch das Auflösen der Kombination in zwei Einzelpfade auflösen.
Um ein kompaktes Icon zu haben sollte dieses am Ende nur aus Pfade bestehen die ggf. miteinander kombiniert sind. Eine gute Einführung zum Arbeiten mit Inkscape ist die Hilfe dazu.

Um das Icon zu nutzen müßtest Du die Füllung erstmal prüfen wie wvhn vorgeschlagen hat und eine zweite Variante dazu um weiß zu erstellen.

[Funsailor]

Hallo,
ich habe jetzt mein svg-Icon jetzt als Bitmap exortiert, ein neues Projekt erstellt und das Bitmap importiert.
Dann Bitmap mit "shift+alt+B" in Pfad umwandeln, Bitmap gelöscht und gespeichert. Mit verschiedenen Optionen. Aber alles nicht so wie es soll.
Entweder ist das Symbol schwarz und bei aktiv grün, oder Weiß und bei aktiv mit einem grünem Rand.
Ich denke mit der Bitmap einfügen geht so auch nicht. Wollte eigentlich ja nur ein Symbol anpassen😣.
Die Datei ist die, die ich als "Inkspace" ohne Optimierung etc abgespeicherte habe.

Gruß
Michael

[schuma]

Da gab es mal eine Anleitung wie man ein SVG Icon erstellt.
Such mal bitte im Forum.
Das war recht einfach. Inkscape, Webseite hochladen, von Webseite speichern, fertig.

edit: doch gefunden...
https://knx-user-forum.de/forum/supp...n-ändern-kann

[Funsailor]

Hallo Marc,
ich hätte schreiben sollen, das ich das auch schon probiert habe...
Geht leider nicht.
Ich hänge mal beide Dateien als *.txt an dann kann man die sofort im Editor öffnen. "ZeichnungOrg.svg.txt" ist die selbe wie die "ZeichnungOrg.svg.zip" und die Datei "ZeichnungOrg_ViaUpDnLoad.svg.txt" ist die nach dem Rezept von hier
https://knx-user-forum.de/forum/supp...n-ändern-kann
erstellte Datei... Da sind alle style - Anweisungen wie "fill" etc weg...

Sorry, ich habe da leider keinen Plan
Gruß
Michael

Edit... Sorry, wegen überschreiten des Limits hänge kann ich nur die gewandelte Datei anhängen.