smartVISU-Logo als SVG

[ares72]

Gibt es bereits ein smartVISU-Logo als SVG oder hat sich schon jemand die Mühe gemacht und kann mir das zur Verfügung stellen?

Details:
Der WAF von smartVISU ist bei uns stark gesunken, nachdem meine beiden Damen seit kurzem Apple-Geräte verwenden. Das Problem am iPhone und iPad ist, dass Apple die Verbindung in smartVISU (zu fhem) abbricht und smartVISU die Verbindung auch nach einem Klick auf das Logo rechts oben oder einem Reload nicht zuverlässig aufbaut. Man braucht hier wirklich viele Versuche und viel Geduld, da das Reproduzieren nicht sofort möglich ist und ich kein iPhone/iPad verwende. Ich habe keine vernünftige Lösung für meine Damen gefunden, also habe ich Alternativen zu fhem gesucht. Der erste Versuch ist nun Home Assistant.

Der erste Eindruck von HomeAssistant war OK und es sieht halt anders aus, dann kam aber schnell das "naja". Berechtigungen sind wohl noch nicht so weit und Einschränkungen für Kinder können anders als in smartVISU mit fhem relativ leicht umgangen werden. Ein gravierendes Problem nicht nur für mich ist, dass es keine Möglichkeit gibt, den letzten Zeitpunkt von Änderungen (zum Beispiel Heizung meldet Service") auch nach einem Neustart anzuzeigen. Wie schön war da doch fhem und der Wahlfreiheit pro Sensor. Egal, genug gejammert, die Entwickler wollen hier wohl seit Jahren nicht einlenken.
Toll an Home Assistant ist aber, dass ich in Home Assistant smartVISU einbinden kann und damit der WAF wieder steigt, da es über den Umweg keine Verbindungsprobleme mehr gibt. Aktuell wird beim Start der App nur smartVISU angezeigt, ich würde das aber gerne um ein paar weitere Informationen ergänzen und smartVISU dann als "Zimmer" anzeigen. Da das smartVISU-Logo bei meinen Damen schon bekannt ist, würde ich das gerne beibehalten, was als PNG aber an vielen Stellen nicht funktioniert. Ein eigenes SVG kann man aber mit einem kleinem Umweg verwenden. Ich hoffe, die Arbeit hat sich schon jemand gemacht, damit das SVG auch weiterhin hübsch aussieht.

[wvhn]

Abhilfe zu dem Problem mit Apple-Geräten gibt es hier im Forum. Es ist ein Fehler von Safari. Mit Firefox funktioniert die Websocketverbindung. Oder man stellt auf Hostnamen statt IP-Adressen um.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

noch einen weiteren Browser wollen sie nicht, verstehe ich auch. Ich glaube, meine Damen haben das mit Safari und Chrome getestet und beides funktioniert nicht, zumindest nicht als Link am Startbildschirm wie sie es wollen, immerhin ist smartVISU ja ihr täglicher Begleiter. Ich dachte daher, Apple trennt die Verbindung um den Akku zu schonen. Leider klappt auch das erneute Verbinden mit fhem (!) nicht so wie Du es schon in einem anderen Post mit Hinweis "debugen schwierig" dokumentiert hast. So geht's auch mir beim Ausprobieren, ich habe ja kein iPhone und die Verbindung bricht ja auch nicht auf Knopfdruck ab.

Dass es mit Hostnamen funktioniert habe ich übersehen, muss ich mal testen. Danke für den Hinweis!

Der Umweg über Home Assistant funktioniert auch schon zuverlässig und ich sehe da zusätzliche Möglichkeiten. Die Leiste oben mit der Überschrift "SmartVisu" (inzwischen "smartVISU") und die Auswahlen links sind derzeit noch ausgeblendet. Um mehr Seiten anzuzeigen, ist aber zumindest die Seite oben sinnvoll, hier lässt Home Assistant aber nur SVG Icon zu. Ich möchte smartVISU auch nicht ersetzen, aber eben "hübsch" mit Icon einbinden.

Mit Inkscape soll das Konvertieren und manuelle Nachbessern auch möglich sein, Home Assistant bereitet mir aber auch so schon nach Feierabend genug Kopfschmerzen. Ich hoffe daher, jemand hat das schon fertig und kann das SVG icon zur Verfügung stellen.

Danke
Manfred

[ares72]

Ich habe etwas gebastelt... erst schön, dann ganz einfach.
Aber auch stark vereinfacht sieht es mit 24x24 Pixel nicht wirklich gut aus.

Hier die "besser-als-nix"-Version:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect fill="#fff" x="2" y="2" width="20" height="20"/>
<path fill="#444" d="m3.74 23.9c-1.55-0.356-2.62-1.16-3.23-2.41-0.189-0.391-0.348-0.857-0.449-1.31-0.0604-0.272-0.0626-0.558-0.0633-8.29l-7.16e-4 -8 0.0825-0.294c0.236-0.838 0.546-1.45 1.03-2.03 0.582-0.691 1.53-1.26 2.52-1.51l0.271-0.0692 16.3 0.0171 0.331 0.103c0.934 0.29 1.55 0.644 2.14 1.24 0.57 0.572 0.927 1.17 1.22 2.06l0.102 0.308-6e-4 16.2-0.08 0.348c-0.461 2.01-1.66 3.19-3.69 3.64-0.272 0.0605-0.552 0.0625-8.21 0.061l-7.93-0.0016zm15.4-3.33c0.674-0.0564 1.06-0.206 1.41-0.546 0.276-0.271 0.427-0.554 0.539-1.01 0.0459-0.187 0.056-0.668 0.0763-3.62 0.0129-1.88 0.0248-3.46 0.0264-3.52 0.0037-0.139-0.129-0.528-0.268-0.784-0.149-0.275-0.461-0.571-0.758-0.72-0.509-0.255 0.15-0.232-7.49-0.258-3.95-0.0134-7.08-0.0107-7.38 0.0064-0.615 0.0344-1.07 0.12-1.34 0.251-0.107 0.0529-0.288 0.193-0.427 0.33-0.277 0.274-0.468 0.631-0.553 1.04-0.0568 0.27-0.0657 0.569-0.0183 0.617 0.0198 0.0198 0.0357 1.24 0.0421 3.24 0.0102 3.21 0.0103 3.21 0.0843 3.47 0.214 0.761 0.646 1.23 1.32 1.43 0.184 0.0554 0.61 0.0599 7.2 0.0758 3.85 0.0093 7.04 0.0203 7.08 0.0244 0.0455 0.0041 0.254-0.0069 0.463-0.0244zm-12.7-2.31c-0.093-0.0832-0.157-0.271-0.746-2.18-0.989-3.2-0.942-3.04-0.905-3.17 0.0177-0.064 0.0836-0.162 0.146-0.217 0.215-0.188 0.513-0.179 0.712 0.0232 0.114 0.116 0.141 0.197 0.623 1.84 0.622 2.13 0.574 1.97 0.612 1.96 0.0175-0.0058 0.274-0.841 0.57-1.86 0.412-1.41 0.556-1.87 0.616-1.93 0.304-0.33 0.898-0.154 0.901 0.267 6.42e-4 0.0865-0.275 1.03-0.751 2.59-0.414 1.35-0.769 2.49-0.789 2.54-0.0725 0.184-0.166 0.222-0.544 0.222-0.327 0-0.347-0.0041-0.444-0.091zm3.26 0.0445c-0.226-0.0985-0.214 0.0684-0.214-2.84v-2.63l0.0718-0.0912c0.208-0.265 0.721-0.236 0.863 0.0492 0.0536 0.107 0.0578 0.301 0.0561 2.65-0.0013 1.87-0.0121 2.56-0.0413 2.65-0.0587 0.17-0.222 0.266-0.45 0.265-0.102-7.13e-4 -0.231-0.0211-0.286-0.0452zm2.43 0.0104c-0.211-0.0409-0.59-0.235-0.773-0.397-0.267-0.235-0.345-0.475-0.232-0.713 0.0614-0.129 0.286-0.277 0.421-0.277 0.106 0 0.287 0.11 0.513 0.31 0.215 0.191 0.442 0.269 0.783 0.268 0.429-5.7e-4 0.729-0.172 0.808-0.462 0.0889-0.327 0.0259-0.622-0.18-0.842-0.164-0.175-0.26-0.228-0.87-0.477-0.529-0.216-0.76-0.351-0.981-0.569-0.299-0.296-0.445-0.733-0.407-1.22 0.05-0.652 0.473-1.1 1.22-1.3 0.324-0.0852 1.03-0.0761 1.37 0.0178 0.441 0.12 0.607 0.212 0.682 0.376 0.0355 0.0781 0.0648 0.175 0.0652 0.216 0.0012 0.117-0.0976 0.332-0.176 0.382-0.147 0.0946-0.23 0.0904-0.601-0.0309-0.492-0.161-0.91-0.188-1.17-0.0772-0.372 0.16-0.483 0.489-0.282 0.834 0.106 0.181 0.31 0.306 0.858 0.523 0.597 0.237 0.798 0.346 1 0.541 0.31 0.297 0.455 0.605 0.501 1.06 0.095 0.942-0.34 1.62-1.17 1.84-0.157 0.0408-1.16 0.0398-1.37-0.0014zm4.34-0.0075c-0.376-0.105-0.829-0.463-0.975-0.771-0.146-0.307-0.149-0.357-0.149-2.59l-3.92e-4 -2.13 0.112-0.122c0.102-0.112 0.129-0.123 0.323-0.135 0.18-0.0111 0.228-0.0015 0.327 0.065 0.24 0.161 0.232 0.0826 0.232 2.25 5.8e-5 2.22-0.0022 2.19 0.249 2.44 0.112 0.108 0.184 0.146 0.333 0.177 0.44 0.0914 0.806-0.0663 0.963-0.415 0.0546-0.121 0.0609-0.301 0.0761-2.17l0.0166-2.04 0.0738-0.104c0.109-0.153 0.278-0.222 0.499-0.203 0.159 0.0132 0.197 0.031 0.293 0.136l0.11 0.12-2.5e-4 2.04c-1.5e-4 1.23-0.0138 2.13-0.034 2.26-0.0749 0.477-0.36 0.84-0.851 1.08l-0.253 0.125-0.598 0.0073c-0.401 0.0049-0.647-0.0064-0.748-0.0344zm-3.02-9.79c0.246-0.0355 0.591-0.189 0.788-0.35 0.0769-0.063 0.149-0.115 0.159-0.115 0.0106 0 0.0193 0.0642 0.0193 0.143 0 0.22 0.056 0.271 0.295 0.27 0.335-0.00193 0.317 0.0695 0.317-1.27 0-1.01-0.0073-1.18-0.0616-1.39-0.184-0.72-0.79-1.09-1.6-0.973-0.298 0.0431-0.688 0.168-0.765 0.245-0.128 0.128-0.104 0.43 0.0404 0.496 0.0687 0.0313 0.134 0.0201 0.393-0.0675 0.398-0.134 0.682-0.142 0.933-0.0253 0.17 0.0792 0.17 0.0792 0.307 0.43 0.117 0.299 0.131 0.362 0.0982 0.425-0.0609 0.116-0.0884 0.123-0.476 0.124-0.569 0.00169-1.13 0.144-1.37 0.35-0.272 0.233-0.398 0.683-0.293 1.05 0.0952 0.327 0.389 0.583 0.754 0.654 0.196 0.0385 0.214 0.0387 0.453 0.00416zm-0.275-0.593c-0.195-0.121-0.26-0.222-0.275-0.43-0.0135-0.187-0.00969-0.197 0.114-0.327 0.169-0.178 0.383-0.241 0.886-0.265 0.456-0.0212 0.484-0.00666 0.482 0.254-0.0014 0.296-0.207 0.58-0.54 0.746-0.212 0.106-0.517 0.115-0.668 0.0217zm-7.82 0.498c0.484-0.174 0.686-0.525 0.612-1.07-0.072-0.527-0.396-0.806-1.19-1.03-0.433-0.12-0.5-0.157-0.577-0.319-0.0675-0.142-0.031-0.311 0.101-0.468 0.186-0.221 0.474-0.247 0.95-0.0853 0.355 0.121 0.479 0.0988 0.554-0.0986 0.103-0.271-0.128-0.433-0.741-0.522-0.859-0.124-1.46 0.256-1.5 0.957-0.0224 0.343 0.0342 0.514 0.239 0.723 0.156 0.159 0.198 0.181 0.598 0.312 0.531 0.175 0.705 0.26 0.839 0.412 0.0871 0.0992 0.105 0.146 0.105 0.282 0 0.297-0.0969 0.393-0.473 0.468-0.244 0.0491-0.494-0.00705-0.843-0.19-0.309-0.161-0.407-0.177-0.504-0.0791-0.0729 0.0729-0.089 0.26-0.0317 0.367 0.0717 0.134 0.423 0.303 0.793 0.38 0.306 0.0644 0.825 0.042 1.07-0.046zm14.7 0.0285c0.164-0.0622 0.194-0.386 0.0489-0.518-0.0562-0.051-0.138-0.0655-0.446-0.079-0.357-0.0157-0.381-0.0213-0.468-0.108l-0.0918-0.0918v-2.23l0.497-0.0197c0.273-0.0108 0.499-0.022 0.502-0.0248 0.0836-0.0725 0.11-0.131 0.11-0.245 0-0.238-0.0416-0.257-0.565-0.257-0.251 0-0.479-0.00904-0.508-0.0201-0.0455-0.0175-0.0524-0.113-0.0524-0.726 0-0.688-2e-3 -0.709-0.0756-0.794-0.0552-0.0641-0.117-0.0926-0.23-0.105-0.14-0.0158-0.164-0.00765-0.257 0.0846l-0.102 0.102 0.0099 2.13c9e-3 1.95 0.0148 2.14 0.0692 2.28 0.176 0.454 0.656 0.714 1.24 0.672 0.133-0.00957 0.276-0.0303 0.318-0.0462zm-13-0.0194c0.0545-0.0282 0.113-0.0887 0.131-0.135 0.0178-0.0469 0.0317-0.558 0.0317-1.17v-1.09l0.0925-0.177c0.227-0.434 0.845-0.531 1.2-0.188 0.221 0.216 0.217 0.189 0.235 1.49l0.0166 1.19 0.0824 0.0667c0.0662 0.0536 0.117 0.0638 0.258 0.0521 0.301-0.0249 0.286 0.0365 0.305-1.28l0.0166-1.15 0.0864-0.166c0.306-0.587 1.13-0.568 1.41 0.0329 0.076 0.163 0.0772 0.183 0.0775 1.26l3.23e-4 1.1 0.0799 0.0929c0.0684 0.0795 0.105 0.0929 0.251 0.0929 0.145 0 0.183-0.0137 0.248-0.0891 0.103-0.12 0.13-0.496 0.108-1.5-0.0185-0.819-0.0463-1.01-0.192-1.33-0.385-0.854-1.45-0.981-2.11-0.252l-0.198 0.219-0.067-0.11c-0.109-0.18-0.363-0.421-0.528-0.502-0.122-0.0603-0.21-0.0762-0.42-0.0762-0.315 0-0.551 0.0934-0.787 0.312-0.0808 0.0745-0.164 0.135-0.185 0.135-0.0217 0-0.0377-0.0546-0.0377-0.129 0-0.261-0.218-0.36-0.471-0.212-0.108 0.0628-0.108 0.0637-0.129 0.392-0.0384 0.604-0.0318 2.81 0.00871 2.93 0.0409 0.117 0.2 0.233 0.32 0.233 0.0419 6.8e-5 0.121-0.0229 0.175-0.0511zm9.33-0.0702 0.0795-0.0924-0.0194-0.679c-0.031-1.09 0.0341-1.55 0.253-1.81 0.182-0.213 0.406-0.315 0.754-0.344 0.358-0.0297 0.44-0.086 0.44-0.303 0-0.112-0.0192-0.153-0.112-0.235-0.108-0.0969-0.12-0.0994-0.38-0.0857-0.349 0.0184-0.605 0.132-0.823 0.363l-0.157 0.167v-0.148c0-0.0999-0.0224-0.177-0.0686-0.235-0.0591-0.0751-0.0936-0.0872-0.248-0.0872-0.136 0-0.196 0.0163-0.246 0.0662-0.0644 0.0644-0.0662 0.11-0.0662 1.7 0 1.77-0.0028 1.74 0.177 1.81 0.127 0.0545 0.328 0.0108 0.415-0.0903z"/>
<path fill="#000" d="m3.82 23.9c-1.7-0.295-3.21-1.57-3.61-3.28-0.359-1.21-0.147-2.5-0.207-3.75 0.025-1.73-0.052-3.48 0.0498-5.2 0.949 0.212 1.89 0.439 2.84 0.682 0.0769 2.17-0.0413 4.34 0.091 6.5 0.0976 1.08 1.13 1.88 2.2 1.73 4.76 0.0304 9.52 7e-3 14.3 0.0098 0.927-0.162 1.67-0.976 1.66-1.93 0.0803-2.2 0.0312-4.41 0.0445-6.61 0.923-0.326 1.88-0.535 2.85-0.692-0.0116 2.85 0.0291 5.69-0.0297 8.54-0.195 1.9-1.64 3.59-3.54 3.97-0.85 0.243-1.75 0.082-2.62 0.128-4.56-0.0085-9.12 0.0125-13.7-0.0143-0.105-0.0218-0.21-0.0436-0.315-0.0654zm2.68-5.59c-0.475-0.693-0.557-1.65-0.874-2.45-0.28-0.971-0.634-1.93-0.844-2.91 0.775-1.05 1.25 0.669 1.36 1.31 0.285 0.592 0.389 2.03 0.777 2.18 0.429-1.2 0.682-2.47 1.13-3.66 0.773-0.622 1.1 0.522 0.651 1.08-0.442 1.46-0.872 2.92-1.36 4.36-0.223 0.192-0.576 0.149-0.841 0.0902zm5.75 0.0164c-0.742 0.0909-1.78-1.26-0.603-1.33 0.5 0.605 1.94 0.896 2.05-0.169-0.0634-1.26-1.83-0.968-2.31-1.97-0.422-0.812-0.0496-1.98 0.924-2.16 0.682-0.12 2.3-0.268 2.14 0.785-0.566 0.525-2.26-0.729-2.25 0.699 0.389 0.895 1.74 0.688 2.2 1.57 0.604 0.917 0.137 2.49-1.07 2.57-0.362 0.0274-0.729 0.0458-1.09 0.0078zm4.47-8e-5c-0.998-0.0311-1.52-1.09-1.35-1.99 0.0196-1.18-0.0709-2.38 0.0403-3.55 0.968-0.727 0.985 0.843 0.896 1.46 0.095 1-0.196 2.1 0.195 3.04 0.932 0.824 1.77-0.42 1.46-1.34 0.0519-1.06-0.0754-2.14 0.104-3.19 1.18-0.66 0.831 1.15 0.854 1.81-0.0832 0.99 0.117 2.04-0.173 2.99-0.414 0.756-1.26 0.834-2.03 0.76zm-7.09-0.0678c-0.326-0.827-0.075-1.83-0.149-2.72 0.061-0.938-0.0971-1.94 0.127-2.84 0.594-0.38 0.984 0.198 0.825 0.728-0.0053 1.57-0.0105 3.14-0.0158 4.7-0.189 0.229-0.533 0.255-0.788 0.126z"/>
</svg>
​

Mal schaun, vielleicht finde ich noch eine bessere Lösung sobald die anderen Baustellen weniger werden.

[wvhn]

Das "icon" ist eigentlich ein Stück html-Code des Macros "lib.smartvisu" in der ./widgets/lib.html und dem zugehörigen CSS in der ./pages/base/base.css. Dazu gehört der Hintergrund ./pages/base/pics/app.png und die Schriftdateien ./pages/base/dosis.woff ,.ttf und .eot.

Mit Hilfe von ChatGPT habe ich das jetzt mal in ein reines Vektorformat ohne Bitmaps übersetzt, wobei die Schriftdatei "dosis.woff" im selben Ordner wie das svg-icon liegen muss:

<svg xmlns="http://www.w3.org/2000/svg"
     width="72" height="72" viewBox="0 0 72 72">

  <defs>
    <style>
      @font-face {
        font-family: 'Dosis';
        src: url('dosis.woff') format('woff');
        font-weight: 500;
      }
      .smart {
        font-family: 'Dosis';
        font-size: 20px;
        fill: #ffffff;
        font-weight: 200;
      }
      .visu {
        font-family: 'Dosis';
        font-size: 20px;
        fill: #000000;
        font-weight: 700;
      }
    </style>

    <!-- Hintergrund-Lichtverlauf -->
    <radialGradient id="appBgGradient" cx="50%" cy="-180%" r="250%">
      <stop offset="0%" stop-color="#cccccc"/>
      <stop offset="90%" stop-color="#888888"/>
      <stop offset="100%" stop-color="#111111"/>
    </radialGradient>

    <linearGradient id="visuGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#cccccc"/>
    </linearGradient>
  </defs>

  <!-- Icon background -->
  <rect x="4" y="4" width="64" height="64" rx="11" fill="url(#appBgGradient)" />

  <!-- smart -->
  <text x="36" y="28" text-anchor="middle" class="smart">
    smart
  </text>

  <!-- VISU background -->
  <rect x="12.7" y="32" width="46.6" height="25.6" rx="3"
        fill="url(#visuGradient)"/>

  <!-- VISU -->
  <text x="36" y="52" text-anchor="middle" class="visu">
    VISU
  </text>

</svg>

Der radiale Farbverlauf trifft das Original noch nicht zu 100%, aber als Basis ist das Ergebnis IMHO ganz gut. Wer möchte kann das gerne weiter perfektionieren.

grafik.png

Wenn man die Schriftart nicht in einer separaten Datei haben will / darf, dann kann man sie auch integrieren. Dazu wird die dosis.woff mit einem Online-Tool in eine base64-codierte data-url gewandelt und anstelle der bisherigen url angegeben:

     src: url(data:font/woff;base64, ...<base64-codierte Datei> ...) format("woff");

Gruß
Wolfram

[ares72]

Das ist ja mal genial, vielen Dank für die Arbeit!

Leider macht die Schriftart tatsächlich Probleme in Home Assistant, auch als "base64-codierte Datei".
Da sich der Text aber nicht ändert, wollte ich diesen einfach in einen Pfad umwandeln.

Mit Inkscape (Windows) funktioniert dosis.woff leider nicht, daher habe ich die dosis.ttf installiert und verwendet. Da passt dann font-weight wieder nicht, ein Drama. Ich habe nun einfach einen Rahmen um die Schrift erstellt, damit die Schrift "bold" aussieht.

Vielleicht kann die Version ja jemand bauchen oder, falls es nicht gefällt, bei Bedarf mit der Info selbst besser umsetzen.
Edit: Ich habe die beiden VISU-Pfade Text/Border zusammengefasst, das spart nochmal Platz. Die neue Version ist damit kleiner als das PNG auf smartvisu.de

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <defs>
  <radialGradient id="bg" cx="36" cy="-111" r="160" gradientTransform="matrix(.375 0 0 .375 -1.5 -1.5)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#ccc" offset="0"/>
   <stop stop-color="#888" offset=".9"/>
   <stop stop-color="#111" offset="1"/>
  </radialGradient>
  <linearGradient id="visu" x1="9.41" x2="44" y1="43.2" y2="43.2" gradientTransform="matrix(.506 0 0 .278 -1.5 -1.5)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#fff" offset="0"/>
   <stop stop-color="#ccc" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <rect width="24" height="24" rx="4.12" fill="url(#bg)"/>
  <rect x="3.26" y="10.5" width="17.5" height="9.6" rx="1.12" fill="url(#visu)"/>
  <path fill="#fff" d="M3.68 8.49q0-.098.06-.188.068-.098.158-.098.06 0 .172.09t.322.18q.21.083.495.083.375 0 .54-.135.172-.135.172-.338 0-.248-.188-.39-.188-.15-.458-.225t-.54-.165-.458-.3-.188-.555q0-.428.3-.735.308-.315.93-.315.398 0 .728.128.33.12.33.278 0 .09-.075.202-.068.112-.172.112-.03 0-.292-.105-.255-.112-.51-.112-.345 0-.518.165-.165.158-.165.36 0 .21.188.33t.458.188q.278.067.548.165t.458.338q.188.232.188.608 0 .465-.33.735t-.922.27q-.51 0-.87-.18-.36-.188-.36-.39zm3.16.285v-3.11q0-.097.083-.158.09-.06.224-.06.12 0 .202.06t.083.158v.308q.135-.248.39-.405.262-.165.608-.165t.615.21q.278.202.412.54.188-.368.495-.555.307-.195.645-.195.525 0 .9.39.382.39.382 1.05v1.94q0 .083-.098.158-.09.067-.218.067-.12 0-.218-.067-.09-.075-.09-.158v-1.94q0-.405-.24-.638-.232-.24-.548-.24t-.562.24q-.24.24-.24.615v1.96q0 .105-.097.165-.09.052-.218.052-.12 0-.218-.052-.09-.06-.09-.165V6.82q0-.375-.232-.615-.225-.248-.548-.248t-.562.24-.24.638v1.94q0 .083-.098.158-.09.068-.218.068t-.218-.068-.09-.158zm5.66-.712q0-.585.45-.81.45-.232 1.3-.232h.36v-.158q0-.375-.21-.652-.202-.278-.615-.278-.315 0-.555.112-.24.105-.262.105-.105 0-.172-.098-.06-.104-.06-.217 0-.172.338-.3.345-.135.728-.135.735 0 1.08.42.352.412.352 1.04v1.92q0 .097-.09.165-.083.06-.218.06-.12 0-.202-.06-.083-.068-.083-.166v-.3q-.51.586-1.13.586-.45 0-.735-.256-.278-.255-.278-.742zm.63-.068q0 .279.158.42t.42.143q.315 0 .608-.248.3-.255.3-.518v-.39h-.262q-.218 0-.375.015-.158.007-.33.045-.165.03-.278.097-.105.06-.172.172-.068.105-.068.262zm2.96.78v-3.11q0-.097.083-.157.09-.06.225-.06.12 0 .202.06t.082.158v.352q.135-.255.398-.435t.585-.18h.255q.098 0 .165.09.075.082.075.195t-.075.195q-.068.082-.165.082h-.255q-.382 0-.668.308t-.285.795v1.71q0 .083-.097.158-.09.068-.218.068t-.218-.068-.09-.158zm2.56-.907v-3.86q0-.09.098-.15.097-.068.21-.068.12 0 .218.068.097.06.097.15v1.44h.945q.083 0 .135.074t.052.172-.052.172q-.052.068-.135.068h-.945v1.94q0 .322.135.458.142.128.488.128h.232q.128 0 .195.082.075.075.075.188t-.075.195-.195.083h-.232q-1.24 0-1.24-1.13z"/>
  <path fill="#000" d="m12.9 12.3-.002.004c-.219 0-.427.025-.623.074-.198.05-.39.126-.574.234a1.228 1.228 0 0 0-.469.512c-.116.221-.172.48-.172.764 0 .367.095.686.295.938v.004h.002c.188.232.418.408.686.525h.002l.002.002c.247.101.49.196.732.287.216.081.396.199.547.354V16h.002c.134.134.199.297.199.533 0 .266-.072.435-.211.557h-.002c-.144.12-.348.188-.643.188-.181 0-.34-.027-.475-.078a.911.911 0 0 1-.28-.162l-.001-.002h-.002v-.002h-.002a2.954 2.954 0 0 0-.229-.221l.004.006c-.085-.079-.164-.148-.299-.148a.45.45 0 0 0-.342.184l-.002.002-.002.004a.588.588 0 0 0-.119.344c0 .288.217.518.545.723l.002.002c.344.21.759.31 1.23.31.528 0 .978-.145 1.32-.444.346-.305.514-.76.514-1.32 0-.403-.092-.753-.289-1.03a1.718 1.718 0 0 0-.691-.596 8.518 8.518 0 0 0-.742-.3h-.002a1.822 1.822 0 0 1-.555-.302l-.002-.002a.5.5 0 0 1-.188-.418c0-.226.064-.346.195-.436.151-.1.36-.158.64-.158.231 0 .434.043.618.127.106.048.19.084.25.109l.078.029c.022.008.015.02.094.02a.437.437 0 0 0 .355-.208.615.615 0 0 0 .104-.324.475.475 0 0 0-.174-.352 1.045 1.045 0 0 0-.385-.188 3.056 3.056 0 0 0-.941-.146zm-7.33.012-.008.008a.697.697 0 0 0-.357.102h-.002l-.002.001a.428.428 0 0 0-.209.346c0 .073.014.084.026.12l1.54 4.98a.483.483 0 0 0 .219.27c.102.058.219.078.346.078s.245-.022.348-.079.183-.15.225-.26l.002-.005 1.53-5.02v-.05c0-.005.004-.011.006-.015a.051.051 0 0 0 .001-.015c0-.146-.097-.27-.213-.344a.655.655 0 0 0-.365-.113.434.434 0 0 0-.398.266l-.001.005-1.13 3.85-1.14-3.85v-.001a.391.391 0 0 0-.162-.211.47.47 0 0 0-.25-.063zm4.45.008a.612.612 0 0 0-.318.085v.002a.385.385 0 0 0-.184.314v5.04a.4.4 0 0 0 .174.32l.002.002.004.002c.096.06.208.088.322.088a.58.58 0 0 0 .318-.09.4.4 0 0 0 .184-.322v-5.04a.383.383 0 0 0-.191-.314.582.582 0 0 0-.311-.088zm5.44 0a.612.612 0 0 0-.318.085v.002a.387.387 0 0 0-.186.314v3.68c0 .598.162 1.08.506 1.38h.002v.002c.339.293.787.436 1.32.436.528 0 .977-.142 1.31-.436h.002v-.002c.35-.309.514-.786.514-1.38v-3.68a.383.383 0 0 0-.191-.314.583.583 0 0 0-.311-.088c-.127 0-.243.019-.344.088s-.16.197-.16.314v3.68c0 .323-.078.534-.21.67v.002c-.133.133-.324.205-.614.205-.302 0-.493-.075-.617-.207-.125-.132-.2-.344-.2-.67v-3.68a.383.383 0 0 0-.19-.314.582.582 0 0 0-.311-.088z"/>
 </g>
</svg>

Danke
Manfred

[wvhn]

Moin ares72 Manfred,

nachdem Du den Code offenbar noch einmal aktualisiert hast, sieht das Icon jetzt super aus. Ich habe parallel eine optimierte Version mit vektorisierter Schrift in Originalgröße (72 x 72) erstellt. Die icons sind jetzt im develop branch unter dem Namen "logo_smartvisu.svg" in den Ordnern ./icons/ws und ./icons/sw.

Gruß
Wolfram

P.S.: zwecks Dokumentation für Leute, die eigene icons mit Schriften erstellen möchten:
Sehr hilfreich ist die Seite https://texttosvg.app/de beim Wandeln der Schrift in SVG-Objekte. Die smartVISU-Schrift "Dosis" ist dort in der Auswahl vorhanden. Dabei habe ich festgestellt, dass die font-weight Angaben im Original-Icon (html) wohl ignoriert werden. Also habe ich die Standard-Schriftvariante genommen. Die Schriftzüge habe ich mit der Option "Zeichen trennen" gespeichert, damit man die Buchstabenabstände verändern kann und dann zu dem bestehenden Code in Inkscape importiert und ausgerichtet. Inkscape schreibt eine Menge Ballast in die SVGs, den man mit https://svgoptimizer.com/de/ sehr komfortablel beseitigen kann.

[ares72]

Hallo Wolfram,

Deine Version sieht auch super aus,

Vielen Dank nochmal für Deinen unermüdlichen Support!
Manfred

P.S.: Ergänzung zu Deiner Dokumentation:
Ich habe in Inkscape als "Optimiertes SVG (*.svg)" gespeichert und zusätzlich zur Default-Auswahl ein paar extra Haken gesetzt. So wird der der Ballast nicht gespeichert.

https://svgoptimizer.com/de/ habe ich auch versucht, das Ergebnis war mir bei meinen vielen Versuchen aber in nur einer Zeile zu unleserlich. Ich habe am Ende dann https://iconly.io/tools/svg-cleaner verwendet. Am Ende musst Du aber in beiden Varianten noch manuell Hand anlegen. Beide Online Tools entfernen nicht alle unnötigen Informationen wie

font-size="12"

Beim Pfad stand bei mir dann am Ende nur noch

<path fill="..." d="..."/>

Fill beim Text VISU ist wichtig und muss wieder ergänzt werden, damit weiß auch weiß bleibt. Ob "white" and "black" einen Unterschied machen ist mir aber nicht klar.

fill="#000"

[wvhn]

Danke für den Hinweis. Ich schau mir das nochmal an. smartVISU entfernt beim Laden der icons standardmäßig u.a. alle fill="#fff", damit die icons über CSS-Klassen gestylt werden können. Mit "white“ und "black" trickst man diesen Mechanismus aus.

Gruß
Wolfram

[ares72]

Ich habe mir die SVG im develop branch näher angesehen und muss zugestehen, dass es mir besser als meine Version gefällt.
Mit viewBox="4 4 64 64" wird das Logo in Home Assistant in maximaler Größe (meist 24x24) angezeigt, der Rest inklusive white und black kann bleiben.

1. Generell würde ich die zwei "font-size" entfernen, da wir ja keinen Text mehr haben. Den Rest habe ich nicht entfernen.
2. Beim PNG https://www.smartvisu.de/data/smartvisu_l.png sieht der Text VISU (font-weight: 700) fetter aus.
   Das kann man einfach mit "stroke-width" anpassen, falls das SVG analog dem PNG aussehen soll. Mit 0.5 sieht es zumindest mit 24x24 leserlicher aus.
   Wie fett soll denn der Text VISU sein, passt 0.5 oder besser etwas anderes wie 1.0 oder 1.5?

Da Du Dir das nochmal ansiehst warte ich noch und übernehme das Ergebnis dann mit Anpassung der viewBox, damit das Logo nicht noch kleiner als 24x24 wird.

Viele Grüße
Manfred

Edit:
Ich habe Deine Anleitung mit https://texttosvg.app/de und Schriftvariante 700 befolgt.
Mit der Übernahme von path id="VISU" in Deine Version sieht das bei mir dann wie folgt aus.

<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
  <defs>
    <radialGradient id="appBgGradient" cx="50%" cy="-180%" r="250%">
      <stop offset="0%" stop-color="#ccc"/>
      <stop offset="90%" stop-color="#888"/>
      <stop offset="100%" stop-color="#111"/>
    </radialGradient>
    <linearGradient id="visuGradient" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" stop-color="#fff"/>
      <stop offset="100%" stop-color="#ccc"/>
    </linearGradient>
  </defs>
  <rect width="64" height="64" x="4" y="4" fill="url(#appBgGradient)" rx="11"/>
  <!-- we use "white" and "black" instead of hex colors in order to preserve the colors during loading -->
  <path id="smart" fill="white" fill-rule="nonzero" stroke="white" stroke-linecap="round" stroke-width=".5" d="M17.318 27.864q-.94 0-1.64-.24t-1.1-.57-.4-.63q0-.14.06-.27t.17-.23.23-.1q.22 0 .49.23t.76.47 1.39.24q1.14 0
        1.6-.43t.46-.99q0-.66-.35-1.03t-.92-.58-1.2-.38-1.2-.44-.92-.75-.35-1.3q0-.64.32-1.27t1.01-1.04 1.83-.41q.66 0 1.28.14t1.01.37a.85.85 0 0 1 .361.34.3.3 0 0 1 .03.13q0 .1-.07.26t-.19.29-.28.13-.43-.15-.69-.28-1-.13q-.72
        0-1.16.26t-.64.61-.2.69q0 .58.36.88t.93.49 1.2.36 1.2.47.92.84.35 1.44q0 1.18-.84 1.88t-2.38.7zm5.16-.66v-8.46q0-.22.19-.35t.45-.13.44.13.18.35v.92q.34-.58 1.01-1.05t1.65-.47q1 0 1.74.56t1.1 1.44q.52-1.02 1.35-1.51t1.69-.49
        1.63.44 1.25 1.27.48 2.03v5.32q0 .2-.19.36t-.47.16q-.26 0-.45-.16t-.19-.36v-5.32q0-.84-.34-1.4t-.86-.85-1.08-.29q-.58 0-1.11.3t-.88.85-.35 1.31v5.42q0 .26-.21.38t-.45.12q-.22 0-.43-.12t-.21-.38v-5.4q0-.72-.31-1.28t-.83-.88-1.14-.32q-.58
        0-1.12.3t-.89.86-.35 1.38v5.32q0 .2-.19.36t-.47.16q-.26 0-.45-.16a.47.47 0 0 1-.19-.36Zm19.62-4.72h1.02v-.48q0-.64-.23-1.27t-.74-1.04-1.39-.41q-.66 0-1.08.14t-.66.29-.4.15q-.24 0-.38-.24t-.14-.46q0-.26.41-.49t1.04-.38 1.25-.15q1.34
        0 2.13.55t1.14 1.43a5 5 0 0 1 .35 1.88v5.2q0 .22-.17.37t-.47.15q-.24 0-.42-.15t-.18-.37v-.88q-.52.58-1.26 1.06t-1.76.48q-1.12 0-1.92-.65t-.8-1.99q0-1.1.59-1.69t1.64-.82 2.43-.23zm1.02 2.18v-1.28h-.84q-.9 0-1.71.11t-1.32.47-.51 1.14q0
        .86.51 1.26t1.23.4q.66 0 1.26-.34t.99-.83.39-.93zm3.7 2.54v-8.46q0-.22.19-.35t.45-.13.44.13.18.35v.98q.22-.4.6-.76t.9-.59 1.18-.23h.7q.22 0 .37.17t.15.43a.64.64 0 0 1-.15.42q-.15.18-.37.18h-.7q-.66 0-1.27.35t-.99 1-.38 1.57v4.94q0
        .2-.19.36t-.47.16q-.26 0-.45-.16a.47.47 0 0 1-.19-.36zm10.3.52h-.56q-1.54 0-2.36-.7t-.82-2.24v-10.54q0-.22.21-.35t.43-.13q.26 0 .46.13t.2.35v4.02h2.6q.2 0 .32.16t.12.38-.12.38-.32.16h-2.6v5.44q0 .98.42 1.37t1.46.39h.56q.28 0
        .43.17t.15.41-.15.42-.43.18z" font-size="12"/>
  <rect width="46.6" height="25.6" x="12.7" y="32" fill="url(#visuGradient)" rx="3"/>
  <path id="VISU" fill="black" fill-rule="nonzero" stroke="black" stroke-linecap="round" stroke-width=".5" d="m21.4 51.2-3.82-12.4q-.04-.138-.04-.197 0-.315.257-.552t.64-.375q.385-.138.74-.138.315 0 .552.108.237.109.296.404l3.02 10.7
        3-10.7q.098-.296.325-.404t.542-.108q.355 0 .73.138t.63.375.257.552q0 .04-.01.089t-.01.109l-3.81 12.4q-.118.434-.601.65t-1.05.218q-.552 0-1.03-.217-.483-.217-.601-.651zm8.48-.06q0 .395.404.602t.877.207q.493 0
        .887-.207t.394-.601v-12.8q0-.414-.394-.601t-.887-.187q-.473 0-.877.187t-.404.6zm8.79.987q-1.28 0-2.32-.375t-1.64-.937-.601-1.13q0-.276.148-.601t.404-.552.572-.227q.315 0 .591.227t.631.532.868.532 1.26.227q.591 0
        1.09-.187.503-.187.808-.562t.305-.966q0-.631-.335-1.06-.335-.434-.907-.75t-1.24-.61q-.67-.296-1.35-.631t-1.24-.808q-.562-.473-.907-1.16-.345-.69-.345-1.7 0-1.1.424-1.85t1.12-1.21q.7-.463 1.55-.67.848-.207 1.7-.207.453 0
        1.07.069.621.069 1.24.247.621.177 1.03.483.404.306.404.779 0 .237-.108.552-.109.315-.335.562t-.582.247q-.315 0-.621-.187t-.789-.375q-.483-.187-1.31-.187-.69 0-1.2.187-.513.187-.769.513-.256.325-.256.818 0 .513.345.868t.907.63 1.23.553
        1.35.64q.68.366 1.25.879.572.513.907 1.27.335.759.335 1.86 0 1.4-.611 2.36-.611.956-1.67 1.44-1.05.483-2.42.483zm6.39-4.57v-9.23q0-.414.394-.601t.887-.187q.473 0 .878.187.404.187.404.6v9.23q0 1.14.572 1.71.572.563 1.6.563 1.01 0 1.59-.562a2.25
        2.25 0 0 0 .581-1.67v-9.266q0-.414.385-.6.384-.188.897-.188.473 0 .878.187.404.187.404.601v9.23a5.3 5.3 0 0 1-.432 2.27 3 3 0 0 1-.199.363q-.63.996-1.71 1.44-1.07.444-2.4.444-1.34 0-2.41-.444-1.06-.443-1.7-1.44-.63-.996-.63-2.63z"/>
</svg>​
​

[wvhn]

Für mich war das html-Logo maßgeblich, wie es z.B. auf der Seite „Credits“ zu sehen ist und von lib.smartvisu('app') erzeugt wird. Im direkten Vergleich im Browser kann ich nur noch in hoher Vergrößerung Unterschiede erkennen. Deshalb würde ich das Icon jetzt nicht mehr ändern.

Für Dich macht es wegen der Größe 24x24 ggfls. Sinn, die Schrift etwas fetter zu machen, denn je kleiner das Icon wird, desto dunkler erscheint die weiße Schrift bei „smart“.

Gruß
Wolfram

[ares72]

Auch mit 24x24 sieht die Schrift dünner besser aus, ich habe nur versucht das PNG-Logo nachzubilden.
Ich übernehme dann die Version aus dem dev-branch mit angepasster viewBox und ohne font-size.

Danke für die Mühe und viele Grüße
Manfred

[wvhn]

Ich habe die Schriftgröße jetzt entfernt und zusätzlich bei den beiden Rechtecken noch stroke="none" ergänzt, damit diese nicht durch die smartVISU-Klassen verändert werden. Der Commit ist schon in meinem eigenen Repository und wird mit dem nächsten größeren Commit gemerged. Ich hoffe, die Änderung passt bei Dir auch.

Gruß
Wolfram

[ares72]

Die Schrift analog der Credits gefällt mir besser als die dicke Version im PNG.
Die neue Version sieht in klein und groß super aus und ist nun mein Standard.

Falls das später jemand sucht... für Home Assistant funktioniert es mit Custom Icons (HACS) perfekt.
Für die maximale Größe 24x24 im Dashboard kann die viewBox von "0 0 72 72" auf "4 4 64 64" geändert werden.

Ich bin damit glücklich!

Herzlichen Dank
Manfred