title: Is CDATA necessary when styling an inline SVG?
body: <p>I've read mixed things about this, so I'm hoping to get it sorted definitively.</p>
  <p>If I have SVG markup that is inline within an HTML document, and I am styling it with CSS, do I need to wrap that CSS in commented out CDATA?</p>
  <p>Example:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
       &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 512 512&quot;&gt;
          &lt;style type=&quot;text/css&quot;&gt;
              /* &lt;![CDATA[ */
              .some_styles {}
              /* ]]&gt; */
          &lt;/style&gt;
          &lt;!-- SVG content here --&gt;
      &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I imagine there could be issues like the <a href="https://stackoverflow.com/a/3225905/2454914">CSS child combinator</a> being misinterpreted as an XML closing bracket, and I have read various posts from people advising using commented out CDATA around inline SVG styles <sup><a href="http://xahlee.info/js/svg_specify_style.html" rel="nofollow noreferrer">1</a></sup> <sup><a href="https://codepen.io/AmeliaBR/details/RgMZJN" rel="nofollow noreferrer">2</a></sup>. However, to my surprise I found that even with CDATA removed and the child combinator being used, my HTML validated. In addition to this, I was unable to detect any problems with the rendering of the SVG in any modern browser.</p>
  <p><a href="https://stackoverflow.com/questions/66837/">Here's</a> what has been discussed on SE about including CDATA within a <code>&lt;script&gt;</code> tag, but that's not the same thing as <code>&lt;svg&gt;</code>, so it seemed this warranted its own question.</p>
  <p>I don't mind including it, and doing so doesn't cause any trouble. I just wonder if I'm doing the right thing or something unnecessary.</p>