Angular-cli: Production build not load svg

[adelloste]

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

1. run ng build --prod --base-href /my/app/ (it compiles the application into an dist directory)
2. load dist directory on server
3. navigate the app from browser
4. 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.

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

Desired functionality.

1) See svg

[filipesilva]

I'm sorry, I don't understand the problem you're trying to describe is. Are you saying the .svg files are being converted to .png? We don't convert image files in the CLI...

Can you show me a reproduction that doesn't involve deploying to apache? How you deploy is outside of the control of Angular CLI. Uploading a reproduction repository to github is the best way.

[CHBaker]

I am having a similar issue, My svg's load in my application in dev mode, but not in production. I can't figure it out, I have looked at a few other posts, I tried relative vs. absolute paths, still nothing.

"dependencies": {
    "@angular/animations": "^4.4.3",
    "@angular/common": "^4.4.3",
    "@angular/compiler": "^4.4.3",
    "@angular/core": "^4.4.3",
    "@angular/forms": "^4.4.3",
    "@angular/http": "^4.4.3",
    "@angular/platform-browser": "^4.4.3",
    "@angular/platform-browser-dynamic": "^4.4.3",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.4.1",
    "@ngrx/effects": "^4.1.0",
    "@ngrx/store": "^4.0.3",
    "@ngrx/store-devtools": "^4.0.0",
    "angular-cesium": "0.0.25",
    "angular-font-awesome": "^2.2.0",
    "angular2-click-outside": "^0.1.0",
    "angular2-notifications": "^0.7.8",
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-switch": "^3.3.4",
    "cesium": "^1.37.0",
    "core-js": "^2.5.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/language-service": "^4.4.1",
    "@types/jasmine": "2.5.45",
    "@types/jquery": "^3.2.12",
    "@types/node": "^6.0.88",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.4",
    "jasmine-spec-reporter": "~4.1.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.6",
    "tslint": "~5.3.2",
    "typescript": "^2.3.4"
  }

I am reluctant to upgrade to angular 5 since one of my 3rd party packages does not support it yet
conUrl = 'assets/svgs/eth-connected.svg';

<app-modem
    [ethernet1]="ethernet1"
>
</app-modem>

src="{{ ethernet1 }}"

[CHBaker]

This was fixed by adding the svg file paths to the assets .cli file

[Corsico]

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

[tonny008]

@filipesilva I also have this problem. it seems angular-cli changed the svg when inline it to css

<?xml version="1.0" encoding="utf-8"?>
<svg width='88px' height='88px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-gears">
  <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
  <g transform="translate(-20,-20)">
    <path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="#cccccc">
      <animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="0.65s" repeatCount="indefinite"></animateTransform>
    </path>
  </g>
  <g transform="translate(20,20) rotate(15 50 50)">
    <path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="#9f9fab">
      <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="0.65s" repeatCount="indefinite"></animateTransform>
    </path>
  </g>
</svg>

becomes

"data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='88' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-gears'%3E%3Cpath fill='none' class='bk' d='M0 0h100v100H0z'/%3E%3Cpath d='M59.9 32.6c.1-.8.1-1.7.1-2.6s0-1.8-.1-2.6l-5.1-.4c-.3-2.4-.9-4.6-1.8-6.7l4.2-2.9c-.7-1.6-1.6-3.1-2.6-4.5L50 15c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6l-3 4.1c-2.1-.9-4.4-1.5-6.7-1.8L32.7.1C31.8 0 30.9 0 30 0s-1.8 0-2.6.1L27 5.2c-2.4.3-4.6.9-6.7 1.8l-2.9-4.1c-1.6.7-3.1 1.6-4.5 2.6l2.1 4.6c-1.9 1.4-3.5 3.1-5 4.9l-4.5-2.1c-1 1.4-1.9 2.9-2.6 4.5L7 20.3c-.9 2.1-1.5 4.4-1.8 6.8l-5 .4C0 28.2 0 29.1 0 30s0 1.8.1 2.6l5 .4c.3 2.4.9 4.7 1.8 6.8l-4.1 2.9c.7 1.6 1.6 3.1 2.6 4.5l4.5-2.1c1.4 1.9 3.1 3.5 5 4.9l-2.1 4.6c1.4 1 2.9 1.9 4.5 2.6l2.9-4.1c2.1.9 4.4 1.5 6.7 1.8l.4 5.1H30c.9 0 1.8 0 2.6-.1l.4-5.1c2.3-.3 4.6-.9 6.7-1.8l2.9 4.2c1.6-.7 3.1-1.6 4.5-2.6L45 49.9c1.9-1.4 3.5-3 4.9-4.9l4.6 2.2c1-1.4 1.9-2.9 2.6-4.5L53 39.8c.9-2.1 1.5-4.4 1.8-6.7l5.1-.5zM30 45c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z' fill='%23ccc'%3E%3CanimateTransform attributeName='transform' type='rotate' from='90 50 50' to='0 50 50' dur='0.65s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M98.208 80.25c.304-.747.537-1.616.77-2.485s.466-1.74.576-2.538l-4.823-1.706a24.526 24.526 0 0 0-.004-6.938l4.807-1.714c-.262-1.726-.743-3.408-1.346-5.02l-4.987.838c-.86-2.197-2.089-4.183-3.465-6l3.316-3.875c-1.094-1.328-2.31-2.585-3.674-3.676l-3.96 3.184c-1.795-1.413-3.86-2.588-6.005-3.473l.934-5.03c-.844-.329-1.713-.562-2.582-.795s-1.74-.466-2.538-.576l-1.706 4.823a24.526 24.526 0 0 0-6.938.004l-1.74-4.71c-1.726.261-3.408.742-5.02 1.346l.839 4.987c-2.198.86-4.183 2.088-6.098 3.439l-3.803-3.193c-1.329 1.093-2.586 2.309-3.676 3.673l3.21 3.863c-1.414 1.795-2.588 3.862-3.5 6.102l-4.933-.908c-.374.625-.607 1.494-.84 2.363s-.466 1.74-.576 2.538l4.726 1.68c-.331 2.396-.347 4.773-.021 7.034l-4.711 1.74c.262 1.727.743 3.409 1.347 5.02l4.89-.864c.86 2.198 2.088 4.183 3.561 6.027l-3.219 3.9c1.094 1.328 2.31 2.586 3.674 3.676l3.862-3.21c1.796 1.413 3.862 2.588 6.006 3.473l-.934 5.03 2.608.699c.868.233 1.74.466 2.538.576l1.706-4.823c2.3.306 4.676.322 6.938-.004l1.714 4.807c1.726-.262 3.408-.743 5.02-1.346l-.813-5.084a22.77 22.77 0 0 0 6.002-3.465l3.873 3.316c1.329-1.093 2.586-2.31 3.677-3.674l-3.21-3.862c1.413-1.796 2.588-3.862 3.473-6.006l5.055.837zm-32.09 4.239A14.98 14.98 0 0 1 55.51 66.118C57.66 58.1 65.865 53.363 73.882 55.51S86.637 65.865 84.49 73.882A14.98 14.98 0 0 1 66.118 84.49z' fill='%239f9fab'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='90 50 50' dur='0.65s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"

it breaks the svg animation

when inline the svg. cli tries to pre calculate the transorm.. but it seems that it doest calculate the transform in the animateTransform

[clydin]

Does this happen in production and development targets; or just production?

[Corsico]

just production for me

On Tue, Dec 19, 2017 at 6:20 PM, clydin [e-mail] wrote:

Does this happen in production and development targets; or just production?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/7996#issuecomment-352808485,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGV2O3T7mvwrroTZJBVbcf3RA9YDcnZmks5tB-JDgaJpZM4P0MiS
.

--
Signed,
Vlad Pintea-Gärtner

[CHBaker]

production, @Corsico did you make sure to add the svg to the assets section of the .cli file?

[Corsico]

yes, and as I said, it works fine on dev, where it just adds it as background: url(/some/path); It only breaks with the prod build where the path is replaces with the svg data. Working on changing the svg file, to remove the style tags, will report on my findings

[Corsico]

updating the svg files, to remove the style tags, fixes the issue. It's still made possible by angular-cli by default importing the code as data instead of linking to the svg but it's a fix until there's some option not to do that to the css.

[clydin]

@Corsico can you provide an example code section? If using an absolute or root-relative path in the url() then the resource should never be inlined; in which case it may need to be configured as an application asset. If it is relative than it should always (i.e., in dev and prod) be inlined as a data URI (assuming it meets the size threshold).

Also, (in the current version) the stylesheet optimizer attempts to further optimize any inline resources which may actually be the source of the issue.

[Corsico]

Hey, can't share anything more than I already did, sorry. I don't think
it's cause by your code though, the svg source code had style tags that
were breaking the functionality for me. If anything, if you could add a
script to inline those tags for people that would be great.

On Wed, Dec 20, 2017 at 4:44 PM, clydin [e-mail] wrote:

@Corsico https://github.com/corsico can you provide an example code
section? If using an absolute or root-relative path in the url() then the
resource should never be inlined in which case it must be configured as an
application asset. If it is relative than it should always (i.e., in dev
and prod) be inlined as a data URI (assuming it meets the size threshold).

Also, (in the current version) the stylesheet optimizer attempts to
further optimize any inline resources which may actually be the source of
the issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/7996#issuecomment-353080884,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGV2OxYSqe1JEF81t1TmOqX3JY59Skt8ks5tCR0zgaJpZM4P0MiS
.

--
Signed,
Vlad Pintea-Gärtner

[liubomyr-kozak]

Hey,
I have the same problem when putting this CSS rule and run ng server

 .chart-legend .item.dot > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'><circle cx='5' cy='6' r='2'/></svg>"); }

[manojp1988]

I too have the same problem. In dev environment, svg appears fine. But in prod build it is appearing. It network console, i see that 200 is the http response. But not sure why it is not showing.

[alan-agius4]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}