Using `templateUrl` with a `.svg` file

[phenomnomnominal]

Hey friendly @angular/cli team!

Would there be any appetite to enable using a .svg file as a component template?

As far as I can tell it would be a small change in webpack-config/common.js from:

{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.(eot|svg|cur)$/, // ...

to

{ test: /\.(html|svg)$/, loader: 'raw-loader' },
{ test: /\.(eot|cur)$/, // ...

Are there any downsides to this? Are there any other places that the change would need to be handled? It seems to work when I change it in my node_modules.

Let me know if this is something that would be useful/wanted, and I'll make a PR.

Thanks!

[johnchristopherjones]

Personally, I would definitely love to use svg for component templates.

[sancelot]

When working with svg files it seems mandatory. You can not copy your file in the template each time it is modified...

[alan-agius4]

I am not understanding the use case, why an HTML template should have an .svg extention.

[skreborn]

@alan-agius4 I'm assuming the primary use case here is to create a component that is just and SVG and nothing else. Then again, nothing's stopping us from simply using a HTML file and embedding SVG into that, so I'm also not sure why this change is required.

[phenomnomnominal]

It’s mainly just so you don’t have to spend your time renaming files and copying stuff around. Also, it can be good to just using raw .svg files for the extra tooling you get with them.

[alan-agius4]

Having an SVG image instead of a template, might increase the final bundle size if a SVGs are large.

You will lose the advantage of using HTTP2, fingerprinting etc.. which would mean that with every release you do the users will need to re-download all the svgs again.

Also, by definition an SVG is a graphic since doesn't seem correct to treat it as a template.

What if you than need to add an Input to the component? You change the extension to .html?

[phenomnomnominal]

I’ve made this change for some tests and as far as I can tell, nothing here is really different if you use it as a .html file or a .svg? Webpack still treats it as “raw”, it is bundled the same way, you can still use bindings and Inputs, etc. The main difference is clearer intent of what the template actually is, and easier workflows when consuming assets.

Using Angular bindings with SVG tags is really powerful. Yes, you can end up with big bundles, but’s that’s indenpendent of the file extension. I don’t think this change would encourage that anymore than the current situation. Are you suggesting they shouldn’t be used together just because you could end up with big bundles? A developer can do lots of things that cause large bundles, it doesn’t seem practical to stop all possible foot guns.

[liorwohl]

My use case of importing SVG as a component template was that in our application the logo of the app has an animation while the app is loading something using REST (so I have an animated-logo component), and the same SVG image is used somewhere else as a background. Right now I inline the SVG in the component because I dont want to change the background to html, its an ugly solution. I dont see why Angular care which text file extension I use.