<!
DOCTYPE html >
<
html >
<
meta charset=utf-8>
<
style >
@media (prefers-color-scheme: dark) {
rect { fill: green; }
}
iframe { border: none; }
</
style >
<p>inline</p>
<svg width=
"50" height=
"50" >
<rect width=
"50" height=
"50" fill=
"red" />
</svg>
<p>
iframe </p>
<
iframe src=
'data:image/svg+xml,
<svg xmlns=
"http://www.w3.org/2000/svg " width=
"50" height=
"50" >
<
style >
@media (prefers-color-scheme: dark) {
rect { fill: green; }
}
</
style >
<rect width=
"50" height=
"50" fill=
"red" />
</svg>
' width=50 height=50></iframe>
<p>
img </p>
<
img src=
'data:image/svg+xml,
<svg xmlns=
"http://www.w3.org/2000/svg " width=
"50" height=
"50" >
<
style >
@media (prefers-color-scheme: dark) {
rect { fill: green; }
}
</
style >
<rect width=
"50" height=
"50" fill=
"red" />
</svg>
' width=50 height=50>
<p>background-image</p>
<
div style =
'background-image: url("data:image/svg+xml,\
<svg xmlns='
http://www.w3.org/2000/svg ' width='50' height='50'>\
<
style >\
@media (prefers-color-scheme: dark) {\
rect { fill: green; }\
}\
</
style >\
<rect width='50' height='50' fill='red'/>\
</svg>\
"); width: 50px; height: 50px;'></div>
<p>
img with nested document</p>
<
img src=
'data:image/svg+xml,
<svg xmlns=
"http://www.w3.org/2000/svg " width=
"50" height=
"50" >
<image href=
"data:image/svg+xml,
<svg xmlns="
http://www.w3.org/2000/svg " width="50" height="50&
quot;>
<style >
@media (prefers-color-scheme: dark) {
rect { fill: green; }
}
</style >
<rect width="50" height="50" fill="red"/>
</svg>
" width=" 50" height=" 50"/>
</svg>
' width=50 height=50>
Messung V0.5 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.41 Sekunden
(vorverarbeitet am 2026-04-26)
¤
*© Formatika GbR, Deutschland