Skip to content

Add an SVG file to your html in Angular

Images can be easily inserted at any section in an HTML page. To insert image in an HTML page, use the <img> tag. But, those days are gone. Img tag easily adds image of any format to your html page. You specify the path of the image and alternate text and you are done.

 <body>
      <img src="/images/logo.png" alt="Logo" width="200" height="80">
</body>

These days developers prefer SVG files instead of PNG/JPG file. SVG files are resolution independent and they can retain the same quality no matter what screen resolution or size they are being at.

Advertisements

When you are working on an Angular project and if you want to add an SVG file to your html page, you can add it with the <img> tag but you should add it to your assets in angular.json.

"assets": 	[
              "src/favicon.ico",
              "src/logo.svg"
            ]

You can add a single file to your assets like the above or you can add the whole path to your Angular assets.

"assets": 	[
              "src/icons/*",
              "src/assets/*"
            ]

You can add an SVG file to your html page with the <img> tag.

<img src="logo.svg" style="max-width:50%;" alt="Poop Logo"/>
See also  How to crop images in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.