What you can do with each SVG insertion method (inline, object, background-image, and img)

As mentioned previously, SVGs differ from other graphical assets. They can behave differently depending on the way they are inserted into a page. As we have seen, there are four main ways in which to place an SVG onto a page:

• Inside an img tag
• Inside an object tag
• As a background image
• Inline

Depending on the insertion method, certain capabilities will or will not be available to you. As we go on to look at some of these capabilities, it may be useful to refer back to this table, which covers what’s possible with each insertion method:

Figure 11.9: Depending on the insertion method, differing capabilities are possible

Now, there are caveats to consider, marked with numbers in the preceding table:

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...