From 035dc384ee3d13508469b573a7a21007dcb4c653 Mon Sep 17 00:00:00 2001
From: curben <curben@users.noreply.gitlab.com>
Date: Sat, 1 Jun 2019 18:02:36 +0930
Subject: [PATCH] docs(post): Add 'How to embed SVG without using img tag' post

---
 source/_posts/how-to-embed-svg.md | 76 +++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 source/_posts/how-to-embed-svg.md

diff --git a/source/_posts/how-to-embed-svg.md b/source/_posts/how-to-embed-svg.md
new file mode 100644
index 0000000..cd50fd4
--- /dev/null
+++ b/source/_posts/how-to-embed-svg.md
@@ -0,0 +1,76 @@
+---
+title: How to embed SVG without using img tag
+date: 2019-06-01
+tags:
+- SVG
+- Web
+---
+
+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.
+
+<!-- more -->
+
+## Embed SVG file
+
+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 (I haven't implement it for mobile). This is how I embed the [search.svg](/svg/search.svg):
+
+```html
+<svg viewBox="0 0 512 512">
+  <title>Search</title>
+  <desc>Search icon</desc>
+  <use href="/svg/search.svg#search"/>
+</svg>
+```
+
+<br/>
+
+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.
+
+```
+<svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="..."/></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.
+
+To disable that plugin in CLI,
+```
+svgo --disable=cleanupIDs test.svg -o test.min.svg
+```
+
+<br/>
+
+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,
+
+```html
+<svg viewBox="0 0 512 512">
+  <title>Search</title>
+  <desc>Search icon</desc>
+  <image href="/svg/search.svg" x="0" y="0" height="512" width="512"/>
+</svg>
+```
+
+## object tag
+
+`<object>` [tag](https://css-tricks.com/using-svg/#article-header-id-11) doesn't work inside an `<a>` tag.
+
+Source: [CSS-Tricks.com](https://css-tricks.com/svg-use-external-source/)
\ No newline at end of file