XML prolog data being printed when including SVG in templateUrl

[clcarter]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

Since v8 we have been able to reference SVG files in the `templateUrl` of a component. However, if the the SVG includes an XML declaration, Angular prints the declaration on the screen and then displays the SVG as expected. Since XML prolog data is valid in an SVG file, but not for inline SVG elements in html, I would expect the compiler to strip out all XML prolog data when compiling SVG files.

🔬 Minimal Reproduction

ng new svg-app --defaults
ng g component svg --module app

2. Rename svg.component.html to svg.component.svg and replace contents with:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
    <defs>
        <path id="a" d="M0 0h18v18H0V0z"/>
    </defs>
    <clipPath id="b">
        <use xlink:href="#a" overflow="visible"/>
    </clipPath>
    <path clip-path="url(#b)" d="M15 5H4C1.8 5 0 6.8 0 9s1.8 4 4 4h10v-1H4c-1.7 0-3-1.3-3-3s1.3-3 3-3h11c1.1 0 2 .9 2 2s-.9 2-2 2H6c-.6 0-1-.4-1-1s.4-1 1-1h8V7H6c-1.1 0-2 .9-2 2s.9 2 2 2h9c1.7 0 3-1.3 3-3s-1.3-3-3-3z"/>
</svg>

SVG copied from https://github.com/google/material-design-icons/blob/master/file/svg/design/ic_attachment_18px.svg?short_path=2fb6055

3. Update the templateUrl in svg.component.ts to be ./svg.component.svg
4. Add the <app-svg></app-svg> element tag to app.component.html
5. ng serve

🔥 Exception or Error

// Example output 
<?xml version="1.0" encoding="UTF-8"?>🔢 

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.19
Node: 12.8.1
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.19
@angular-devkit/build-angular      0.803.19
@angular-devkit/build-ng-packagr   0.803.19
@angular-devkit/build-optimizer    0.803.19
@angular-devkit/build-webpack      0.803.19
@angular-devkit/core               8.3.19
@angular-devkit/schematics         8.3.19
@angular/cdk                       8.2.3
@angular/cli                       8.3.19
@angular/material                  8.2.3
@ngtools/webpack                   8.3.19
@schematics/angular                8.3.19
@schematics/update                 0.803.19
ng-packagr                         5.7.1
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

Anything else relevant?
Same issue exists on 9.x release candidates.
Tested on Chrome and Safari (macOS)
Here is a StackBlitz repro: https://stackblitz.com/edit/angular-yvcjdp

[filipesilva]

I've moved this issue from the CLI repository to the Framework repository as I don't think there's anything to be done from a CLI side on it. Angular CLI just loads the file as-is. I think this issue is mostly about what the Angular compiler does with svg content in templates.

[pkozlowski-opensource]

Repro: https://stackblitz.com/edit/angular-aa5wsd?file=src%2Fapp%2Fapp.component.ts

[pkozlowski-opensource]

@t0f3rchr15 as a work-around you should remove:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

and it should still work.

From what I'm seeing it seems like <?xml version="1.0" encoding="UTF-8"?> is interpreted as text in the markup parser - a corner case for sure, but something that we might look into if some work is being done in the area.

[clcarter]

@pkozlowski-opensource Thanks for taking a look at this. I was able to get the designers to delete the declarations, but many svg generation tools, like Illustrator, add the XML declarations by default. I agree that it is probably a low priority, since most noteworthy icon sets do not include the declaration, though there are definitely cases where the developer may need to access an icon but not have any ability to alter the source.

If you can point me in the right direction I'd be more than happy to take a swing at a PR