Thanks for the call out Anna
You can indeed use inline SVG with Webflow and it’s kind of very practical and effective.
Here I use a custom code widget to paste both SVG code and a “mini” CSS. See how the third icon has a lighter opacity and stroke width. I added a class to a group (
<g> element) and target this class with CSS right underneath. As edits appear right away in Webflow preview, it’s as easy as it looks in the image.
WF is not yet really SVG ready but this is surprisingly easy to do. I’ll post again – later – details of the same experiment using the CVG element, it allows to declare SVG code somewhere and then create instances of it.
Edit: I’ll try to publish the page above in the sandbox tomorrow. Icons shown are from Webalys’ Streamline collection. Very high quality icons, and the code is consistant so you don’t have to deal with a new SVG hierarchy for each icon (it can happen with some other collections and it makes the work a bit tedious.
Edit2: worth mentioning that if you edit your SVG icon code, add classes and juste save it as a SVG file, then use it as an image in Webflow, it will NOT work. You can’t target a class in an SVG file with CSS, at least not by default. However, if you ceate an interactive SVG file with animations etc. and use it as an image in Webflow, it will animate and react very well, as a standalone component.
Edit3: would it be a good idea for Webflow to be the first live editor to extensively support SVG, allowing us to visually alter the hierarchy of objects, add classes and CSS properties, and be able to animate the properties using the states and the Interactions? Absolutely! I’m convinced and if you are too, don’t hesitate to test the experiments above and ask for SVG support in the forum Whishlist category