title: How can I use %23 instead of # in Chrome?
body: <p>How can I use <code>%23</code> instead of <code>#</code> in Chrome?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="helloText"&gt;
  hello text
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.helloText {
      background: #FF8500 url( "data:image/svg+xml;charset=utf8,&lt;svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'&gt;&lt;polygon points='0,1 1,1 1,0' style='fill:#fff;'&gt;&lt;/polygon&gt;&lt;/svg&gt;" );
      background-repeat: no-repeat;
      background-size: 36px 36px;
      background-position: 100% 100%;
  
      padding: 20px;
      padding-bottom: 25px;
      margin-top: 35px;
  
      color: white;
      font-family: AvenirLT65Medium;
      font-size: 14pt;
  }
  </code></pre>
  
  <p>res</p>
  
  <p><a href="https://i.stack.imgur.com/XINOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XINOC.png" alt="enter image description here"></a></p>
  
  <p>In such a configuration everything works fine. The only but is that I am getting the following warning in Chrome console:</p>
  
  <blockquote>
    <p>[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See <a href="https://www.chromestatus.com/features/5656049583390720" rel="nofollow noreferrer">https://www.chromestatus.com/features/5656049583390720</a> for more details.</p>
  </blockquote>
  
  <p>Ok, let me change css to:</p>
  
  <pre><code>.helloText {
          background: #FF8500 url( "data:image/svg+xml;charset=utf8,&lt;svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'&gt;&lt;polygon points='0,1 1,1 1,0' style='fill:%29fff;'&gt;&lt;/polygon&gt;&lt;/svg&gt;" );
          background-repeat: no-repeat;
          background-size: 36px 36px;
          background-position: 100% 100%;
  
          padding: 20px;
          padding-bottom: 25px;
          margin-top: 35px;
  
          color: white;
          font-family: AvenirLT65Medium;
          font-size: 14pt;
      }
  </code></pre>
  
  <p>res</p>
  
  <p><a href="https://i.stack.imgur.com/5rLPT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5rLPT.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/oobarbazanoo/76uedo40/725/" rel="nofollow noreferrer">Here</a> is a fiddle. So, how do I substitute <code>#</code> to <code>%29</code>?</p>
  
  <p>Also, I would like to notice that the part of an answer from <a href="https://stackoverflow.com/questions/50615029/unescaped-characters-in-a-data-uri-body-deprecated-how-to-find-in-project">here</a> is wrong.</p>
  
  <p>It tells that</p>
  
  <blockquote>
    <p>The hashtag in the fill attribute triggers the message in my situation! Changing the # to %23 fixes the issue.</p>
  </blockquote>
  
  <p>But it is not the case as I explained above.</p>