Onion Information

Page Clicks: 0

First Seen: 04/26/2024

Last Indexed: 10/23/2024

Domain Index Total: 151

Using img tag prevents the use of CSS to change property of SVG. There is a workaround. Embed SVG file img tag object tag Website usually embed SVG using tag or directly use the tag. Using tag prevents the use of CSS to change property of SVG. As for inline , I prefer to have a separate file that is easier to keep track. Embed SVG file § Utilise 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 : Search Search icon The is for tooltip and stands for description and functions similarly to the alt attribute in . 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. That attribute is mandatory ; using link alone like 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 tag. Since property in SVG is defined as a synonym for , it also shares similar limitation. So, the following method does not work, Search Search icon object tag § tag doesn’t work inside an tag. Source: CSS-Tricks.com