0

I want the color of my SVG icon to be white by default and to become red on hover.
But in my current code it is always white and does not change on hover. Why?

Here is my code:

index.html file:

<img src="images/social/icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 hover:fill-red-400">

icon-facebook.svg file:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path fill="#FFF" d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/>
</svg>

I also noticed, that defining the white default color with a Tailwind CSS class on the img tag instead of using the fill attribute in the SVG file doesn't work either - the icon will just be black.
Why do my Tailwind CSS classes not have any effect at all here?

index.html file:

<img src="images/social/icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 fill-white hover:fill-red-400">

icon-facebook.svg file:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/>
</svg>
lchristmann
  • 103
  • 1
  • 5
xuan xose
  • 19
  • 4
  • 3
    You can not affect anything inside an SVG that you embed via `img`, from the outside via CSS. You would need to put the actual `...` directly into your HTML. https://css-tricks.com/using-svg/#aa-the-problem-with-both-img-and-background-image – CBroe Aug 23 '23 at 11:12
  • Possible duplicate of [this](https://stackoverflow.com/q/24933430/20594090) and [that](https://stackoverflow.com/q/11978995/20594090) question. Could be marked as duplicate like [this](https://stackoverflow.com/q/55744607/20594090) or [this](https://stackoverflow.com/q/40343354/20594090) or [this](https://stackoverflow.com/q/59211112/20594090) with references to both two largely viewed questions like [this question](https://stackoverflow.com/q/56277291/20594090) has. The new that it brings to the table is Tailwind CSS. – lchristmann Aug 23 '23 at 20:57

1 Answers1

1

The issue you're facing is not Tailwind-specific. If you would write normal CSS, like the following...

img:hover {
    fill: #f87171; 
}

...it would not work either.

The problem here lies in the fact (as @CBroe already commented), that you cannot style an SVG that you embed via the img tag with CSS (as you can read in this or this article).

Solutions

I layed out several approaches in this answer here in detail. In short:

  • don't embed SVGs with the img tag, but instead use the svg tag (recommended)
  • or use a script to transform those img tags into svg tags (not recommended)
  • or use some other workaround, like masks, filters, or the background-image property

Easiest solution (recommended)

Embed SVGs with the svg element in the HTML.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="bg-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" alt="facebook logo" class="w-7 h-7 fill-white hover:fill-red-400">
            <path
                d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" />
        </svg>
    </body>
</html>

Tailwind itself does it like that whenever possible, as you can see on their homepage or the Tailwind UI page (I didn't find a single img embed). You can check this by right clicking on every icon there and picking "Inspect". Or short Ctrl + Shift + C.

However, when they need to embed it from a remote source and do not care about further changing the styling via CSS (https://...), they do and must use the img tag, because there is no src attribute supported on the svg tag. They do this for example in Tailwind Components, like this Landing Page Template here.

But in serious full-blown Tailwind Templates like this one, where they have a custom company logo, they always stick to embedding it as svg element.

Improvements to your SVG

  • you need to define the viewBox attribute on the SVG file to make it scalable - without it, you can't increase or decrease its size. That's why I added viewBox="0 0 20 20".
  • the width="20" and height="20" in your SVG file are unnecessary, since the dimensions are already defined by the path itself and the viewBox - setting the width and height there only prevents you from scaling it. That's why I removed them.

index.html file:

<img src="icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 fill-white hover:fill-red-400">

icon-facebook.svg file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/>
</svg>
lchristmann
  • 103
  • 1
  • 5