search

webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
4.76k stars 551 forks source link

How can we enable the user to control svg fill color in the style panel? #212

Open taylornowotny opened 2 years ago

taylornowotny commented 2 years ago

There's often a need to change the fill color of a single-color icon. For example, for a hover effect or to allow the same icon asset to be used across the site in different color situations.

Webflow users often paste the SVG code of icons in a code embed element, making sure the fill="currentColor". That enables them to change the color of the icon using the font color in the style panel.

Is there a way a Webstudio user could be able to change the color fill of (single-color) icons natively?

UX possibilities:

  1. SVGs with a single fill color can have their fill color changed via the font color property. The fill color in the code is the default unless a font color is set directly on the image. Will not inherit font color from parent.
  2. There could be a checkbox in the SVG asset settings to change the code to fill="currentColor". (maybe labeled "control fill color with font color")
  3. We could include a color setting in the SVG asset settings to handle color directly, separate from the style panel.
kof commented 2 years ago

That's a very interesting task. Essentially the problem is that svgs often come exported with a predefined color instead of using currentColor and we want to give user a UI to modify the SVG without actually having to touch svg's XML by hand.

We need to think of all situations where this is needed, because its not just fill property, there is also stroke and we probably need a way to visually select the paths we want to modify, because what if the SVG is a colorful icon and you want to set the fill or stroke only on a certain path?

We may need to look at this problem holistically.

kof commented 2 years ago

In addition to that currentColor won't work if svg is rendered on the canvas as an img tag or background image. It has to be rendered as an SVG document inside HTML, which means we also need an SVG component or alternatively generic code component that would allow that.

kof commented 2 years ago

As of right now anyone can do this by opening the SVG file and replacing the fill/stroke with currentColor inside it's XML and then pasting it into a code embed, though this is probably intimidating to majority of visual developrs/designers.