angular-cli: Production build not load svg

Hello, I have a problem with svg. This is my steps:

run ng build --prod --base-href /my/app/ (it compiles the application into an dist directory)
load dist directory on server
navigate the app from browser
not show svgs

Locally with ng serve it works namely it shows all the svg. I see that in dist directory there are all the svg. This is the code in template:

<div class="wrapper-img">
     <img src="./assets/img/name.svg" class="img-responsive"/>
</div>

To clarify, I don’t have this problem with png or jpg. How can I fix it? Thanks.

Versions.

@angular/cli: 1.2.1 node: 6.10.1 os: win32 x64 @angular/animations: 4.4.4 @angular/cli: 1.2.1 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/compiler-cli: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/language-service: 4.4.4

Repro steps.

Run --> ng build prod --base-href ./
Load content in dist folder on apache

Desired functionality.

See svg

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

alan-agius4 on Sep 18, 2018

Can be reproduced with ie11-, svgs set as backgrounds in css become encoded and have a style tag that breaks the behavior on ie.

initial scss

background-image: url('some/path.svg');

result with -prod build

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.st0 {fill:%23ccc;}%3C/style%3E%3Cpath class='st0' fill='%23ccc' d='M0 13.5V16h2.5L13.9 4.6l-2.5-2.4L0 13.5zM15.7 2.7c.3-.2.3-.7 0-.9L14.2.3c-.2-.3-.7-.3-.9 0l-1.2 1.2L14.6 4l1.1-1.3z' id='edit_2_'/%3E%3C/svg%3E");

expected result

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath class='st0' fill='%23ccc' d='M0 13.5V16h2.5L13.9 4.6l-2.5-2.4L0 13.5zM15.7 2.7c.3-.2.3-.7 0-.9L14.2.3c-.2-.3-.7-.3-.9 0l-1.2 1.2L14.6 4l1.1-1.3z' id='edit_2_'/%3E%3C/svg%3E");

Could be the way the svg is saved, or how the scripts handle this. Not sure as of yet.

Example of issue on codepen https://codepen.io/anon/pen/RxrMjB

Corsico on Dec 18, 2017