Symbole in den Kontextmenüs [ Update ]

  • 2002Andreas

    Danke für Deine Hilfe.

    Habe nun die hier angesprochenen Dinge, ab Beitrag #68 integriergt.

    D.h. neuer Code und ein neues Symbol!

    Die Symbole.css=>

    und hier die Symbole.us.js =>

    Was natürlich nicht fehlen darf, das neue Symbol!

    search-session.zip

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (1. September 2023 um 15:10)

  • Sooo, da hat mich doch ein ganz lieber Mensch darauf hingewiesen, dass sich da so ein, zwei Rechtschreibfehler

    in die Dateien eingeschlichen hatten.

    Vielen lieben Dank dafür.

    Im Zuge dieser Fehlerteufelsaustreibung habe ich dann auch gleich ein paar kleinere Veränderungen vorgenommen.

    Es wurden Symbole ausgetauscht und es gab ein Neues.

    Daher wieder einmal ein Update.

    1. Symbole.css =>

    2. Symbole.us.js =>

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (2. September 2023 um 00:04)

  • Die "neuen" Icons

    Kurze Frage: machst du deine (.svg) Icons selber, und falls ja mit welchem Programm?

    Zum Teil!

    Edit SVG Online - Free SVG Editor

    Da habe ich mich ein wenig eingearbeitet!

    Aber ich bearbeite zum Teil die Vektorgrafiken auch mit Visual Studio Code,

    z.B. um festzulegen, ob sie direkt farbig sein sollen, oder ob das von außen per CSS geschehen soll.

    Die allermeisten habe ich auf Halde, muss mir halt dann nur überlegen, ob ich sie bearbeiten muss und

    wofür ich sie einsetzen kann.

    Mit <3lichem Gruß

    Mira

  • Zum Teil!

    https://editsvg.online/

    Da habe ich mich ein wenig eingearbeitet!

    Aber ich bearbeite zum Teil die Vektorgrafiken auch mit Visual Studio Code,

    z.B. um festzulegen, ob sie direkt farbig sein sollen, oder ob das von außen per CSS geschehen soll.

    Dankeschön, Mira! :)

    Irgendwann muss ich da auch nochmal ran.

    Bisher hab ich nur ein rudimentäres Verständnis davon; wie man den Text Code in eine Bilddatei umbenennt/verwandelt und das Einfärben manipuliert, solche Sachen.

  • Die "neuen" Icons

    Hallo Mira_Belle

    Nur mal eine Frage.

    So sehen deine Icons hier im Windows Explorer in der Vorschau aus:

    Manche Icons werden also nicht angezeigt bei mir.

    Liegt das evtl. an deiner Bearbeitung der .svg Dateien, oder wie kann ich das ändern :/

    Danke für jegliche Hilfe dazu.


    Wenn ich die ohne Vorschauansicht öffnen will, bekomme ich in IrfanView:

    Mit dem Firefox sieht es dann so aus:

    Die anderen werden so angezeigt mit IrfanView:

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (2. September 2023 um 18:52) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • Aber wie sehen sie in Firefox aus?

    Viele .svg Dateien werden nicht von jedem Programm korrekt oder überhaupt angezeigt; in Fx kommt's manchmal drauf an wo sie eingesetzt werden.

    Im Zweifel mal mit Firefox öffnen.

  • Im Zweifel mal mit Firefox öffnen.

    Damit lassen sich alle öffnen und werden angezeigt.

    Es geht mir um die Vorschau im Win Explorer, wo einige eben nicht angezeigt werden.

    Somit muss ich sie erst im Fx öffnen, damit ich weiß wie das Icon dann aussieht.

    PS:

    Bis jetzt nutze ich hier keine .svg Grafiken, es ist mehr aus Interesse warum das bei manchen so ist.

  • Also, auch ich habe nur rudimentäres Grundwissen!

    Aber, dass manche Symbole im Explorer von Windows nicht angezeigt werden,

    hat mit dem Eintrag fill-opacity="context-fill-opacity" zu tun.

    Löscht man diesen, wird das Symbol im Explorer angezeigt.

    Wenn ich also so eine Datei bearbeite

    lasse ich den Code in etwas so aussehen.

    Code
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="context-fill">
    <path d="M240 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H176V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H240V80z"/>
    </svg>

    Von viewBox="0 0 448 512" und d="M240 80c0-17.7-14.3-32-32-32s-32 ... die Finger lassen!

    Bei fill kan man, wenn man direkt eine Farbe bestimmen, diese dann eingeben, z.B. "red" oder auch "#ff1515",

    dann wäre das Symbol rot.

    Es kann aber auch so kombiniert werden => fill="context-fill #ff1515"

    Rot, wenn nicht extern durch CSS eingewirkt wird.

    Und als wäre das alles nicht schon kompliziert genug, geht es auch so:

    Code
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 512 512">
      <path fill="context-fill rgba(135, 135, 137, 0.9)" d="M190.368 150.591c0.157 0.009 0.079 0.003 0 0zm-57.874-28.933c0.158 0.008 0.079 0.003 0 0zm346.228 44.674c-10.445-25.123-31.6-52.248-48.211-60.82 13.52 26.5 21.345 53.093 24.335 72.935 0 0.04 0.015 0.136 0.047 0.4-27.175-67.732-73.254-95.047-110.886-154.512-1.9-3.008-3.805-6.022-5.661-9.2a73.237 73.237 0 0 1-2.646-4.972 43.757 43.757 0 0 1-3.585-9.5 0.625 0.625 0 0 0-0.546-0.644 0.8 0.8 0 0 0-0.451 0c-0.033 0.011-0.084 0.051-0.119 0.065-0.053 0.02-0.12 0.069-0.176 0.095 0.026-0.036 0.083-0.117 0.1-0.135-53.437 31.3-75.587 86.093-81.282 120.97a128.057 128.057 0 0 0-47.624 12.153 6.144 6.144 0 0 0-3.041 7.63 6.034 6.034 0 0 0 8.192 3.525 116.175 116.175 0 0 1 41.481-10.826c0.468-0.033 0.937-0.062 1.405-0.1a117.624 117.624 0 0 1 5.932-0.211 120.831 120.831 0 0 1 34.491 4.777c0.654 0.192 1.295 0.414 1.946 0.616a120.15 120.15 0 0 1 5.539 1.842 121.852 121.852 0 0 1 3.992 1.564c1.074 0.434 2.148 0.868 3.206 1.331a118.453 118.453 0 0 1 4.9 2.307c0.743 0.368 1.485 0.735 2.217 1.117a120.535 120.535 0 0 1 4.675 2.587 107.785 107.785 0 0 1 2.952 1.776 123.018 123.018 0 0 1 42.028 43.477c-12.833-9.015-35.81-17.918-57.947-14.068 86.441 43.214 63.234 192.027-56.545 186.408a106.7 106.7 0 0 1-31.271-6.031 132.461 132.461 0 0 1-7.059-2.886c-1.356-0.618-2.711-1.243-4.051-1.935-29.349-15.168-53.583-43.833-56.611-78.643 0 0 11.093-41.335 79.433-41.335 7.388 0 28.508-20.614 28.9-26.593-0.09-1.953-41.917-18.59-58.223-34.656-8.714-8.585-12.851-12.723-16.514-15.829a71.7 71.7 0 0 0-6.225-4.7 111.335 111.335 0 0 1-0.675-58.733c-24.687 11.242-43.89 29.011-57.849 44.7h-0.111c-9.528-12.067-8.855-51.873-8.312-60.184-0.114-0.516-7.107 3.63-8.024 4.254a175.21 175.21 0 0 0-23.486 20.12 210.5 210.5 0 0 0-22.443 26.913c0 0.012-0.007 0.025-0.011 0.037 0-0.012 0.007-0.025 0.011-0.038a202.837 202.837 0 0 0-32.244 72.81c-0.058 0.265-2.29 10.054-3.92 22.147a265.794 265.794 0 0 0-0.769 5.651c-0.558 3.636-0.992 7.6-1.42 13.767-0.019 0.239-0.031 0.474-0.048 0.712a591.152 591.152 0 0 0-0.481 7.995c0 0.411-0.025 0.816-0.025 1.227 0 132.709 107.6 240.29 240.324 240.29 118.865 0 217.559-86.288 236.882-199.63 0.407-3.075 0.732-6.168 1.092-9.27 4.777-41.21-0.53-84.525-15.588-120.747zm-164.068 72.1z"/>
    </svg>

    Aber auch hier, Finger weg von width="28" height="28" & d="M190.368 150.591c0.157 ...

    Mit <3lichem Gruß

    Mira

    5 Mal editiert, zuletzt von Mira_Belle (2. September 2023 um 19:37)

  • Löscht man diesen, wird das Symbol im Explorer angezeigt.

    D.h., bei manchen der Grafiken hast du ihn gelöscht, und bei anderen eben nicht, und die werden dann in der Vorschau eben nicht angezeigt.

    Muss man diesen Eintrag denn haben in den Grafiken, oder gibt es eine andere Möglichkeit?

    Ist doch auch für dich dann umständlicher, wenn die nicht angezeigt werden in der Vorschau :/

    ich habe nur rudimentäres Grundwissen!

    Ich gar keins bezüglich .svg Grafiken ;)

  • Bis jetzt nutze ich hier keine .svg Grafiken, es ist mehr aus Interesse warum das bei manchen so ist.

    Wie Mira schon geschrieben hat, es liegt wohl am context-fill und/oder context-fill-opacity, teils auch stroke statt fill.

    Das braucht definierten context, der in Fx an den meisten Stellen für Icons vorgegeben und erlaubt ist.

    Viele Bildprogramme berücksichtigen das nicht, und typisch ist dann ein schwarzes Rechteck/Quadrat als Darstellung, weil die gesamte Bildfläche mit dieser Basis Füllfarbe gefüllt wird.

    Ohne context-... im .svg Code sind aber bestimmte Funktionen in Fx nicht verfügbar, wie zB Farbänderungen.

  • InkScape Kostenloses, leichtes, portables Programm. Erstellen und bearbeiten Sie svg, importieren Sie svg in png 16x16, usw.

    InkScape, leicht? Also auf die Anwendung bezogen, nein.

    Ich komme damit nicht wirklich zurecht. Kann Fotos mit allen möglichen Programme bearbeiten,

    aber InkScape bleibt mir ein Rätsel und wenn doch mal etwas klappt, wie es ich es mir vorstelle,

    der Code! Der Code ist ein Graus.

    Dennoch nutze ich auch dann und wann, oder besser ich versuche es, InkScape als portable Version.

    maximize-1.svg, minimize-1.svg, play-1.svg, repeat-1.svg oder auch user-group_2.svg,

    Alles Vektorgrafiken mit ganz simplen Code, ich wollte nur die Füllfarbe ändern,

    schaut Euch den Code mal an, was InkScape daraus gemacht hat!

    Da ich ja jetzt weis, wie ich die Füllfarbe im Code direkt bestimmen kann, werde ich diese Symbole dahingehend ändern.

    Ganz einfach und schlicht. ;)

    Mit <3lichem Gruß

    Mira