marctrix: SVG mittels CSS färben

Beitrag lesen

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

0 63

Icon, png mit transperenten Hintergrund mittels CSS färben

Clarissa
  • css
  1. 0
    beatovich
  2. 0
    Robert B.
    • css
    • svg
  3. 0
    beatovich
    1. 0
      Gunnar Bittersmann
      1. 0
        beatovich
        1. 1
          Linuchs
          1. 0
            Regina Schaukrug
  4. 0
    Regina Schaukrug
    1. 0
      Gunnar Bittersmann
      1. 0
        Clarissa
        1. 0
          Regina Schaukrug
          1. 0
            Gunnar Bittersmann
            1. 0

              SVG mittels CSS färben

              Regina Schaukrug
              • css
              • svg
              1. 0

                Icon, png mit transperenten Hintergrund mittels CSS färben

                Matthias Apsel
                • meinung
                • zu diesem forum
                1. 0
                  Regina Schaukrug
              2. 0
                Robert B.
                1. 0
                  Regina Schaukrug
                  1. 0
                    Robert B.
                    1. 0
                      Regina Schaukrug
                      1. 0
                        Robert B.
                    2. 1
                      Gunnar Bittersmann
                      1. 0
                        Regina Schaukrug
                        1. 0

                          Probleme mit use

                          Regina Schaukrug
                          1. 0
                            Robert B.
                            1. 0
                              Regina Schaukrug
              3. 1
                Gunnar Bittersmann
                1. 0
                  Regina Schaukrug
                2. 6
                  Gunnar Bittersmann
                  • css
                  • html
                  • svg
                  1. 1

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

                    Regina Schaukrug
                    1. 0
                      Auge
                      1. 0
                        Regina Schaukrug
                        1. 0
                          Auge
                          1. 0
                            Regina Schaukrug
                            1. 0
                              beatovich
                              1. 0
                                Regina Schaukrug
                                1. 0
                                  beatovich
                                  1. 0
                                    Regina Schaukrug
                                    1. 0
                                      beatovich
                                      1. 0
                                        Matthias Apsel
                                        1. 0
                                          beatovich
                                      2. 0
                                        Regina Schaukrug
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Regina Schaukrug
                                        2. 0
                                          beatovich
                                          1. 0
                                            Matthias Apsel
                                2. 1
                                  MudGuard
                    2. 0

                      Version mit externem SVG funktioniert in modernen Browsern

                      Regina Schaukrug
                  2. 5
                    Gunnar Bittersmann
                    1. 0
                      Regina Schaukrug
                      1. 0
                        Gunnar Bittersmann
                      2. 0
                        beatovich
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            beatovich
                    2. 0
                      JürgenB
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          JürgenB
                    3. 0
                      marctrix
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          marctrix
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              marctrix
                    4. 0
                      Gunnar Bittersmann