All browsers that understand SVG should respect the CSS media queries defined inside. However, when it comes to media queries inside SVGs there are a few things to remember.

For example, suppose you insert a media query inside an SVG like this:

<style type="text/css"><![CDATA[
    #star_Path {
        stroke: red;
    }
    @media (min-width: 800px) {
        #star_Path {
            stroke: violet;
        }
    }
]]></style>

And that SVG is displayed on the page at a width of 200px while the viewport is 1200px wide.

We might expect the stroke of the star to be violet when the screen is 800px and above. After all, that's what we have our media query set to. However, when the SVG is placed in the page via an img tag, as a background image or inside an object tag, it is has no knowledge of the outer HTML document. Hence, in this situation, min-width means the min-width of the SVG itself. So, unless the SVG itself was displaying on the page at a width of 800px or more, the stroke wouldn't be violet.

Conversely, when you insert an SVG inline, it merges, (in a manner of speaking), with the outer HTML document. The min-width media query here is looking to the viewport (as is the HTML) to decide when the media query matches.

To solve this particular problem and make the same media query behave consistently, we could amend our media query to this:

@media (min-device-width: 800px) {
    #star_Path {
        stroke: violet;
    }
}

That way, regardless of the SVG size or how it is embedded it is looking to the device width (effectively the viewport).