Falls jemand vor der selben Frage steht...
Die Kombination zwischen SVG und Data-URL scheint die beste zu sein. Natürlich stört mich auch, dass der Quelltext vergrößert wird, aber dafür ist die Qualität einfach 1. Klasse. Ich würde behaupten, dass es noch schärfer überhaupt nicht geht. Die Data-URL habe ich in meine CSS-Datei gepackt.
Seit einiger Zeit "prüft" Google ja auch CSS und JS Dateien. Mal schauen, ob ich die "Bots" austricksen kann.
Meine Idee: Ein Stylesheet extra für Google&Co bereithalten mit normalen CSS-Sprites.
Habe nun sämtliche Browser ausprobiert und keiner hat ein Problem mit SVG+Data-URL.
Das beste an der ganzen Sache ist...
Die Grafiken lassen sich mit "background-size" perfekt vergrößern/verkleinern.
Falls der Browser das SVG-Format nicht unterstützt, gibt es einen JQuery-Fallback.
Das könnte z.B. so aussehen:
Javascript:
<script type="text/javascript" src="./script/modernizr.js"></script>
<script>
$(document).ready(function()
{
if (!Modernizr.svg)
{
$('header > logo > h1').css('background-image', 'none');
$('header > logo > h1').css('background-color', '#ff0000');
}
});
</script>
Hier gibt es das Skript zum downloaden:
https://modernizr.com/download
Würde mich über Anregungen/Kritik freuen.
