Robert B.: SVG-Sprites in CSS

Beitrag lesen

SELF-Forum

SVG-Sprites in CSS

Robert B.
– Informationen zu den Bewertungsregeln

Hallo Forum,

nachdem ich die Tage immer mal wieder von SVG-Sprites gelesen habe, wollte ich mich auch ans Werk machen und das mal ausprobieren. Ich binde zur Zeit SVG-Icons als separate Dateien per CSS-generiertem Content bzw. Hintergrundgrafik ein. Wenn ich Artikel wie diesen richtig verstehe, kann ich SVG auch direkt in CSS einbauen. Meine naive Heransgehensweise funktioniert allerdings im Firefox 42 unter Ubuntu nicht:

<!doctype html>
<html>
<head>
<title>Icon Sprite</title>
<meta charset="utf-8"/>
<style type="text/css">
li {
        list-style-type: none;
        list-style-image: url(icon.png);    /* Hier sollte eigentlich die SVG hin. */
        padding-right: 32px;
        border: 1px solid black;
        /* Hier würde das Hintergrundbild angezeigt:
        background-image: url(icon.png);
        */
        background-image: url('data:image/svg+xml;<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="0" y="0" width="32" height="32" style="fill:none;stroke:black"/><rect x="2" y="2" width="28" height="28" style="fill:none;stroke:#333333"/><rect x="4" y="4" width="24" height="24" style="fill:none;stroke:#666666"/><rect x="6" y="6" width="20" height="20" style="fill:none;stroke:#999999"/><rect x="8" y="8" width="16" height="16" style="fill:none;stroke:#cccccc"/><rect x="10" y="10" width="12" height="12" style="fill:none;stroke:white"/></svg>');
}
</style>
</head>
<body>
<h1>Icon Sprite</h1>
<p>Jedes Element dieser Liste ist mit einer eigenen „Bullet“ versehen:</p>
<ul>
<li>Also, erstens</li>
<li>… außerdem …</li>
<li>… und schließlich!</li>
</ul>
</body></html>

Deshalb vermute ich, dass mit dem data-URI etwas nicht stimmt. Wo ist mein Denkfehler? Weiterhin müsste ja dem SVG-Element use auch eigentlich ein Verweis „nach draußen“ auf eine externe SVG möglich sein, oder nicht?

Viele Grüße Robert

Beitrag melden
–
Informationen zu den Bewertungsregeln