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 
Thanks in advance for your answers !
Hello!
At the moment you can’t alter the color or animate colors of SVG’s directly in Webflow. 
Oh alright ! That’s just what I wanted to know ! Thanks for the fast answer, I won’t have to look for hours
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.
1 Like
Oh I’ll try that ! Thanks for the tips !
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
3 Likes
Would be cool to be able to color SVG files though, new feature?
2 Likes
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
-
Paste your SVG code into a Webflow Embed as Daneil explained in the comments above
-
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: How SVG Line Animation Works | CSS-Tricks - CSS-Tricks
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:
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: How to Animate Festive SVG Icons With CSS | Envato Tuts+
1 Like
Alright thanks a lot guys for all the suggestions, I’ll try this out ! Thanks again for the help !
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.