SVG: support currentColor

tinchodias commented 5 months ago

SVGs can have fill="currentColor" and stroke="currentColor" attribute/values to specify that a SVG shape inherits the color from the HTML element that contains the SVG tag. I think the currentColor value is useful for Bloc-SVG. For example, for theme an icon. In fact, I0ve discovered it at the "outlined moon" icon at Ant icon set.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" fill-rule="evenodd"><path d="M489.493 111.658c30.658-1.792 45.991 36.44 22.59 56.329C457.831 214.095 426 281.423 426 354c0 134.757 109.243 244 244 244 72.577 0 139.905-31.832 186.014-86.084 19.868-23.377 58.064-8.102 56.332 22.53C900.4 745.823 725.141 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.287-386.024 374.198-399.649l.206-.013zm-81.143 79.75-4.112 1.362C271.1 237.943 176 364.092 176 511.5 176 697.344 326.656 848 512.5 848c148.28 0 274.938-96.192 319.453-230.41l.625-1.934-.11.071c-47.18 29.331-102.126 45.755-159.723 46.26L670 662c-170.104 0-308-137.896-308-308 0-58.595 16.476-114.54 46.273-162.467z"/></svg>

See:

This behavior would be a responsibility of BlSvgFactory. But note that:

Parent element can have a background that is not a color: it can have a gradient, too. Not sure about the behavior in such case, even in HTML.
Parent element can change it's background, so the SVG in such case should probably listen the change and update it's color.

plantec commented 5 months ago

I'm not sure it is on purpose but one can make it possible to change the "color" of an svg image. This is necessary to implement skin correctly in Toplo. It is already the case for png image. the inner form color can be changed by the skin (we already discussed about that if I remember well)

tinchodias commented 5 months ago

@plantec you made me remember once I found how to render this icons in colors, using cairo masks. I think with @labordep.

tinchodias commented 5 months ago

For the record, this is a way to see an Ant SVG icon in a web browser:

svgString := ToAntDesignIconProvider outlined_moon.
iconColor := Color purple.
htmlRef writeStreamDo: [ :stream |
    stream << '<!doctype html><html lang=en>
        <head><meta charset=utf-8><title></title></head>
        <body style="color:#'.
    stream << iconColor asHexString.
    stream << ';">'.
    stream << svgString.
    stream << '</body></html>' ].
WebBrowser openOn: htmlRef asUrl

tinchodias commented 5 months ago

Note: BlSvgColor fromString: 'currentColor' was returning Color white. But since the merge of svgEnh2 yesterday, this signals an error. I'm working on a solution.

A good solution will close this issue, but I may push faster solution before. I would return Color black to be more similar to what a user gets in a web browser, but maybe I make it answer white to be compatible with previous behavior... maybe it breaks the Toplo skin else.

@plantec

tinchodias commented 5 months ago

That commit wasn't really a fix. It was a mere workaround

pharo-graphics / Bloc

SVG: support currentColor #530