38

All tutorials with adding svg to a component in AngularCli that I found recommend to insert it in html template, something like this: 

<div>
  <svg viewBox="0 0 250 250">
    <svg:g class="group">
       <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
       <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
    </svg:g>
  </svg>
</div>

But I wish to keep templates clear and instert only few tags in it with url to separated svg file, somwehow like this: 

<svg class="star">
        <use xlink:href="../../../assets/images/svg/star.svg"
               x="0"
               y="0" />
</svg>

Ho do I use separated svg files in components?

mr_blond
  • 1,586
  • 2
  • 20
  • 52

9 Answers9

41

If you have logo.svg:

  1. Put it inside your src/assets folder
  2. Include folder in the angular.json config: "assets": [ "src/assets" ]
  3. Refer to it from template: <img src="assets/svg/logo.svg">
Boris Yakubchik
  • 3,861
  • 3
  • 34
  • 41
  • What if it is a lib? When I tried that and tried running the app that's in the same workspace and is using the lib, it gets the following error: `An unhandled exception occurred: The projects/my-lib/src/assets asset path must start with the project source root`. But if I start from `src`, there is no way it's going to know if I mean the lib or the app. Referring to the app's assets folder in the same way starting from `projects` works fine – Guilherme Taffarel Bergamin Jul 21 '22 at 23:42
20

Include your SVG files in src/assets folder and add the svg folder in your angular.json file.

"assets": [ "src/assets/svg/*" ]

This way you can include the file in your components as you wish.

mr_blond
  • 1,586
  • 2
  • 20
  • 52
Harini P
  • 629
  • 5
  • 12
  • Thanks! One rather add svg folder "assets": [ "src/assets/svg/*" ] than each svg file. – mr_blond Nov 01 '18 at 12:12
  • 3
    What if it is a lib? When I tried that and tried running the app that's in the same workspace and is using the lib, it gets the following error: `An unhandled exception occurred: The projects/my-lib/src/assets asset path must start with the project source root`. But if I start from `src`, there is no way it's going to know if I mean the lib or the app. Referring to the app's assets folder in the same way starting from `projects` works fine – Guilherme Taffarel Bergamin Jul 21 '22 at 23:38
16

TL;DR, use HttpClient to fetch for the file, then use bypassSecurityTrustHtml to render it with [innerHTML].

This may be a bit late for an answer, but here's how we found the solution. we tried looking up into how angular material does it for their icons, and boy were we surprised to how simple it really is. They were just fetching the file using HttpClient! It was already at the back of our minds but we kept ignoring it cause we thought maybe there was a better solution.

So after a few minutes of searching, we stumbled upon this: https://github.com/angular/components/blob/653457eaf48faab99227f37bc2fe104d9f308787/src/material/icon/icon-registry.ts#L621

So basically, if you have your SVG file somewhere in your assets folder (/assets/images/svg/star.svg), all you have to do is to fetch it using HttpClient.get and use the DomSanitizer to bypass security and trust the given value to be safe HTML before you can render it to your component.

And finally, here's how our component looks like:

import { Component, OnChanges, SecurityContext } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-svg-icon',
  template: `<span [innerHTML]="svgIcon"></span>`,
  styleUrls: ['./svg-icon.component.scss'],
})
export class SvgIconComponent implements OnChanges {

  @Input()
  public name?: string;

  public svgIcon: any;

  constructor(
    private httpClient: HttpClient,
    private sanitizer: DomSanitizer,
    ) {
  }

  public ngOnChanges(): void {
    if (!this.name) {
      this.svgIcon = '';
      return;
    }
    this.httpClient
      .get(`assets/images/svg/${this.name}.svg`, { responseType: 'text' })
      .subscribe(value => {
        this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(value);
      });
  }

}

Now you can just import the component anywhere in your app as

<app-svg-icon name="star"></app-svg-icon>
jsnewbie
  • 1,721
  • 13
  • 9
  • Absolutely the underestimated answer should be known by every angular developer ! Thank you a lot ❤ @jsnewbie ❤! – Xinxin May 21 '22 at 22:09
  • 1
    @jsnewbie, this works great for an app which has an internal inline icon component. But how could I rewrite this to have the icons as part of a lib and then use the lib to call for the icons a la `mat-icon`? I want to provide icons in my lib as well not only a component to use icons that are part of the app. Also, how am I supposed to control icon size? With the `` tag like OP mentioned, I could set `height` and `width` directly and pass them as parameters to my component. – Guilherme Taffarel Bergamin Jul 21 '22 at 00:51
  • "to bypass security and trust the given value" that's the worst and most risky advice you can give to a worldwide comunity on stackoverflow. – mhombach Oct 18 '22 at 06:54
  • 1
    @GuilhermeTaffarelBergamin i think you can just include the assets of your lib into the build as answered here: https://stackoverflow.com/questions/57741052/include-assets-when-building-angular-library – jsnewbie Nov 09 '22 at 19:07
  • 2
    @mhombach that's generally how the mat-icon library works, and that feature was created for a reason. you just have to know when and how to use it. cheers! – jsnewbie Nov 09 '22 at 19:11
  • @jsnewbie this is critically wrong. You are supposed to use " https://angular.io/api/platform-browser/DomSanitizer#sanitize " for sanitizing incoming values. Everything you with "bypass..." is ok for debugging and prototyping but must be removed for production-grade code. I doubt that the mat-icon lib uses "bypass..." in the production code. But even if it is, that's just a flaw in the lib (as many libs have flaws) and nothing to take as reference. – mhombach Jan 04 '23 at 13:42
  • @mhombach This is not for an incoming value, this is for our own icons. If you tend to include malicious code in your own icons, please, use a proper sanitizer. But for those of us who can trust our own icons from our own source, this is totally appropriate. – maybesomename Feb 11 '23 at 13:59
  • @maybesomename doesn't matter "how much" you trust a source. Calling the sanitize-pipe, as it's meant to be, won't do any harm and is not more complicated. "bypassing" the sanitizing process is always "bad practice" except certain edge-cases where it's impossible to use the normal process. If you think, bypassing is ok "if you know what you do" then you need more experience to learn why that is never true. XSS is just one of many examples why you should never trust "your own icons" because it's sometimes not you who decides what "your own" icons means at runtime. – mhombach Feb 12 '23 at 17:16
  • @mhombach I do agree that a sanitizing won't do any harm, and I also see how one could miss a hidden threat. Could you tho please explain in this situation how could XSS be a threat? – maybesomename Feb 13 '23 at 20:02
  • @maybesomename if an attacker is able to provide a malicious image-path (by XSS) by some query-param etc for example, you are screwed if you are just "bypassing" the sanitizing process. The attacker can then inject js-code into your page ("XSS"). If you sanitize for an image, then everything that is NOT a valid image will be cleaned or blocked. – mhombach Feb 15 '23 at 15:17
  • @mhombach I don't get it. Do they already have to commit XSS to be able to commit XSS by the malicious images? Why don't just use the first XSS then? Also, could you please expand on the query param bit? – maybesomename Feb 26 '23 at 02:27
  • @mhombach My whole uncertainty about your concern is that if an attacker is able to change a constant sting in my js (that is, the image path), what is there that they can not already do, but can do with a malicious image? If they have absolute control, how can more control hurt? Do I miss something? – maybesomename Feb 26 '23 at 02:37
  • @maybesomename everyone can create a link to "your-app.com?search=abc" where "abc" is a search-string parameter and send it to someone. So this is a default way "someone" or an "attacker" can "control" what your application does to the user. An XSS is a way to use such params in a malicious way to have your app make something evil on a user's browser. To prevent this, Angular has implements "sanitizing" functions. If you just "bypass" them as developer, you are putting every user on risk without any pro-argument. "I know what I do" is showing too little experience in software-development. – mhombach Mar 06 '23 at 16:31
  • @mhombach Sorry, but you failed to answer my question. You seem to be unable to argument your point here. I believe there is no way to use an XSS in any way to leverage the un-sanitised images in this particular case. And there is a pro argument, that is performance. I did agree with you in that sanitizing is a must in a general context, would you please put forward ANY scenario where it would be a problem not to do so in THIS use case? – maybesomename Mar 07 '23 at 17:28
  • @maybesomename "performance" is no "pro-argument" in this case. Dive into how JS works under the hood (like "hot functions" etc). If you want to have performance, don't use a big chunky framework liek Angular in the first place. I perfectly argumented for why you should always consider security as important and what the security best practice is in this case. If you desperately want to avoid best practice, all good. But Stackoverflow serves many upcoming devs who will read this question/answer and will use it for infinite different cases. So it's not only about "you" here. /end – mhombach Mar 13 '23 at 12:42
  • @mhombach I dont think Stackoverflow supports opinion based arguments like yours. Since you are unable to support your standpoint (except for deflecting), it is nothing but opinion. If people misuse this answer, that is on them. If you claim that this answer is dangerous when it is not, and you are unable to argue it, that is on you. And it is misleading. No need to get personal here. – maybesomename Mar 14 '23 at 19:55
  • @mhombach And I do agree that pointing out that this practice might be dangerous in most cases is necessary. But claiming that it is dangerous in this case is false. – maybesomename Mar 14 '23 at 20:00
  • *sigh* This is not the place to explain XSS or give detailed examples. The point is to stick to securit best-practices. In Angular it's 1 line of code to bypass the security and it's also 1 line to use the default security implementation. If you want to know what an img-XSS can do, just google. There are plenty of examples. If me not giving an example here in this thread is reason enough for you to use the unsafe bypassing instead of the safe version, go ahead. It's not up to me to provide out-of-scope examples specifically you. – mhombach Mar 20 '23 at 10:02
8

one way to do this is to set id property for your svg file and put your svg files in your asset folder. then use that id in mat-icon like this:

<mat-icon svgIcon="my-star-icon"></mat-icon>

this is a better way to do it; in this way you don't have to deal with svg tags in your UI html code. also this supports google icons.

though this works if you're using angular material.

Edit: You need to register the icon with the IconRegistry in your component for this to work:

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'my-star-icon',
        sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg'));
  }

Check the docs here and an example here.

Daniel
  • 21,933
  • 14
  • 72
  • 101
Arya11
  • 570
  • 2
  • 6
  • 21
  • 5
    This needs additional setup with Angular Material. Can you update your answer with those. If not, i can go ahead and edit your answer. – justojas May 16 '19 at 18:47
  • @OjasDeshpande you may edit my answer. I have not worked with the newer version. thanks for pointing it out. – Arya11 May 18 '19 at 05:53
2

So I was trying to do this, and for the life of me i could not get this svg to show up until.... After many internet searches, and I don't think it's just me and if you copy pasta path from the internet then maybe you forgot to include this

xmlns="http://www.w3.org/2000/svg"

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
<path d="I love copying and pasting paths"/>
</svg>

Then you can go ahead and do your

 <img src="assets/img/logo.svg" />

and if this doesn't work and somehow you want to work with images instead then put your images in

assets/img/copypasta.png

Dharman
  • 30,962
  • 25
  • 85
  • 135
youllbehaunted
  • 631
  • 1
  • 8
  • 15
2

There is a more elegant way, however it implies that the svg file has the same ID as the file name.

Svg component:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-svg-icon',
  template: '
    <svg attr.width="{{width}}px" attr.height="{{height}}px" attr.fill="{{fill}}" attr.class="{{class}}">
      <use attr.xlink:href="assets/icons/{{icon}}.svg#{{icon}}"></use>
    </svg>
  ',
})
export class SvgIconComponent implements OnInit {
  @Input() icon!: string;
  @Input() width?: number;
  @Input() height?: number;
  @Input() size?: number = 24;
  @Input() fill?: string;
  @Input() class?: string;

  ngOnInit(): void {
    if (!this.width || !this.height) {
      this.width = this.size;
      this.height = this.size;
    }
  }
}

Let's say you have svg in a folder: /assets/icons/person.svg

The svg itself contains the following code (So that you can easily change the size and color of your svg, it should not contain height, width and fill attributes):

<svg id="person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
</svg>

And now you can use your icon in any component:

<app-svg-icon [icon]="'person'" fill="red" [size]="48"></app-svg-icon>
Venom
  • 97
  • 6
  • I like this one. We've been using it in our apps. But now I need it to be part of a library and the library will have to provide he icons. I was only able to use icons present in the `assets` folder of the app and not the ones in the lib – Guilherme Taffarel Bergamin Jul 28 '22 at 22:07
1

Angular - create one more component, add a lot of stuff, etc and then get your svg.

React - just make an import of your svg and continue to work.

(and yes, it will be added as tag. You can fill it with css, change it whatever you like)

Compare React and Angular imort of SVG

Spawnet
  • 53
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 17 '23 at 21:36
  • The Angular approach, based on this discussion, allows for server side generation of the SVG, and inclusion of that SVG into the DOM. This is not what the React Import and some of the solutions presented do. React Import and putting things in Asset folders places the SVG into the bundles, which may be what some people want, but for charts and things like that, the http method seems to be the best all around answer. – TJ Bandrowsky Jul 21 '23 at 12:14
0

import { DomSanitizer } from '@angular/platform-browser';


  constructor( private sanitizer:DomSanitizer) { }
steps:any
  ngOnInit() {
    this.steps=this.sanitizer.bypassSecurityTrustHtml(this.step)
  }
  
  step:any=[
    `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080">
  <defs>
    <clipPath id="clip-Web_1920_1">
      <rect width="1920" height="1080"/>
    </clipPath>
  </defs>
  <g id="Web_1920_1" data-name="Web 1920 – 1" clip-path="url(#clip-Web_1920_1)">
    <rect width="1920" height="1080" fill="#fff"/>
    <line id="Line_1" data-name="Line 1" y1="2" x2="436" transform="translate(0.5 457.5)" fill="none" stroke="#707070" stroke-width="1"/>
    <g id="Rectangle_1" data-name="Rectangle 1" transform="translate(437 395)" fill="#df5151" stroke="#707070" stroke-width="1">
      <rect width="212" height="121" stroke="none"/>
      <rect x="0.5" y="0.5" width="211" height="120" fill="none"/>
    </g>
    <g id="Rectangle_2" data-name="Rectangle 2" transform="translate(894 657)" fill="#d95ed5" stroke="#707070" stroke-width="1">
      <rect width="255" height="96" stroke="none"/>
      <rect x="0.5" y="0.5" width="254" height="95" fill="none"/>
    </g>
    <line id="Line_2" data-name="Line 2" y2="189" transform="translate(543.5 516.5)" fill="none" stroke="#707070" stroke-width="1"/>
    <line id="Line_3" data-name="Line 3" x2="351" transform="translate(543.5 705.5)" fill="none" stroke="#707070" stroke-width="1"/>
    <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(455 633)" fill="#1acf38" stroke="#707070" stroke-width="1">
      <ellipse cx="88.5" cy="72.5" rx="88.5" ry="72.5" stroke="none"/>
      <ellipse cx="88.5" cy="72.5" rx="88" ry="72" fill="none"/>
    </g>
    <text id="Login" transform="translate(510 455)" fill="#f8f1f1" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">Login</tspan></text>
    <text id="True" transform="translate(520 716)" fill="#f6f1f1" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">True</tspan></text>
    <text id="Logged_In" data-name="Logged In" transform="translate(977 701)" fill="#fcf8f8" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">Logged In</tspan></text>
  </g>
</svg>
`
    ]
<div [innerHTML]="steps"></div>
HARIHARAN S
  • 11
  • 2
  • Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You may also have a look at our ["How to write a good answer"](https://stackoverflow.com/help/how-to-answer) entry. – ahuemmer Aug 01 '22 at 06:55
0

Use SVG as Template

You can do it directly by use SVG instead HTML as component template - more details here.

Working example here

@Component({
  selector: 'app-my-svg',
  templateUrl: './my-svg.component.svg',
  styleUrls: ['./my-svg.component.css']
})
export class MySvgComponent {
...

inside this SVG template (which is in separate file!) you can use styles and variables in angular way

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345