title: How do I fix 403 Errors when trying to display an SVG <image>?
body: <p>I'm building an interactive report based on this: <a href="https://avocode.com/design-report-2017" rel="nofollow noreferrer">https://avocode.com/design-report-2017</a></p>
  
  <p>Everything worked great on localhost, but when I uploaded it to the server, I'm getting a 403 (Forbidden) error for all of the SVG images.</p>
  
  <p>I have tried using both relative and absolute paths for the images. Images not in <code>&lt;image&gt;</code> tags (regular <code>&lt;img&gt;</code>) work well.</p>
  
  <p>Based on this question: <a href="https://stackoverflow.com/questions/25157431/403-forbidden-error-when-displaying-svg-image">403 forbidden error when displaying svg image</a>, it really sounds like the problem is that the server does not have the proper permissions to load SVG images. </p>
  
  <p>However, I can't seem to find what the permissions need to be <em>changed to</em>. I don't have access to make server changes and have no idea what to tell the back-end developer to change.</p>
  
  <p>I've also read that xlink:href is deprecated (<a href="https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/" rel="nofollow noreferrer">https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/</a>) and should be replaced with <code>&lt;use&gt;</code>, but I can't find documentation on how to use <code>&lt;use&gt;</code> tags in conjunction with <code>&lt;image&gt;</code> tags. MDN (<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image</a>) and W3C (<a href="https://www.w3.org/TR/SVG11/struct.html#ImageElement" rel="nofollow noreferrer">https://www.w3.org/TR/SVG11/struct.html#ImageElement</a>) still use xlink:href in their <code>&lt;image&gt;</code> documentation.</p>
  
  <p>If the error is due to xlink:href deprecation, how do I properly reference an image file within an <code>&lt;svg&gt;</code>? If <code>&lt;use&gt;</code> is the preferred method, how would I rewrite the above code to accommodate?</p>
  
  <p>Any help on rewriting my code to properly display the images or reconfiguring the server to display them would be a life-saver.</p>
  
  <p>Thank you for your time.</p>
  
  <p>My code is below:</p>
  
  <pre><code>&lt;div title aria-label="aimation" style="width: 100%; height: 100%; overflow: hidden; margin: 0px auto;"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewbox="0 -100 800 1000" width="1340" height="1440" style="width: 100%; height: 100%;"&gt;
      &lt;g&gt;
        &lt;g id="o-phone" class="image" transform="translate(-500 500)"&gt;
          &lt;image width="500px" height="300px" href="/img/omnichannel/Phone.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
  
        &lt;g id="o-floating-shelf" class="image" transform="translate(750 -200)"&gt;
          &lt;image width="120px" height="300px" href="/img/omnichannel/Floating Shelves.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
  
        &lt;g id="o-bookshelf1" class="image" transform="translate(445 -1000)"&gt;
          &lt;image width="150px" height="300px" href="/img/omnichannel/Bookshelf.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
  
        &lt;g id="o-stack1" class="image" transform="translate(520 -500)"&gt;
          &lt;image width="35px" height="300px" href="/img/omnichannel/Stack Back Bottom.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
  
        &lt;g id="o-bookshelf2" class="image" transform="translate(420 -1000)"&gt;
          &lt;image width="150px" height="300px" href="/img/omnichannel/Bookshelf.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
  
        &lt;g id="o-stack2" class="image" transform="translate(390 -500)"&gt;
          &lt;image width="35px" height="300px" href="/img/omnichannel/Stack Front Bottom.svg"&gt;&lt;/image&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>