SVG file does not load properly on app engine

Question

I have an angular application deployed in app engine. I have some image resources to load on certain page of the app. When I serve it locally using live-server it works perfectly fine.

live-server --port=8080 --entry-file=./index.html

However, when I deploy in app engine, one of my svg files doest load on the page though when I try to inspect element it's there but the color is invisible.

Here is my (app.yaml) file:

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico|svg))$
  static_files: knowledge-space/\1
  upload: knowledge-space/(.*)

- url: /(.*)
  static_files: knowledge-space/index.html
  upload: knowledge-space/index.html

Here is the svg file (star-rating.icons.svg):

    <symbol id="star-empty" viewBox="0 0 34 32">
        <path class="path-star-empty"
              d="M33.412 12.395l-11.842-1.021-4.628-10.904-4.628 10.92-11.842 1.005 8.993 7.791-2.701 11.579 10.179-6.144 10.179 6.144-2.685-11.579 8.976-7.791zM16.941 22.541l-6.193 3.739 1.647-7.049-5.468-4.744 7.214-0.626 2.8-6.638 2.816 6.654 7.214 0.626-5.468 4.744 1.647 7.049-6.209-3.755z"/>
    </symbol>

    <symbol id="star-half" viewBox="0 0 34 32">
        <path class="path-star-half"
              d="M 33.412,12.395 21.57,11.374 16.942,0.47 12.314,11.39 0.472,12.395 9.465,20.186 6.764,31.765 16.943,25.621 27.122,31.765 24.437,20.186 33.413,12.395 Z M 16.941,22.541 c 0,0 -0.297971,-14.6455833 0,-15.318 l 2.816,6.654 7.214,0.626 -5.468,4.744 1.647,7.049 z"/>
        </symbol>

    <symbol id="star-filled" viewBox="0 0 34 32">
        <path class="path-star-filled"
              d="M16.941 25.621l10.179 6.144-2.701-11.579 8.993-7.791-11.842-1.005-4.628-10.92-4.628 10.92-11.842 1.005 8.993 7.791-2.701 11.579z"/>
    </symbol>

</defs>

score 2 · Accepted Answer · answered Mar 12 '20 at 10:09

There are some possible solutions for this to be happening. Most of the cases, it's related to the configuration in the app.yaml file - for example, it might be related to the Mime Type being read on the app.yaml file. Considering that, I would recommend you to take a look at the following posts from the Community, where there are similar cases to yours, on how to load images (SVG) in web pages.

In addition to that, there is other post from the Community - Images not displaying html - that might help you, providing a solution using the tag <img>, that I would recommend you to look as well.

I found this article that shows how to use SVG from scratch, in case you want to take a look as well: Using Google's App Engine to serve SVG files

Let me know if the information helped you!

This solves my problem. I added http headers specifically for svg file type only. Thank you so much https://stackoverflow.com/questions/24106691/google-app-engine-is-sending-svg-with-wrong-mime-type — str028, Mar 12 '20 at 14:34
Hi @str028 that's great! Please, consider accepting my answer, since it solved your problem! :) — gso_gabriel, Mar 12 '20 at 14:37

SVG file does not load properly on app engine

1 Answers1