This test page show how the CSS Media Queries inside an SVG image can affect that SVG image once it's embeded inside an HTML page

In a user point of view, all the circles of a single line should be of the same color.

For users, all the test related to the viewport should pass but they not. This is due to the fact that depending on the embeded method, each CSS media queries of each SVG image is not aware of the parent viewport. It only react to the image own viewport.

The result depend on the circle's color:

Note that the "monochrome" tests is a bit different. If the the media is monochrome, the circle should be white with a black stroke around.

Media Query inline SVG img object iframe CSS BG
None
test-0.svg
No trick here it's just a reference rendering to see if CSS apply.
@media print
test-1.svg
If printed, all the circles should be green.
@media all and (min-width: 101px)
test-2.svg
if the window is wider than 100px authors could expect to have all the circles to be green
@media all and (min-device-width: 101px)
test-3.svg
if the screen is wider than 100px it's expected to have all the circles to be green
@media all and (min-aspect-ratio: 1/1)
test-4.svg
Those 2 tests are exclusive. Except if the window has a 1:1 ratio, if one is green the other should be red
@media all and (max-aspect-ratio: 1/1)
test-5.svg
@media all and (color)
test-6.svg
Those 2 tests are exclusive, if the one with the (color) media query is green the other should be red; If the one with the (color) media query is red, the other should be a white circle with a black stroke
@media all and (monochrome)
test-7.svg
@media all and (min-device-aspect-ratio: 1/1)
test-8.svg
Those 2 tests are exclusive. Except if the screen has a 1:1 ratio, if one is green the other should be red
@media all and (max-device-aspect-ratio: 1/1)
test-9.svg
@media all and (orientation: landscape)
test-10.svg
Those 2 tests are exclusive, if one is green the other should be red. A viewport with a 1/1 ratio is considered to be as "portrait"
@media all and (orientation: portrait)
test-11.svg