Styles in standalone SVG images

While all the examples so far have been about inline SVG inside an HTML document, you can also use CSS within a standalone SVG image. The following SVG image shows using CSS to adjust the display of multiple SVG text elements. Interesting details include the character data (<![CDATA[ ]]>) block wrapping the styles contained in the style element:

If you haven't dealt with a lot of XML (and it's not nearly as common as it once was, so that might be the case), CDATA is used to indicate to the XML parser that the section might contain characters that could be interpreted as XML, but shouldn't be.  JavaScript (with ...

Get Mastering SVG now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.