title: Adding an SVG with Path to css class not working
body: <p>For some reason, this svg isn't showing up when I set it to class. </p>
  
  <p>Can anyone see why this is?</p>
  
  <p>(using vue.js, class added as a regular class no binding. Have tested other background images and gradients and they are working, so is something specific to the code below).</p>
  
  <p>Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style lang="scss" scoped&gt;
  .curved-div {
    display: block;
    background-image: url("data:image/svg+xml;utf8,
    &lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'&gt;
    &lt;path fill='#0099ff' fill-opacity='1' d='M0,96L60,128C120,160,240,224,360,218.7C480,213,600,139,720,122.7C840,107,960,149,1080,176C1200,203,1320,213,1380,218.7L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'&gt;&lt;/path&gt;&lt;/svg&gt;");
  }
   &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>