Clarissa: Icon, png mit transperenten Hintergrund mittels CSS färben

063

Icon, png mit transperenten Hintergrund mittels CSS färben

  1. 0
  2. 0
  3. 0
    1. 0
      1. 0
        1. 1
          1. 0
  4. 0
    1. 0
      1. 0
        1. 0
          1. 0
            1. 0

              SVG mittels CSS färben

              1. 0

                Icon, png mit transperenten Hintergrund mittels CSS färben

                1. 0
              2. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                    2. 1
                      1. 0
                        1. 0

                          Probleme mit use

                          1. 0
                            1. 0
              3. 1
                1. 0
                2. 5
                  1. 1

                    SVG mittels CSS färben - Das geht (THX!)

                    1. 0
                      1. 0
                        1. 0
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                                  1. 0
                                    1. 0
                                      1. 0
                                        1. 0
                                      2. 0
                                        1. 0
                                          1. 0
                                        2. 0
                                          1. 0
                                2. 1
                    2. 0

                      Version mit externem SVG funktioniert in modernen Browsern

                  2. 4
                    1. 0
                      1. 0
                      2. 0
                        1. 0
                          1. 0
                    2. 0
                      1. 0
                        1. 0
                    3. 0
                      1. 0
                        1. 0
                          1. 0
                            1. 0
                    4. 0

Ist es möglich eine ICON, mittels CSS färben, so das ich einen roten, blauen, grünen, etc habe ohne differse Icons abzuspeichern.

Clara

  1. hallo

    Ist es möglich eine ICON, mittels CSS färben, so das ich einen roten, blauen, grünen, etc habe ohne differse Icons abzuspeichern.

    Clara

    ja das ist möglich.

    mit background-blend-mode und mix-blend-mode lassen sich sehr spektakuläre Manipulationen vornehmen.

    Auf einer Seite siehst du viele Experiemente

    https://beat-stoecklin.ch/pub/webdesign_snippets.html

    -- https://beat-stoecklin.ch/pub/index.html
  2. Hallo Clarissa,

    Ist es möglich eine ICON, mittels CSS färben, so das ich einen roten, blauen, grünen, etc habe ohne differse Icons abzuspeichern.

    Ja. Wenn dein Icon so aussieht …

    … kannst du es als SVG umsetzen. SVG wird mit CSS gestylt.

    Viele Grüße
    Robert

    Folgende Nachrichten verweisen auf diesen Beitrag:

  3. hallo

    Ist es möglich eine ICON, mittels CSS färben, so das ich einen roten, blauen, grünen, etc habe ohne differse Icons abzuspeichern.

    Ach übrigens sollte es da ein passendes Unicode Zeichen dafür geben. Das macht alles viel einfacher.

    -- https://beat-stoecklin.ch/pub/index.html
    1. @@beatovich

      Ach übrigens sollte es da ein passendes Unicode Zeichen dafür geben. Das macht alles viel einfacher.

      ⌂ U+2302 HOUSE?

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. hallo

        @@beatovich

        Ach übrigens sollte es da ein passendes Unicode Zeichen dafür geben. Das macht alles viel einfacher.

        ⌂ U+2302 HOUSE?

        oder das: 𨀣

        gg

        -- https://beat-stoecklin.ch/pub/index.html
        1. house

          Nicht immer ist "einfacher" dasselbe wie "verständlich".

          Das Zeichen muss dann ja auch beim Empfänger bekannt sein. Also doch besser eine Grafik.

          Linuchs

          1. Na toll. Da habe ich gerade ein Bildschirmfoto vom Bildschirmfoto gemacht...

  4. Aber ja doch.

    Der Quelltext zeigt das prinzipielle Vorgehen:

    <img src="home.png" style="background-color:red;" alt="icon with red background"> <img src="home.png" style="background-color:green;" alt="icon with green background"> <img src="home.png" style="background-color:blue;" alt="icon with blue background">

    1. @@Regina Schaukrug

      Aber ja doch.

      Aber nein doch. Wie ich es verstanden habe, sollte das Icon gefärbt werden, nicht der Hintergrund.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Ja, ich habe das Symbol gemeint, das schwarze

        1. Dann muss ganz einfach der dunkelgraue Bereich des Bildes transparent gemacht werden.

          Der Quelltext bleibt identisch, das Resultat:

          Bitte sieh mir nach, dass ich für den Test die Qualität des Bildes nicht besonders beachtet habe. Ich geh jetzt nämlich baden.

          P.S.

          In dem Fall, dass Du das Schriftzeichen 🏡 oder ⌂ nehmen wölltest, gänge es womöglich einfacher - sieht dann aber je nach Betriebssystem (Windows, Linux, MacOS, Android, IOS, ... ) oder Browser (Firefox, Chromium, ... ) anders aus.

          1. @@Regina Schaukrug

            Dann muss ganz einfach der dunkelgraue Bereich des Bildes transparent gemacht werden.

            Und wenn das Icon nicht auf Weiß, sondern auf verschiedenenfarbigen Hintergründen oder gar einem Bild stehen soll?

            In dem Fall, dass Du das Schriftzeichen 🏡 oder ⌂ nehmen wölltest

            Das wöllte man nicht; sondern – Robert B. sagte es schon – SVG verwenden …

            sieht dann aber je nach Betriebssystem (Windows, Linux, MacOS, Android, IOS, ... ) oder Browser (Firefox, Chromium, ... ) anders aus.

            … das sieht dann überall gleich aus.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Das wöllte man nicht; sondern – Robert B. sagte es schon – SVG verwenden …

              Ja, Gunnar. Sowas nur zu sagen ist immer einfach.

              Ein aussagekräftiges Beispiel zu erstellen ist hingegen etwas aufwendiger.

              @Clarissa: Sieh Dir den Quelltext an. Der enthält 3 identische SVG-Grafiken, die ich mit Incsape erzeugt und dann in dann deren Quelltext in die Webseite anstelle der Grafiken eingefügt habe.

              Die sind jeweils einer Klasse zugeordnet und dem "path" innerhalb des SVG (Das ist das "Haus") wird über die Klassenbeschreibung im CSS jeweils eine Farbe zugeordnet.

              1. Hallo Regina Schaukrug,

                Ja, Gunnar. Sowas nur zu sagen ist immer einfach.

                Ein aussagekräftiges Beispiel zu erstellen ist hingegen etwas aufwendiger.

                Dass Gunnars Antworten keine aussagekräftigen Beispiele enthalten, ist eher die Ausnahme denn die Regel.

                Bis demnächst
                Matthias

                -- Rosen sind rot.
                1. Dass [*] Antworten keine aussagekräftigen Beispiele enthalten, ist eher die Ausnahme denn die Regel.

                  Ja. Himmel. Er hat halt ein anderes Publikum. Aber hier ist ein Beispiel offensichtlich nötig und ich empfand es zu insistierend an SVG erinnert zu werden - was nicht mit dem Drücken von "3" Tasten herbeigezaubert werden konnte - weil es ja auch modellhaft, also einfach genug sein muss.

                  Wie auch immer: Wenn ich's mal brauche: Jetzt hab ich eins...

              2. Moin,

                Ein aussagekräftiges Beispiel zu erstellen ist hingegen etwas aufwendiger.

                Nö, das hat mich jetzt inklusive Testen und Feierabendgetränk vielleicht 15 Minuten gekostet. In Kürze:

                <svg width="300" height="100"> <rect id="rot" x="10" y="10" width="80" height="80"/> <rect id="gruen" x="110" y="10" width="80" height="80"/> <rect id="blau" x="210" y="10" width="80" height="80"/> </svg> rect { stroke-width: 2px; stroke: silver; } #rot { fill: #b00; } #gruen { fill: #115909; } #blau { fill: #233652; }

                Viele Grüße
                Robert

                1. Nö, das hat mich jetzt inklusive Testen und Feierabendgetränk vielleicht 15 Minuten gekostet.

                  Klar. Aber dann mach's doch gleich in solchen Fällen.

                  Hinweis: Das Beispiel hat nur eine kleine Schwäche. Es ist nur eine Grafik. Gefragt war: "so das ich einen roten, blauen, grünen e.t.c. habe ohne diverse Icons abzuspeichern."

                  1. Moin,

                    Nö, das hat mich jetzt inklusive Testen und Feierabendgetränk vielleicht 15 Minuten gekostet.

                    Klar. Aber dann mach's doch gleich in solchen Fällen.

                    Hätte ich ja gerne, wenn ich vom Firmennetz per SSH an meinen Server käme. Die paar Stunden kann SELFHTML auch mal ohne eine Antwort auskommen, zumal meine Behauptung ja nicht gerade gewagt war.

                    Hinweis: Das Beispiel hat nur eine kleine Schwäche. Es ist nur eine Grafik. Gefragt war: "so das ich einen roten, blauen, grünen e.t.c. habe ohne diverse Icons abzuspeichern."

                    Und was spricht gegen use?

                    <svg width="300" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="icon" x="0" y="0" width="80" height="80"/> </defs> <use xlink:href="#icon" id="rot" x="10" y="10"/> <use xlink:href="#icon" id="gruen" x="110" y="10"/> <use xlink:href="#icon" id="blau" x="210" y="10"/> </svg>

                    Viele Grüße
                    Robert

                    Folgende Nachrichten verweisen auf diesen Beitrag:

                    1. Und was spricht gegen use?

                      Löst das nicht oder nicht leicht nachvollziehbar und hinzu kommt als weitere kleine Schwäche, dass das von Dir gezeigte SVG auch nicht skalierbar ist. (Aber Ok. Diese Anforderung hab ich jetzt aus ganz eigenen Gründen "hinzuerfunden".)

                      1. Moin,

                        Und was spricht gegen use?

                        Löst das nicht oder nicht leicht nachvollziehbar

                        bitte was? Einfacher geht es IMHO kaum.

                        … und hinzu kommt als weitere kleine Schwäche, dass das von Dir gezeigte SVG auch nicht skalierbar ist. (Aber Ok. Diese Anforderung hab ich jetzt aus ganz eigenen Gründen "hinzuerfunden".)

                        [ ] Du kennst das transform-Attribut mit der scale-Funktion (SVG) bzw. CSS-Transformationen.

                        Viele Grüße
                        Robert

                    2. @@Robert B.

                      Und was spricht gegen use?

                      Nichts. ☞ Folie 20 und vorige.

                      LLAP 🖖

                      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. Nee. Ich finde nur Folie 19 interessant.

                        1. Also. Ich habe das mal getestet.

                          Ich will:

                          • 3 einzelne Symbole. Rot, Grün und Blau, skalierbar mittels CSS
                          • :hover soll gehen
                          • Styleänderung vermittels JS durch Änderung der Klassen soll gehen.

                          Mit meinem ersten Beispiel klappt all das prima.

                          Dann hab ich use versucht. Das Ergebnis ist:

                          • im Firefox sind alle Symbole rot (wie das erste)
                          • im Chromium sind alle schwarz
                          • in keinem skaliert
                          • im Firefox klappt merkwürdigerweise :hover

                          Was mach ich falsch?

                          (Bitte mit nachvollziehbarem Beispiel)

                          1. Moin,

                            fällt dir denn etwas im Vergleich zu meinem Beispiel auf?

                            Viele Grüße
                            Robert

                            1. Versuchs doch mal selbst. Bau 3 SVG-Bereiche mit je einem "Haus" (Das ist schon der erste Unterschied: Du hast genau einen SVG-Bereich mit 3 Elementen). Die sollen skalierbar sein, durch die Zuweisung zu einer CSS-Klasse Farben erhalten und auf :hover reagieren.

                              Mit der use-methode übernimmt Firefox in meinem fehlgeschlagenem Versuch stets die Farbe des ersten Symbols, Chromium findet keine und machts einfach schwarz. Firefox reagiert auf :hover, Chromium nicht. Und skalierbar sind die Dinger auch nicht.

                              Der Effekt tritt auf wenn ich das gesamte <svg> importiere und wenn ich das <g> importiere.

                              Also: was mach ich falsch?

              3. @@Regina Schaukrug

                Ja, Gunnar. Sowas nur zu sagen ist immer einfach.

                Ein aussagekräftiges Beispiel zu erstellen ist hingegen etwas aufwendiger.

                Ich hatte schon damit angefangen: http://test.local/svg-icons/house.html 🤪

                Aber dann kam mir der Feierabend dazwischen …

                 

                Ich finde dein Beispiel nicht so richtig aussagekräftig. Wegen:

                @Clarissa: Sieh Dir den Quelltext an. Der enthält 3 identische SVG-Grafiken

                Das Icon sollte nur einmal als SVG-Grafik1 (Pfad) vorhanden sein und von außen jeweils anders gefärbt werden.

                LLAP 🖖

                1. Wollte schon fragen, ob es für sowas wie „SVG-Grafik“, „HIV-Virus“, „LCD-Display“, „PIN/TAN-Nummer“, … einen Begriff gibt. Hab’s gefunden: redundantes Akronym. Und in den Tiefen des Archivs gefunden: „RAS-Syndrom“ (Redundantes-Akronym-Syndrom-Syndrom) 😄

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Ich hatte schon damit angefangen: http://test.local/svg-icons/house.html 🤪

                  Mist. Das löst mein DNS nicht auf. Hast Du mal rasch die IP des DNS für die TLD?

                  Das Icon sollte nur einmal als SVG-Grafik1 (Pfad) vorhanden sein und von außen jeweils anders gefärbt werden.

                  Da ist Clarissa durchaus auch ganz anders zu verstehen. Das selbe Symbol, mehrere Farben. Das kann auch Sinn ergeben-

                  Wollte schon fragen, ob es für sowas wie „SVG-Grafik“, „HIV-Virus“, „LCD-Display“, „PIN/TAN-Nummer“, … einen Begriff gibt. Hab’s gefunden: redundantes Akronym. Und in den Tiefen des Archivs gefunden: „RAS-Syndrom“ (Redundantes-Akronym-Syndrom-Syndrom) 😄

                  Hihi. Der ist klasse.

                2. @@Gunnar Bittersmann

                  Ich hatte schon damit angefangen:

                  Und zwar so: Als erstes das PNG in Photoshop geöffnet die Koordinaten der Eckpunkte des Hauses ausgelesen. Die dann als Pfad ergibt:

                  <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="house" viewBox="0 0 96 96"> <path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z"/> </symbol> </svg>

                  Zu symbol später mehr. Erwähnenswert ist, dass nicht das svg-Element, sondern das symbol-Element hier das viewBox-Attribut trägt.

                  0 0 heißt, dass der Punkt links oben der Punkt (0, 0), also der Koordinatenursprung ist. Die x-Achse zeigt nach rechts; die y-Achse nach unten.

                  Die anden beiden Zahlen geben an, dass die Zeichenfläche 96 Einheiten breit und 96 Einheiten hoch ist. Die Maße hab ich vom PNG übernommen. Wichtig ist hier, dass es sich bei SVG um eine Längeneinheit handelt, nicht um Pixel. Man würde dasselbe Ergebnis erhalten, wenn man 0 0 480 960 setzt und bei den Koordinaten alle x-Werte mit 5 und alle y-Werte mit 10 multipliziert.

                  Der Pfad:

                  • M48,13: Move to Punkt (48, 13) – die Spitze des Daches

                  • L9,48: Line to Punkt (9, 48) – das linke untere Ende des Daches

                  • H20: Horizantal line to x = 20, y bleibt gleich, d.h. zum Punkt (20, 48) – Hauswand links oben
                    (Ich hätte auch L20,48 schreiben können; das ist aber länger.)

                  • V80: Vertical line to y = 80, x bleibt gleich, d.h. zum Punkt (20, 80) – Hauswand links unten
                    (Ich hätte auch L20,80 schreiben können; das ist aber länger.)

                  • usw. bis H87 zum letzten Punkt (87, 48) – rechtes unteres Ende des Daches

                  • z: schließe die Kontur, d.h. Linie zurück zum Ausganspunkt (48, 13) – der Spitze des Daches

                   

                  Das Ganze in eine HTML-Datei (in den body) gepackt und wir sehen … nichts! symbol ist nicht dazu gedacht angezeigt zu werden, sondern dazu, dass man sich das von anderswo holen kann.

                  Allerdings wird Platz für das svg-Element freigehalten. Da wir das nicht wollen, ergänzen wir die erste Zeile zu:

                  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">

                  (Das hidden-Attribut gibt’s für svg-Elemente nicht; <svg hidden> funktioniert nicht.)

                   

                  „Von anderswo holen“ heißt für uns jetzt: ein weiteres svg-Element.

                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#house"/> </svg>

                  use verwendet ein anderes Element und xlink:href="#house" gibt an, welches. Das bezieht sich auf das Element mit der ID house – das ist das symbol im anderen svg-Element. (Dass IDs eindeutig sein müssen, also house nicht als ID eines HTML-Elements in diesen HTML-Dokument auftreten darf, versteht sich von selbst.)

                  Et voilà! Das Haus sollte jetzt angezeigt werden – in irgendeiner Größe. Und in schwarz, weil wir im SVG keine Farbe angegeben haben. Das wollen wir auch nicht – dazu kommen wir später.

                  Und wenn wir dasselbe Icon nochmal haben wollen: noch ein svg mit use-Element. Als Beispiel gleich mit etwas Text drumrum:

                  <p> Home <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#house"/> </svg> <a href=""> sweet home <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#house"/> </svg> </a> </p>

                  Nun wollen wir nicht irgendeine Größe; und auch die Farbe festlegen. Das können wir im Stylesheet tun, wo bspw. auch die Angaben zur Farbe von Links einschließlich Hover- und Focus-Effekt (für Tastaturbedienung!) stehen:

                  a { color: steelblue } a:focus, a:hover { color: crimson } svg { width: 1em; height: 1em; fill: currentColor; }

                  Für SVG-Elemente gibt es teilweise andere CSS-Eigenschaften als für HTML-Elemente, wie hier fill. Damit können wir die Icons mit einer Farbe füllen, bspw. fill: rebeccapurple.

                  Wir können aber auch mit dem Schlüsselwort currentColor für die Icons jeweils die aktuelle Textfarbe übernehmen. In unserem Beispiel ist das für das erste Haus schwarz und für das zweite – wo das svg innerhalb des a-Elements ist – steelblue.

                  Und wenn sich beim Drüberfahren mit der Maus oder Fokussieren mit der Tastatur die Farbe des Links auf crimson ändert, dann ändert sich die Farbe des Icons mit! Wer’s nicht glaubt: ☞ bitteschön!

                   

                  Was, bei euch sieht’s etwas anders aus?

                  In der PNG-Grafik (redundantes Akronym!) war um das Haus viel Rand. Ich habe die viewBox mal so gelegt, dass sie vom Haus weitgehend ausgefüllt wird: 8 0 80 80. (Die Koordinaten der Punkte im Pfad bleiben so wie sie waren.) Dann stehen die Häuser auf der Erde Grundlinie des Texts.

                   

                  Zum Schluss sei noch erwähnt, dass bei in HTML eingebettem SVG keine XML-Namenraumangaben nötig sind. Wir können auch schreiben:

                  <svg style="display: none"> <symbol id="house" viewBox="8 0 80 80"> <path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z"/> </symbol> </svg> <p> Home <svg><use href="#house"/></svg> <a href="">sweet home <svg><use xlink:href="#house"/></svg></a> </p>

                  (EDIT: href geändert in xlink:href. Safari will das so.)

                  Aber eigentlich soll gar nicht alles SVG in HTML eingebettet sein. Dazu später mehr …

                  LLAP 🖖

                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                  Folgende Nachrichten verweisen auf diesen Beitrag:

                    1. Hallo

                      Das ist doch mal schön. "Ich glaub, jetzt hab ich's!" (Mit Schornstein, in bunt und versch. Größen)

                      Es gäbe da noch Optimierungspotential, aber es sieht doch schon mal aus. Der Schornstein enspricht keiner Norm (TGL oder DIN, ganz, wie du willst) und hätte auch mit einer <line /> nur mit Anfangs- und Endpunkt statt des <path />, dessen Definition die Kontur abfährt, realisiert werden können.

                      Aber das ist Nitpicking. 😀

                      Tschö, Auge

                      -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                      Kleine freie Männer von Terry Pratchett
                      1. Der Schornstein enspricht keiner Norm (TGL oder DIN, ganz, wie du willst)

                        So. Jetzt brennt das Dach nicht mehr an.

                        1. Hallo

                          Der Schornstein enspricht keiner Norm (TGL oder DIN, ganz, wie du willst)

                          So. Jetzt brennt das Dach nicht mehr an.

                          Na gut, sind wir mal nicht so (Abschluss der Esse 55cm über Dachfirst (war jedenfalls in den 1990-ern so)). Jetzt sind sie bei mir aber alle in Textfarbe.

                          Text mit SVG-Icons in Textfarbe

                          Tschö, Auge

                          -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                          Kleine freie Männer von Terry Pratchett
                          1. Jaja. Ich hatte gerade wegen des Hover-Effektes dran gefummelt. Sollte jetzt wieder gehen.

                            1. hallo

                              Jaja. Ich hatte gerade wegen des Hover-Effektes dran gefummelt. Sollte jetzt wieder gehen.

                              Hier ist, was ich gerne tun würde:

                              *:hover > svg.mouseSensitive, svg.mouseSensitive:hover { fill: currentColor; /* oder green */ }

                              bei

                              <span> classic Home <svg class="mouseSensitive"> <use xlink:href="#house"/> </svg>! </span>

                              Es werden aber die ganze SVG (also alle Symbole) betroffen.

                              -- https://beat-stoecklin.ch/pub/index.html
                              1. *:hover > svg.mouseSensitive,

                                … alle Elemente über denen die Maus ist und die ein Kindelement SVG der Klasse mouseSensitive haben.

                                svg.mouseSensitive:hover

                                … und alle SVG-Elemente der Klasse .mouseSensitive über denen die Maus ist werden gewählt

                                Es werden aber die ganze SVG (also alle Symbole) betroffen.

                                Ja. Klar. Hast Du so angegeben. Die Symbole erben das von übergeordneten Element. Das sollten die Enwicklertools auch so anzeigen.

                                1. hallo

                                  *:hover > svg.mouseSensitive,

                                  … alle Elemente über denen die Maus ist und die ein Kindelement SVG der Klasse mouseSensitive haben.

                                  svg.mouseSensitive:hover

                                  … und alle SVG-Elemente der Klasse .mouseSensitive über denen die Maus ist werden gewählt

                                  Nein es sind auch SVGs betroffen, über welchen meine Maus nicht hovert.

                                  Es werden aber die ganze SVG (also alle Symbole) betroffen.

                                  Ja. Klar. Hast Du so angegeben.

                                  Inwiefern habe ich das so angegeben?

                                  Die Symbole erben das von übergeordneten Element. Das sollten die Enwicklertools auch so anzeigen.

                                  -- https://beat-stoecklin.ch/pub/index.html
                                  1. Nein es sind auch SVGs betroffen, über welchen meine Maus nicht hovert.

                                    Sind die irgendwie in einem Element, welches womöglich auch auf hover reagiert?

                                    Inwiefern habe ich das so angegeben?

                                    Naja. Das CSS hab ich doch auseinandergenommen. Verzichte auf mal auf die Zeile:

                                    *:hover > svg.mouseSensitive,

                                    Zeig mal den kompletten Quelltext. HTML, CSS und SVG.

                                    1. hallo

                                      Nein es sind auch SVGs betroffen, über welchen meine Maus nicht hovert.

                                      Sind die irgendwie in einem Element, welches womöglich auch auf hover reagiert?

                                      Inwiefern habe ich das so angegeben?

                                      Naja. Das CSS hab ich doch auseinandergenommen. Verzichte auf mal auf die Zeile:

                                      *:hover > svg.mouseSensitive,

                                      Wenn ich auf deinem gestern geposteten codepen ohne diese Angabe hovere, regiert das jeweils nur gehoverte. Sobald ich aber diesen Selektor ergänze, sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.

                                      Dein pen von gestern

                                      Betroffen Firefox

                                      -- https://beat-stoecklin.ch/pub/index.html
                                      1. Hallo beatovich,

                                        *:hover > svg.mouseSensitive,

                                        Sobald ich aber diesen Selektor ergänze, sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.

                                        Dein pen von gestern

                                        Dort haben alle svg-Elemente den Absatz als Elternelement. Und wenn du ein svg hoverst, hoverst du auch automatisch den Absatz.

                                        <nitpicking>*:hover ist identisch zu :hover</nitpicking>

                                        Bis demnächst
                                        Matthias

                                        -- Rosen sind rot.
                                        1. hallo

                                          Hallo beatovich,

                                          *:hover > svg.mouseSensitive,

                                          Sobald ich aber diesen Selektor ergänze, sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.

                                          Dein pen von gestern

                                          Dort haben alle svg-Elemente den Absatz als Elternelement. Und wenn du ein svg hoverst, hoverst du auch automatisch den Absatz.

                                          Ich habe vergessen zu sagen, dass ich natürlich ein span mit etwas Text eingefügt habe. Dieses Span enthält ein svg.

                                          sorry, war nicht gerade hilfreich

                                          -- https://beat-stoecklin.ch/pub/index.html
                                      2. sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.

                                        Also im Codepen sind die SVGs in einem Absatz. Der "hovert"...

                                        1. Hallo Regina Schaukrug,

                                          Also im Codepen sind die SVGs in einem Absatz. Der "hovert"...

                                          Erster 😉

                                          Bis demnächst
                                          Matthias

                                          -- Rosen sind rot.
                                          1. Hallo Regina Schaukrug,

                                            Also im Codepen sind die SVGs in einem Absatz. Der "hovert"...

                                            Erster 😉

                                            ... und vererbt, dank fill: currentColor; seine Farbe an alle seine Kinder.

                                        2. hallo

                                          sind auch svgs betroffen, deren parent Element gar nicht gehovert werden.

                                          Also im Codepen sind die SVGs in einem Absatz. Der "hovert"...

                                          Ich habe den Test wiederholt

                                          span eingefügt:

                                          <p> <span>New home <svg class="newHome mouseSensitive"> <use xlink:href="#house"/> </svg> </span>, <span> small home <svg class="smallHome mouseSensitive" > <use xlink:href="#house"/> </svg></span>, <span> great home <svg class="greetHome mouseSensitive" > <use xlink:href="#house"/> </svg></span>, <span> classic home <svg class="mouseSensitive"> <use xlink:href="#house"/> </svg>! </span> </p>

                                          und css

                                          :hover > svg.mouseSensitive, svg.mouseSensitive:hover { fill: yellow; }

                                          Jetzt arbeitet es so, wie ich es erwarte.

                                          Weiss nicht was ich beim gestrigen Text vermasselt habe.***

                                          Jetzt bin ich beruhigt.

                                          *** ich hatte nicht jeden Abschnitt in ein span gesteckt. Das muss mich wohl iritiert haben.

                                          -- https://beat-stoecklin.ch/pub/index.html
                                          1. Hallo beatovich,

                                            :hover > svg.mouseSensitive, svg.mouseSensitive:hover { fill: yellow; }

                                            Jetzt arbeitet es so, wie ich es erwarte.

                                            Und jetzt noch an die Tastaturbediener denken.

                                            Bis demnächst
                                            Matthias

                                            -- Rosen sind rot.
                                2. Hi,

                                  *:hover > svg.mouseSensitive,

                                  … alle Elemente über denen die Maus ist und die ein Kindelement SVG der Klasse mouseSensitive haben.

                                  Nein, sondern:

                                  alle svg-Elemente der Klasse mouseSensitive, deren Elternelement unter der Maus ist.

                                  Der Unterschied: NICHT die Elternelemente werden selektiert, sondern die svg-Elemente.

                                  cu,
                                  Andreas a/k/a MudGuard

                    2. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="house" viewBox="8 0 80 80"> <path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z" /> <path d="M61,12 61,36 68,36 68,12z" /> </symbol> </svg>
                  1. @@Gunnar Bittersmann

                    Aber eigentlich soll gar nicht alles SVG in HTML eingebettet sein. Dazu später mehr …

                    Im ersten Teil des Tutorials hatten wir ein Haus-Icon erstellt und mehrfach wiederverwendet. Was, wenn wir nun mehrere verschiedene Icons haben: Mein Haus, mein Auto, mein Boot, …?

                    Die sammeln wir alle als symbols in dem einen svg-Element:

                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="house" viewBox="8 0 80 80"> <path d="M48,13 L9,48 H20 V80 H40 V56 H56 V80 H76 V48 H87z"/> </symbol> <symbol id="car" viewBox="0 0 100 200"> <path d="…"/> </symbol> <symbol id="boat" viewBox="-21 -21 42 42"> <path d="…"/> </symbol> </svg>

                    Die Pfade für Auto und Boot habe ich nur angedeutet. You get the picture. (No pun intended.)

                    Wichtig ist, dass jedes symbol sein eigenes viewBox-Attribut, d.h. sein eigenes Koordinatensystem hat. Das hat nichts mit der Größe zu tun, mit der das Icon dargestellt wird; diese hatten wir im Stylesheet mit svg { width: 1em; height: 1em } angegeben.

                    (Man kann natürlich auch für verschiedene Icons verschiedene Größen angeben oder dasselbe Icon an verschiedenen Stellen in verschiedenen Größen verwenden.)

                    Verwendung (der Einfachheit halber hier ohne Namensräume):

                    <ul> <li><svg><use xlink:href="#house"/></svg> mein Haus</li> <li><svg><use xlink:href="#car"/></svg> mein Auto</li> <li><svg><use xlink:href="#boat"/></svg> mein Boot</li> </ul>

                    (EDIT: href geändert in xlink:href. Safari will das so.)  

                    Nun wollen wir die Icons nicht nur auf einer Webseite, sondern auf allen Seiten unserer Website einsetzen. Dazu müssten wir das svg-Element mit den symbols in jedes HTML-Dokument hineinkopieren … was wohl keine so gute Lösung wäre.

                    Sinnvoll ist, das svg-Element mit den symbols in eine Datei auszulagern (bspw. speichern als icons.svg im assets-Ordner). style="display: none" kann dann weg; wichtig ist, dass hier die XML-Namensraumangabe vorhanden ist:

                    <svg xmlns="http://www.w3.org/2000/svg">

                    Diese Datei wird nun nicht mit PHP o.ä. in den HTML-Quelltext geschrieben, denn dann müssten ja sämtliche Icons bei jeder Seite erneut übertragen werden. Das würde den Quelltext unnötig aufblähen, insbesondere, wenn wir nicht nur drei, sondern dreiundzwölfzig Icons in unserer Sammlung haben.

                    Wir wollen, dass diese SVG-Datei mit allen Icons nur einmal übertragen wird und dann im Browsercache liegt. Wir holen uns die Icons deshalb aus der externen Datei:

                    <ul> <li><svg><use xlink:href="/assets/icons.svg#house"/></svg> mein Haus</li> <li><svg><use xlink:href="/assets/icons.svg#car"/></svg> mein Auto</li> <li><svg><use xlink:href="/assets/icons.svg#boat"/></svg> mein Boot</li> </ul>

                    bzw.

                    <ul> <li><svg><use xlink:href="https://example.net/assets/icons.svg#house"/></svg> mein Haus</li> <li><svg><use xlink:href="https://example.net/assets/icons.svg#car"/></svg> mein Auto</li> <li><svg><use xlink:href="https://example.net/assets/icons.svg#boat"/></svg> mein Boot</li> </ul>

                     

                    Leider wird die Freude durch IrgendEinen Browser getrübt. Internet Explorer kann zwar <use xlink:href="#house"/>, wenn die symbols in derselben HTML-Datei sind; aber nicht <use xlink:href="icons.svg#house"/> mit externer SVG-Datei. (Wohlgemerkt, wir reden von IE, nicht von Edge – der kann das.)

                    Wenn man die Icons zusätzlich zu vorhandem Text einsetzt (was generell eine gute Idee ist), kann man auf progressive enhancement setzen: Seitenbesucher mit Internet Explorer (3…4%, Tendenz fallend) bekommen die Icons nicht zu sehen. Das sollte nicht tragisch sein; die Icons sind ja „nur“ Zusatz zum Text.

                    Man kann aber auch einen Polyfill anwenden, um die Icons auch im IE darzustellen. Dazu wird die SVG-Datei per AJAX geladen und als svg-Element ins DOM gepackt, womit die symbols im selben Dokument sind und auch vom IE referenziert werden können. Dazu werden die Referenzen zu lokalen Referenzen umgeschrieben, bspw. icons.svg#house zu #house.

                    Der Unterschied zur serverseitigen Einbettung ins HTML besteht darin, dass beim zweiten AJAX-Aufruf die dreiundzwölfzig Icons schon im Browsercache liegen und nicht nochmal übers Netzwerk geholt werden müssen.

                    Das JavaScript sieht in etwa so aus:

                    document.addEventListener('DOMContentLoaded', function () { 'use strict'; if (!(window.CSS && 'supports' in CSS)) { var useElements = Array.prototype.slice.call(document.querySelectorAll('use')); if (useElements) { var href = useElements[0].getAttribute('href') || useElements[0].getAttribute('xlink:href'); var request = new XMLHttpRequest(); request.open('GET', href.substr(0, href.indexOf('#')), true); request.addEventListener('load', function () { if (request.status >= 200 && request.status < 400) { document.body.appendChild(request.responseXML.documentElement); } }); request.send(); useElements.forEach(function (useElement) { var href = useElement.getAttribute('href') || useElement.getAttribute('xlink:href'); useElement.setAttribute('xlink:href', href.substr(href.indexOf('#'))); useElement.removeAttribute('href'); }); } } });

                    Mit if (!(window.CSS && 'supports' in CSS)) wird die Spreu (IE) vom Weizen getrennt und der Polyfill nur in Browsern ausgeführt, die ihn nötig haben. Das ist eher ein Hack; mir ist keine geeignete feature detection eingefallen. Nicht, dass ich nicht gefragt hätte.

                    Das Script geht davon aus, dass alle Icons in einundderselben Datei sind und lädt nur die SVG-Datei des ersten use-Elements (useElements[0]). Wenn Icons aus verschiedenen SVG-Dateien eingebunden werden, müsste man das entsprechend umschreiben – oder bestehende Polyfills verwenden. Mein geschätzter Kollege wies mich auf svg4everybody und svgxuse hin.

                    svg4everybody fällt in meinem Test durch.1 (Im IE ansehen!) Die Icons sind verschoben (Liegt das daran, dass viewBox so gewählt ist, dass der Punkt links oben nicht der Koordinatenursprung ist?) und damit, dass use in einem symbol verwendet wird, kommt das Script nicht klar.

                    svgxuse tut, was es soll. Damit steht der Verwendung von SVG-Icon auch im Internet Explorer nichts im Wege. Und es gibt keinen Grund für Icon-Fonts mehr. Keinen! Weitere Literatur:

                    LLAP 🖖

                    1. In der ersten Version hatte ich statt Iframes doch tatsächlich ein Frameset gebaut! 😱😏

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                    Folgende Nachrichten verweisen auf diesen Beitrag:

                    1. Leider wird die Freude durch IrgendEinen Browser getrübt. Internet Explorer kann zwar <use href="#house"/>, wenn die symbols in derselben HTML-Datei sind; aber nicht <use href="icons.svg#house"/> mit externer SVG-Datei. (Wohlgemerkt, wir reden von IE, nicht von Edge – der kann das.)

                      Dann wird es wohl die einfachste Methode sein, das SVG einfach serverseitig zu inkludieren. Die Datenmenge dürfte sich bei svg in einem vertretbaren Rahmen von ein paar hundert Bytes halten.

                      Nichtdeszutrotz werd ich mir das mal ansehen.

                      1. @@Regina Schaukrug

                        Dann wird es wohl die einfachste Methode sein, das SVG einfach serverseitig zu inkludieren. Die Datenmenge dürfte sich bei svg in einem vertretbaren Rahmen von ein paar hundert Bytes halten.

                        Bei einem Icon mag das noch ein gangbarer Weg sein . Bei dreiundzwölfzig nicht mehr.

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      2. hallo

                        Leider wird die Freude durch IrgendEinen Browser getrübt. Internet Explorer kann zwar <use href="#house"/>, wenn die symbols in derselben HTML-Datei sind; aber nicht <use href="icons.svg#house"/> mit externer SVG-Datei. (Wohlgemerkt, wir reden von IE, nicht von Edge – der kann das.)

                        Dann wird es wohl die einfachste Methode sein, das SVG einfach serverseitig zu inkludieren. Die Datenmenge dürfte sich bei svg in einem vertretbaren Rahmen von ein paar hundert Bytes halten.

                        Ich bin derzeit bei 3.5kB für eine Spritemap mit 22 Symbolen.

                        Nach Lesen von Gunnars Beitrag würde ich gerne aber die Datei so gestalten, dass sie als Spritemap und über use/x-link verwendbar ist.

                        Zur Netto-Last muss man immer noch die CSS Definitionen und die wirkliche Anwendung verrechnen. Da erscheint mir die Spritemap-Version rentabler.

                        Aber noch ein Wort zu Symbol-Fonts.

                        Das einzige wirkliche Argument gegen Symbol-Fonts besteht in der Integration neuer Symbole. Da erscheint mir dann die SVG-Version trotz aller Arbeit noch einfacher.

                        -- https://beat-stoecklin.ch/pub/index.html
                        1. @@beatovich

                          Aber noch ein Wort zu Symbol-Fonts.

                          Das einzige wirkliche Argument gegen Symbol-Fonts besteht in der Integration neuer Symbole.

                          Artikel mit für Nutzer(!) relevanten Argumenten hatte ich verlinkt.

                          LLAP 🖖

                          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. hallo

                            @@beatovich

                            Aber noch ein Wort zu Symbol-Fonts.

                            Das einzige wirkliche Argument gegen Symbol-Fonts besteht in der Integration neuer Symbole.

                            Artikel mit für Nutzer(!) relevanten Argumenten hatte ich verlinkt.

                            Hast nicht du geschrieben:

                            svgxuse tut, was es soll. Damit steht der Verwendung von SVG-Icon auch im Internet Explorer nichts im Wege. Und es gibt keinen Grund für Icon-Fonts mehr. Keinen!

                            Ich kann das ja mal übersetzen zu: es gibt keinen Grund emoticons zu verwenden, auch wenn sie im Unicode Standard definiert sind.

                            Ich habe dir meinen Grund genannt, warum es für mich einfacher ist eine Spritemap zu ergänzen als einen Font zu erweitern.

                            -- https://beat-stoecklin.ch/pub/index.html

                    2. Hallo Gunnar,

                      leider wird der Polyfill allen Besuchern vorgeworfen, nicht nur den knapp 4% IE-Usern. Wäre es eine Option, das Polyfill-Script nach if (!(window.CSS && 'supports' in CSS)) mit document.write einzubinden?

                      Gruß
                      Jürgen

                      1. @@JürgenB

                        leider wird der Polyfill allen Besuchern vorgeworfen, nicht nur den knapp 4% IE-Usern. Wäre es eine Option, das Polyfill-Script nach if (!(window.CSS && 'supports' in CSS)) mit document.write einzubinden?

                        document.write{.language-js} – das gibt’s noch?

                        Man könnte auch in dem if-Block ein script-Element erzeugen und ins DOM hängen.

                        Ich bin leichtfertig davon ausgegangen, dass sowieso etwas JavaScript geladen wird. Da könnte der Polyfill mit dabeisein – die paar Byte machen den Kohl nicht fett.

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hallo Gunnar,

                          document.write{.language-js} – das gibt’s noch?

                          wenn du damit document.write("<script src=…") meinst, warum soll es das nicht mehr geben?

                          Man könnte auch in dem if-Block ein script-Element erzeugen und ins DOM hängen.

                          So weit ich weiß, ist das mit document.write("<script src=…") die platzsparendste Methode.

                          Ich bin leichtfertig davon ausgegangen, dass sowieso etwas JavaScript geladen wird. Da könnte der Polyfill mit dabeisein – die paar Byte machen den Kohl nicht fett.

                          in dem Fall würde ich es auch so machen.

                          Gruß
                          Jürgen

                    3. Hej Gunnar,

                      @@Gunnar Bittersmann

                      Gute Serie. Ab ins Wiki damit!

                      Nur eine Anmerkung. Oft kommen auf einer einzelnen Seite weit weniger Icons vor als die dreiundzwölfzig, die ich in meiner Sammlung habe.

                      Insofern kann man sich mMn ruhig trauen, die SVGs direkt ins HTML zu schreiben.

                      Angesichts der Größe typischer Icons wie von den Beispielen hier (Haus, Auto, Boot), sprechen wir ungefähr über 400 bis 1500 Bytes pro Icon. Da müssen aber schon viele zusammen kommen, damit sich ein zusätzlicher Request und das übertragen des kompletten Sprites mit dreiunddrölfzig Icons lohnt.

                      Kommt mal wieder auf das Projekt an, würde ich sagen. In einem forum würde ich für das Sprite votieren, weil hier die Leute regelmäßig wiedekehren. Da macht sich das Caching über die Zeit extrem bezahlt.

                      Wenn ich auf die Seite meines Druckerherstellers gehe, um mir dort einen Treiber zu besorgen (habe ich vor etlichen Jahren zuletzt gemacht), möchte ich eher nicht sein gesammeltes Artwork herunterladen, um das Häuschen in der Brreadcrumb, das Drucken-Symbol und Download-Symbol zu sehen.

                      Bin nicht der einzige, der das so sieht.

                      Marc

                      1. @@marctrix

                        Gute Serie. Ab ins Wiki damit!

                        Das kann ich vielleicht nicht verhindern, aber ein Blogartikel wäre der richtige Platz dafür.

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hej Gunnar,

                          @@marctrix

                          Gute Serie. Ab ins Wiki damit!

                          Das kann ich vielleicht nicht verhindern, aber ein Blogartikel wäre der richtige Platz dafür.

                          Oder so - da bin ich leidenschaftslos. 😉

                          Marc

                          1. @@marctrix

                            Gute Serie. Ab ins Wiki damit!

                            Das kann ich vielleicht nicht verhindern, aber ein Blogartikel wäre der richtige Platz dafür.

                            Oder so - da bin ich leidenschaftslos. 😉

                            Mal sehen, wann ich dazu komme. Wird dann sicher ein Dreiteiler. Nullter Teil: Warum Iconfonts (wie bspw. Font Awesome) doof sind.

                            Der Abschnitt mit den Koordinaten im path raus. (Das wäre ein anderer Artikel.) Dafür rein, wie man eine bestehende Iconsammlung nutzt (wie bspw. Font Awesome – die bieten ihre Icons nämlich nicht nur als WOFF, sondern auch als SVG an).

                            LLAP 🖖

                            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. Hej Gunnar,

                              @@marctrix

                              Der Abschnitt mit den Koordinaten im path raus. (Das wäre ein anderer Artikel.) Dafür rein, wie man eine bestehende Iconsammlung nutzt (wie bspw. Font Awesome – die bieten ihre Icons nämlich nicht nur als WOFF, sondern auch als SVG an).

                              Ich weiß, nutze ich dauernd - habe eine unlimitierte Lizenz als Kickstarter 😉

                              Marc

                    4. @@Gunnar Bittersmann

                      Ich hab in den beiden vorigen Postings <use href="…"/> zu <use xlink:href="…"/> geändert. Wegen Safari. In anderen Browsern funktioniert es auch mit href.

                      LLAP 🖖

                      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann