Any updates about SVG opacity problem?

[mysteryx93]

There was this problem in Svg.Skia with Opacity only applying 0 or 1, with no fades.
wieslawsoltes/Svg.Skia#82

Any updates in regards to this?

[maxkatz6]

I wonder if there is a proper issue in Avalonia repository for that.

[mysteryx93]

Has the culprit ever been identified? Is it Skia.SVG or Avalonia

[maxkatz6]

I don't quite remember. If I am right, there wasn't a bug, but limited API.
As custom draw operation behaves independently from the global Avalonia rendering state (since, it uses direct access to the Skia).
In this PR there was added a new property #8083 CurrentOpacity which is supposed to be used by controls like this. So, Skia.SVG can solve this problem now with this API for both 0.10 and 11.0.

I am not sure about this PR though https://github.com/AvaloniaUI/Avalonia/pull/9964/files

[XDgl233]

I am also curious about this question as well. And besides opacity support, I also want to fill the entire Svg geometry by brush, but I can't find a way to do it.

So far, I use a high-level workaround, that still uses wieslawsoltes' work: Svg.Skia and SvgToXaml.
I wrap the Image control in a templated control and add a styled property to store the Svg source path, then bind the Image's Source property to this property and an IBrush via a multi-value converter. The value converter loads (Svg.Skia) the .svg file and converts (SvgToXaml) it to a string in XAML format, the string will further be split and parsed into one or multiple GeometryDrawing (the geometry and brush properties). The GeometryDrawing is then grouped into DrawingGroup and used to construct the DrawingImage and return to the Image's Source.
I also store the DrawingGroup into the templated control as caches (is bound in via template self-binding and is involved in the value converter logic), in the hope of improving the performance a little when the control is playing color animations.

It works fine for its sole purpose: opacity support and change colors. But I would still like to hear news about low-level integration :)

Edit: If you don't need to change color with animations or transitions, then I think using this workaround is fine performance-wise as the value converter function only runs when the binding property were changed.

[kyuranger]

As a bystander, this bug has existed for a long time, but it has not been resolved. Some people say that it is caused by problems in Avalonia itself, and some people say that it is caused by problems with the author of this library. But in any case, as our users, we feel that this bug is very embarrassing, and it also limits our many presentations on the UI. As users, we can't do too much. We only hope that this can be completely solved in the future.

[maxkatz6]

Some people say that it is caused by problems in Avalonia itself, and some people say that it is caused by problems with the author of this library

Up-to-date and correct information can be followed in this PR #9964

As well as a complete solution - .With(new SkiaOptions { UseOpacitySaveLayer = true });
Why it's not enabled by default? It will cause performance degradation in some applications.
A better mixed solution is possible, but it wasn't done in 11.0 timeframe.

[kyuranger]

All right, looks like we'll just have to wait for the better solution. Thank you.

[vltally]

You can conver svg to an xaml, and use it as an image.
https://github.com/BerndK/SvgToXaml/releases/tag/Ver_1.3.0

  <Image Width="19" 
     Height="19" 
     VerticalAlignment="Bottom" 
     HorizontalAlignment="Center">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
                        <GeometryDrawing Brush="#ef3a3a" Geometry="F0 M24,24z M0,0z M15.0615,1.60897C13.3515,0.900679 11.4489,0.807208 9.67774,1.34448 7.90659,1.88175 6.37653,3.01652 5.34826,4.55544 4.31998,6.09436 3.85712,7.94221 4.03853,9.78414 4.11726,10.5835 4.31522,11.3603 4.62105,12.0905 4.96903,12.9213 5.41848,13.7021 5.83158,14.4197L5.92971,14.5903C6.00925,14.7287,6.08722,14.8651,6.16325,15L8.43164,15C8.18574,14.5071,7.91932,14.0386,7.66392,13.594L7.57854,13.4455C7.15208,12.704 6.76306,12.0276 6.46579,11.3178 6.23641,10.7702 6.08795,10.1876 6.0289,9.58811 5.89284,8.20666 6.23999,6.82077 7.0112,5.66658 7.7824,4.51239 8.92995,3.66131 10.2583,3.25836 11.5867,2.85541 13.0136,2.92551 14.2961,3.45673 15.5786,3.98794 16.6372,4.9474 17.2915,6.17162 17.9459,7.39585 18.1555,8.80908 17.8847,10.1705 17.6139,11.532 16.8794,12.7574 15.8064,13.6381 14.7333,14.5187 13.3881,15 12,15L12,17C12.9377,17,13.8607,16.8353,14.7293,16.5201L12.8244,20.7697 12.8235,20.7717C12.4745,21.5356,11.3955,21.5549,11.0196,20.8031L9.11806,17 6.88199,17 9.23077,21.6976C10.3594,23.9547,13.6009,23.8947,14.6452,21.5973L14.6473,21.5926 17.8419,14.4656C18.8563,13.3814 19.5539,12.0305 19.8463,10.5607 20.2074,8.74545 19.9279,6.86113 19.0554,5.22883 18.1829,3.59653 16.7714,2.31725 15.0615,1.60897z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>