As mentioned previously, SVGs differ from other graphical assets. They can behave differently, depending upon the way they are inserted into a page. As we have seen, there are four main ways in which to place SVG onto the page:
Inside an
imgtagInside an
objecttagAs a background image
Inline
And depending upon the insertion method, certain capabilities will or will not be available to you.
To understand what should be possible with each insertion method, it might be simpler to consider this table.
Now there are caveats to consider, marked within numbers:
*1: When using an SVG inside an object you can use an external style sheet to style the SVG but you have to link to that style sheet from within the SVG
*2: You can use SVGs in an external asset (which is cacheable) but it doesn't work by default in Internet Explorer
*3: A media query inside the styles section of an 'inlined' SVG works on the size of the...