Dateiformate für eigene Icons

Pentomino

Habe in meiner Lesezeichensymbolleiste verschiedene eigene Icons sowohl für einzelne links, als auch für Ordner eingesetzt. Bisher hatten diese sämtlich das .png-Format. Damit klappt das auch alles bestens. Bin jetzt auf die Idee gekommen, die Icons im .svg-Format zu verwenden. Es stellte sich heraus, dass die .svg-Icons problemlos als Ordnersymbole verwendbar sind und dementsprechend angezeigt werden. Jedoch klappt das nicht bei den einzelnen links: Dort wird bei Einsetzen eines .svg-Icons nichts angezeigt. Hier das Bespiel für erfolgreiche .svg-Icons als Ordnersymbole:

Der CSS-Code dafür sieht so aus:

CSS

/**********Neues Ordnersymbol für Mobilfunk********************/

.bookmark-item[label="Mobilfunk"] {list-style-image: url('./icons/Wifi.svg') !important;
background:#dbc3a3!important;
border:1px solid saddlebrown!important;
transition: background 200ms linear!important;
}
.bookmark-item[label="Mobilfunk"]:hover{
background:yellow!important;
}

/**********Neues Ordnersymbol für Lebensmittel********************/

.bookmark-item[label="Lebensmittel"] {list-style-image: url('./icons/Besteck2.svg') !important;
background:#dbc3a3!important;
border:1px solid saddlebrown!important;
transition: background 200ms linear!important;
}
.bookmark-item[label="Lebensmittel"]:hover{
background:yellow!important;
}

Alles anzeigen

Versuche ich das gleiche mit einzelnen links, passiert - wie erwähnt - nichts. Der Code dafür sieht zum Beispiel so aus (hier mit den funktionierenden .png-Dateien:

CSS

.bookmark-item[label="VaVer"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
background:url('./icons/CFFblau.png')!important;}

.bookmark-item[label="Erw."] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
background:url('./icons/CFFviolett.png')!important;}

.bookmark-item[label="Anp."] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
background:url('./icons/CFForange.png')!important;}

Alles anzeigen

Hat jemand eine Idee, woran dieser Unterschied liegen könnte, bzw. wie man das Problem behebt?

2002Andreas

Ich habe keine eigene svg Grafik, darum habe ich eine vom Fx benutzt.

CSS

.bookmark-item[label="yt"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important; 
    background: url("chrome://browser/skin/settings.svg")no-repeat !important;
}

Damit sieht das dann so aus bei dem Icon für Youtube bei mir:

Sören Hentzschel

Vektor-Grafiken (SVG) sind keine Pixel-Grafiken (PNG), bei denen du weißt, die sind z.B. 16x16px groß. SVG-Grafiken haben im Code einen Viewport und Dimensionen passend dazu definiert. Ich bezweifle mal, dass die von irgendwo herausgesuchte SVG-Datei zufällig den Maßstab hat, den du brauchst, d.h. du musst die anzuzeigende Größe schon auch angeben. Ansonsten siehst du vermutlich deswegen nichts, weil die SVG-Grafik so groß dargestellt wird, dass in dem kleinen Bereich nur ein transparenter Teil des Bildes angezeigt wird, und weil alles über den kleinen Bereich hinaus abgeschnitten wird, siehst du gar nichts. Du hättest mit PNG-Grafiken exakt das gleiche Problem, würdest du eine viel zu große Datei angeben. In dem Fall müsstest du auch die anzuzeigende Größe explizit festlegen. Ansonsten wird die Datei eben so groß angezeigt, wie sie eben ist.

Ersetze also background durch background-image und ergänze background-size: 16px !important.

Pentomino

Danke schon mal für die Tipps und Hinweise. Werde ich zeitnah testen und melde mich dann wieder.

Pentomino

Sören Hentzschel:

Deine Modifikationsvorschläge haben den gewünschten Erfolg gebracht. Jedes Icon im .svg-Format wird nun angezeigt. Vielen Dank für die ErklärungenAuch Dank an 2002Andreas für das ergänzende Beispiel!