0

I'm trying to figure out the most adapted way to use an SVG (a logo) on a website's header. I want the logo to be clickable, and change color when hovered on.

I've seen theses differents methods : inline SVG, iframe, object,img, embed and as background-image :

  • I won't use the img and background-image, because I understood you can't modify theses easily (i.e. I can't say "make the image to this specific hue").
  • iframe and embed seem to be not recommended.

So I looked more closely at inline SVG and object.

  • I like the conveniency of the inline SVG to modifiy it with CSS, but I'm not a fan of displaying in the gcode how to replicate the logo, and to have a big chunck of code that I would have to modify is the logo changes
  • I can display the svg with easily, but I haven't found a way to modify the infill with this method.

So my very first question is about the method object : is there a way to modify the proprieties (i.e. fill) of the svg on the go ?

If not, am I just to demanding and I should just stick with the inline svg ?

Cheers,

Tpeyron
  • 26
  • 1
  • 1
    using svg seems like a good option in your case. It's easy to change attributes in response to user events, see this answer for example: https://stackoverflow.com/questions/22289214/how-to-change-stroke-color-in-svg-image-on-hover-event – Hoff Jun 04 '21 at 07:56
  • Thanks @Hoff, but am I too paranoid to not want to display the tag of the svg ? I'd like it better if it could be fetch somehow diretcly to the concerned svg – Tpeyron Jun 04 '21 at 08:10
  • Very well, I'll stick to the svg then. Thanks ! – Tpeyron Jun 04 '21 at 08:25

1 Answers1

0

As illustrated in this topic, using an object isn't quite an easy solution for my problem.

And as @Hoff suggested in the comment, the SVG is the most suitable option for me, and replicating an svg is trivial.

So svg inline it is !

Thanks.

Tpeyron
  • 26
  • 1