09: SVG mit Data URIs

Wir haben "Inline-SVG" behandelt – das bedeutet, dass Sie die SVG-Syntax direkt in HTML einfügen. Sie können dieses gleiche Inline-SVG auch an anderen Stellen verwenden, z. B. in einem <img> oder als background-image. Das ist ziemlich seltsam.

Es ist so:

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

Sie fügen die gesamte SVG-Syntax dort ein, wo Sie den <svg>-Beginn sehen.

Ebenso in CSS

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Darüber hinaus können Sie SVG in Base64-Kodierung umwandeln, und das funktioniert auch als Data URI, wie z. B.

<img alt="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc">

Und das funktioniert auch in CSS (wahrscheinlich auch an anderen Stellen, überall dort, wo Sie eine Grafik verwenden würden).

Siehe den Pen SVG mit Data URI (mehrere Wege) von Chris Coyier (@chriscoyier) auf CodePen.