title: SVG as background image inlined in style attribute
body: <p>I'm trying to inline an SVG as a background image of a <code>div</code>.
  This works fine in a stylesheet:</p>
  
  <pre class="lang-css prettyprint-override"><code>div {
    background-image:
      url('data:image/svg+xml;charset=utf8,&lt;svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;&lt;path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/&gt;&lt;/svg&gt;');
  }
  </code></pre>
  
  <p>As I'm using a templating language with PHP, I need to make the <code>stroke</code> of the SVG dynamic. To make it dynamic, I'm trying to inline the background image SVG in the HTML style attribute but am unable to escape the <code>"</code> characters in the SVG.</p>
  
  <p><strong>What I've tried:</strong></p>
  
  <p>Inlining with no escaping</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
    style="background-image: url('data:image/svg+xml;charset=utf8,&lt;svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;&lt;path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/&gt;&lt;/svg&gt;');"
  &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Adding <code>\</code> before each <code>"</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
    style="background-image: url('data:image/svg+xml;charset=utf8,&lt;svg width=\"30\" height=\"25\" viewBox=\"0 0 30 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"&gt;&lt;path d=\"M3 14.0204L10.8806 21L27 3\" stroke=\"%231CDFAF\" stroke-width=\"5\" stroke-linecap=\"round\"/&gt;&lt;/svg&gt;');"
  &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Replacing <code>"</code> with <code>%22</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
    style="background-image: url('data:image/svg+xml;charset=utf8,&lt;svg width=%2230%22 height=%2225%22 viewBox=%220 0 30 25%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22&gt;&lt;path d=%22M3 14.0204L10.8806 21L27 3%22 stroke=%22%231CDFAF%22 stroke-width=%225%22 stroke-linecap=%22round%22/&gt;&lt;/svg&gt;');"
  &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is it possible to escape this inlined SVG?</p>