Embed SVG without using <img> tag

Using img tag prevents the use of CSS to change property of SVG. There is a workaround.

  1. Embed SVG file
  2. img tag
  3. object tag

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.

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. This is how I embed search.svg:

<svg viewBox="0 0 512 512">
  <title>Search</title>
  <desc>Search icon</desc>
  <use href="/svg/search.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.

The viewBox value is based on the layout you want to use. 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 (the only SVG minifier?). svgo removes the id attribute by default, via cleanupIDs plugin.

To disable that plugin in CLI,

$ svgo --disable=cleanupIDs test.svg -o test.min.svg

If you’re using my minifier plugin in Hexo, hexo-yam:

minify:
  svg:
    plugins: [{ cleanupIDs: false }]

img tag §

Currently, I use the following 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 for <img>, it also shares similar limitation. So, the following method does not work,

<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 doesn’t work inside an <a> tag.

Source: CSS-Tricks.com