SVG-Sprites in CSS

[Felix Riesterer]

Lieber Robert,

1. Der data-URI benötigt eine Enkodierungsangabe (z.B. "base64" oder "US-ASCII"), gefolgt von einem Komma, nach dem die tatsächlichen Daten stehen.

2. Ein URI benötigt maskierte Sonderzeichen. Wenn da "<?xml" steht, dann hat das Sonderzeichen eine besondere Bedeutung! Du möchtest also den kompletten SVG-Code durch eine Funktion jagen, wie PHPs rawdataurlencode oder JavaScripts encodeURIComponent.

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;US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%20style%3D%22fill%3Anone%3Bstroke%3Ablack%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20style%3D%22fill%3Anone%3Bstroke%3A%23333333%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2224%22%20height%3D%2224%22%20style%3D%22fill%3Anone%3Bstroke%3A%23666666%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22fill%3Anone%3Bstroke%3A%23999999%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2216%22%20style%3D%22fill%3Anone%3Bstroke%3A%23cccccc%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2212%22%20height%3D%2212%22%20style%3D%22fill%3Anone%3Bstroke%3Awhite%22%2F%3E%3C%2Fsvg%3E");

}

Deshalb vermute ich, dass mit dem data-URI etwas nicht stimmt.

Richtig. Klappt's mit meiner Version?

Liebe Grüße,

Felix Riesterer.