How to Embed an SVG Image/Picture with the Code or File on a Website

How to Embed and Where to Find Great SVG Icons

There are three main ways to embed an SVG picture file on a website.

Use img tag in html, e.g., <img src = "file.svg" alt="description of the picture"/>.
Use as a CSS background-image, e.g., body { background-image: url(happy.svg); }.
Use the svg tag in html, e.g., <svg> <path d="replace with the actual content in the svg file" /> </svg>. You can open the downloaded SVG file with a text editor and find the text content. This way you do not have to serve the svg file. For a real example, you can view the html source for this webpage and search for ‘<svg’. Kudos to this reference. You can find svg icons at tabler and streamlinehq.

Stay tuned for using JavaScript to make all links on a webpage to open in a new tab.