How do I fix 403 Errors when trying to display an SVG <image>?

Question

I'm building an interactive report based on this: https://avocode.com/design-report-2017

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.

I have tried using both relative and absolute paths for the images. Images not in <image> tags (regular <img>) work well.

Based on this question: 403 forbidden error when displaying svg image, it really sounds like the problem is that the server does not have the proper permissions to load SVG images.

However, I can't seem to find what the permissions need to be changed to. I don't have access to make server changes and have no idea what to tell the back-end developer to change.

I've also read that xlink:href is deprecated (https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/) and should be replaced with <use>, but I can't find documentation on how to use <use> tags in conjunction with <image> tags. MDN (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) and W3C (https://www.w3.org/TR/SVG11/struct.html#ImageElement) still use xlink:href in their <image> documentation.

If the error is due to xlink:href deprecation, how do I properly reference an image file within an <svg>? If <use> is the preferred method, how would I rewrite the above code to accommodate?

Any help on rewriting my code to properly display the images or reconfiguring the server to display them would be a life-saver.

Thank you for your time.

My code is below:

<div title aria-label="aimation" style="width: 100%; height: 100%; overflow: hidden; margin: 0px auto;">
  <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%;">
    <g>
      <g id="o-phone" class="image" transform="translate(-500 500)">
        <image width="500px" height="300px" href="/img/omnichannel/Phone.svg"></image>
      </g>

      <g id="o-floating-shelf" class="image" transform="translate(750 -200)">
        <image width="120px" height="300px" href="/img/omnichannel/Floating Shelves.svg"></image>
      </g>

      <g id="o-bookshelf1" class="image" transform="translate(445 -1000)">
        <image width="150px" height="300px" href="/img/omnichannel/Bookshelf.svg"></image>
      </g>

      <g id="o-stack1" class="image" transform="translate(520 -500)">
        <image width="35px" height="300px" href="/img/omnichannel/Stack Back Bottom.svg"></image>
      </g>

      <g id="o-bookshelf2" class="image" transform="translate(420 -1000)">
        <image width="150px" height="300px" href="/img/omnichannel/Bookshelf.svg"></image>
      </g>

      <g id="o-stack2" class="image" transform="translate(390 -500)">
        <image width="35px" height="300px" href="/img/omnichannel/Stack Front Bottom.svg"></image>
      </g>
    </g>
  </svg>
</div>

Answer 1

With a little more research and the help of @Benni, problem solved!

Turns out the issue was with file permissions. To solve:

1. In Terminal, navigate to the folder and enter ls -l so see the current list of file permissions. Source: https://askubuntu.com/questions/528411/how-do-you-view-file-permissions
2. Got something that looked like -rwxr-xr-x. A great explanation of what these letters mean can be found here: https://unix.stackexchange.com/questions/183994/understanding-unix-permissions-and-file-types
3. In order to change permissions, enter chmod -R 775 [folder]. Including -R changes the permissions of all the files and folders in the subdirectories as well. A few tutorials said the set the permissions to 755, but that didn't solve the problem. Went with 775, which did the trick.
4. In addition, I found that you can configure various FTP clients to handle permissions for you. See instructions here: https://www.siteground.com/tutorials/ftp/change-permissions/

If anyone else runs into this issue, I hope this answer will be helpful/valuable.