title: SVG Background: Invalid property value, but no encoding problem, no size problem, correct SVG data
body: <p>I want to add an SVG background to a section:</p>
  <pre><code>section:before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      background-image: url(&quot;data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='1759' height='487'&gt;
      &lt;path fill-rule='evenodd' d='M.275 486.998v-71.289l195.433-17.134 272.605 36.139 354.025-40.084 376.837 22.027 167.116-33.691 123.525 10.183v-90.097c-19.37-7.076-33.993-19.779-41.836-37.348-12.608.575-23.677-2.665-34.94-4.042-11.307-1.384-9.418-2.978-20.29-11.748-6.322-7.559-25.001-23.314-19.396-53.32-54.99-8.674-7.704-61.466-19.727-38.411 6.692-12.833 16.4-22.991 29.181-30.047-17.93-26.729.239-59.614 26.875-62.722 4.146-.484 8.045-.83 10.293-7.007 7.362-20.224 21.257-35.519 40.076-46.175C1478.063 2.033 1497.6-1.056 1517.926.559c11.874.944 23.17 4.624 33.822 9.938 10.682 5.329 19.499 13.147 27.424 21.958 10.107 11.238 16.863 24.342 19.687 39.136 1.733 9.071 2.123 18.399 3.179 28.198 2.566 0 5.628-.463 8.504.076 17.91 3.357 33.729 10.548 46.525 24.14 20.512 21.785 26.021 47.316 17.87 75.256-8.23 28.216-28.42 45.136-56.394 53.167-1.31.376-2.851 1.283-3.508 2.4-8.365 14.199-20.443 21.727-37.183 21.019-3.065-.13-4.823.98-6.917 3.515-7.53 9.11-16.14 17.19-27.673 21.065-8.299 2.789-16.779 5.039-25.166 7.524v87.653l240.027 20.105v71.289H.275z'/&gt;&lt;/svg&gt;&quot;);
  }
  </code></pre>
  <p>As you can see, the SVG data is correct. There isn't any encoding problem (because I don't use <code>#</code>). Moreover, the SVG data is correct.</p>
  <p>However, Chrome says that's invalid.</p>
  <p>How could I fix this bug?</p>