Streaming live at 10am (PST)

Set color on SVG


#1

Hello guys,

I am trying to use a SVG pictogram and I want to know if it's possible to edit the color directly in webflow and if it's also possible to change the color using animations.

That's all I need :smiley:

Thanks in advance for your answers !


#2

Hello!

At the moment you can't alter the color or animate colors of SVG's directly in Webflow. :smile:


#3

Oh alright ! That's just what I wanted to know ! Thanks for the fast answer, I won't have to look for hours :smiley:


#4

The only thing you can do is insert your SVG as CODE within an embed widget.

In there you can apply a class to the corresponding path and give that a fill color.
You can then change the color of the svg on hover with custom code.


#5

Oh I'll try that ! Thanks for the tips !


#6

You can see it live here:

https://preview.webflow.com/preview/svgtext?preview=19d53e9d690d5b60b7a40043f31b161a
http://svgtext.webflow.io/

Custom Code:

SVG within Embed

Regards
Daniel


#7

Would be cool to be able to color SVG files though, new feature? :smile:


#8

Hey @MoinardColin

I've done a few SVG related bits & pieces in Webflow. Hope the below codes pieces will be of some use
.

1. SVG ANIMATION

  1. Paste your SVG code into a Webflow Embed as Daneil explained in the comments above

  2. Paste the below code into custom header code section:

You can edit the various bits of styling to change your SVG appearance and animation settings:

width : change the overall SVG width (optional - you can just leave it at 100% if you like!)
stroke : change the hex code to affect the color
stroke-width : the "weight" of your SVG line
stroke-dasharray : the width of the lines which will be animated (by the @keyframes bit at the end)
stroke-dashoffset : the space between your animated lines
animation : the length in time of your animation & its animation type

Often its easiest to just play with the animation settings until you get the effect you want. In the example above, I managed to determine that setting dasharray & dashoffset to 3000 made my SVG icon "draw" itself out fully, pause for a second, then start again, which was the effect I wanted.

Here's a really good, well document explanation of the principles used: https://css-tricks.com/svg-line-animation-works/

2. ANIMATING SVG COLORS WITH JQUERY

This one is a little more complex - you can do it with pure CSS but I prefer working in JQuery for these sorts of things.

It's going to be a little "in-depth" to explain in full on here, but there's a CodePen from LukyVJ which has all the necessary bits of code you can copy & re-use:
http://codepen.io/LukyVj/pen/DeBLu

PS. If you do want to do color animations using CSS only, there's also a great tutorial on TutsPlus which covers the topic in detail: http://webdesign.tutsplus.com/tutorials/how-to-animate-festive-svg-icons-with-css--webdesign-17658


#9

Alright thanks a lot guys for all the suggestions, I'll try this out ! Thanks again for the help !


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.