Streaming live at 10am (PST)

Support for SVG CSS properties


#1

Hi,

Is there a way to change the color of an SVG icon on "mouse hover" true CSS.
I did a google search and found the "fill" property, but the "fill" property on webflow is for the background.

tks
Rui Almeida


#2

The fill CSS property only applies to SVG elements, but you're
trying to apply it to HTML <img> element

This is from http://stackoverflow.com/questions/7280821/styling-svg-with-css-in-the-containing-html/7281197#7281197

So you can just give it a fill: green and change the black to green for an <img> tag. There is a solution on the Stack Overflow question, but it's not straightforward as plain vanilla CSS.


SVG hover effect
#3

@Rui_Almeida it looks like the only way to do this is by embedding the SVG code inline, and adding custom CSS code...

Here's an example of this working with an inline SVG:
http://jsbin.com/EqUyiRAG/3/edit

-Dan


#4

hum... i was thinking it was something more easy and simple.

tks for the reply.


#5

It would be so awesome to change the SVG color inside an img tag with plain CSS. That would make everyone's life so much easier.


#6

is there any update to changing a SVG color possibility?

It would be so much easier to have one icon that I can style with different colors, than upload multiple colors of the same email icon ;(


#7

I would also love to this this feature in the next update !!! keeping fingers crossed smiley


#8

I suceeded to do that inside the SVG file.
The SVG file have the ECMAscript defined inside and then I could define a HOVER state. For your exemple it's possible to do this.


#9

You can colorize SVG files inside Webflow using this method. This will allow you to add text color on parent elements and the svg's inside will inherit that color.

  • Set the fill="currentColor" on a path in the SVG file like so:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13">
  <path fill="currentColor" d="M14.2 1H1.8c-.4 0-.8.4-.8.8v9.4c0 .4.4.8.8.8h12.4c.4 0 .8-.4.8-.8V1.8c0-.4-.4-.8-.8-.8zM3 4.5C3 3.7 3.7 3 4.5 3S6 3.7 6 4.5 5.3 6 4.5 6 3 5.3 3 4.5zM4 10l6-5 3 5H4z"/>
</svg>
  • Paste the SVG code into an embed inside Webflow. The graphic will render on the canvas.
  • Apply a width/height directly in the SVG code by adding height="16px" and width="16px" to the <svg> tag or by adding a class to the embed and setting width and height on the class.
  • Set Text Color on the icon or on the parent element and it will apply the color on the SVG.

Note: Don't upload the SVG like you upload other images. The SVG has to be in the HTML directly and at the moment this is the only way to do it.


#10

Can't seem to get this to work. Anybody have a simple walk through? SVG file settings I've used below... uploaded, gave it a class + text color, nothing :frowning:


#11

Update: The SVG has to be directly in the HTML, not inside of an img tag. I updated my comment above. It's a more cumbersome workflow than just uploading it like other images, but for now it will do until we have an SVG icons feature in Webflow.


#12

Right on :wink: That works great, thanks for your time.


#13

When will Webflow support real "svg" tags instead of only putting svgs in tags ?


#14