<!
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>
<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;'>
<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>