Website usually embed SVG using `<img>` tag or directly use the `<svg>` tag. Using `<img>` tag prevents the use of CSS to change property of SVG. As for inline `<svg>`, I prefer to have a separate file that is easier to keep track.
Utilise `<use>` tag to embed an SVG file in `svg`. For example in this blog, I have a search button on the top right corner. This is how I embed the [search.svg](/svg/search.svg):
The `<title>` is for tooltip and `<desc>` stands for description and functions similarly to the `alt` attribute in `<img>`. These two tags are optional but recommended for [SEO purpose](https://support.google.com/webmasters/answer/114016?hl=en).
The `viewBox` attribute is mandatory. I simply use the value from the SVG file.
Notice `#search` value in the href attribute. It refers to the `id` attribute in the SVG file, which you need to manually add it. Following is an excerpt from the search.svg.
That attribute is **mandatory**; using link alone like `<use href="/svg/search.svg"/>` would *not* work. Another thing to watch out is SVG minifier like [svgo](https://github.com/svg/svgo) (the only SVG minifier?). **svgo** removes the id attribute by default, via [cleanupIDs](https://github.com/svg/svgo/blob/master/plugins/cleanupIDs.js) plugin.
For [hexo-yam](https://github.com/weyusi/hexo-yam),
```json
neat_svg:
plugins: [{cleanupIDs: false}]
```
## img tag
Currently, I use the following CSS,
```css
svg {
fill: currentColor;
}
```
to set the SVG to use the same colour as the font's. The `fill` attribute is not supported in `<img>` tag. Since `<image>` property in SVG is [defined as a synonym](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) for `<img>`, it also shares similar limitation. So, the following method would not work,
