SVG-Sprites in CSS

[Robert B.]

Hallo Felix,

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.

Das ist interessant. Die Beispiele im Internet haben dies nicht, aber ohne funktioniert es zumindest bei mir lokal nicht.

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.

Darauf hätte ich auch selbst können können/müssen, schließlich heißt das Kontrukt darum ja auch schon url ;-)

        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");

Klappt's mit meiner Version?

Dem ist in der Tat so, besten Dank!

Als nächstes muss ich jetzt mal ausprobieren, ob auch das SVG-Element use in CSS funktioniert. Damit könnte ich dann ja auf ein symbol „Sprite“ zugreifen und hätte nur noch eine SVG-Datei, die geladen werden muss.

Viele Grüße Robert