Why are my SVG rating stars invisible on Heroku, but show up on my localhost?

Question

I have built an Angular 5 review application (MEAN stack). I implemented the angular-star-rating package, so users can leave a star rating in their reviews in the application.

When I run my app locally, it works great. I can see the stars without issue!

I deployed my app to Heroku, and the stars are invisible. If I inspect the element, and click on where the stars should be, the element responds. So it seems that the stars are still reacting to user activity, but again, are invisible.

I have been searching different questions and experimenting with what could be going wrong, but have not been able to find a solution to this issue. Is Heroku unable to display SVG tags?

I don't think it's a problem with the configuration of the package. I thought it could be an issue with the xlink tags one must include, as I noticed others having display issues when they weren't included. But the xlink tags are included. Code below:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">


    <defs>

        <symbol id="star-empty" viewBox="0 0 34 32">
            <title>star-empty</title>
            <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">
            <title>star-half</title>
            <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">
            <title>star-filled</title>
            <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>
</svg>

This code is in an svg file I serve from my assets, as directed by the implementation instructions, found here:

https://www.npmjs.com/package/angular-star-rating

Any ideas are much appreciated. Thanks for looking.