SvgGradientStop StopColor and fill color

[AmaelN]

Hi,

Currently using the SvgColourServer to define the stopColor of fill color

There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...)

Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white)

It is translated as

<linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity">
      <stop offset="0%" stop-color="36, 199, 201" stop-opacity="0" />
      <stop offset="100%" stop-color="'White'" stop-opacity="1" />
    </linearGradient>
    <mask id="filter_1">
      <rect x="0px" y="0px" width="1080" height="225" style="fill:url(#filter_1_opacity);" />
      <rect x="0px" y="225px" width="1080" height="604" opacity="1" style="fill:'White';" />
    </mask>

instead of

<linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity">
      <stop offset="0%" stop-color="rgb(36, 199, 201)" stop-opacity="0" />
      <stop offset="100%" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="filter_1">
      <rect x="0px" y="0px" width="1080" height="225" style="fill:url(#filter_1_opacity);" />
      <rect x="0px" y="225px" width="1080" height="604" opacity="1" style="fill:White;" />
    </mask>
    ```
    
    Thanks in advance for your time

[AmaelN]

Hi,

Hope that you doing fine,

Could you have a look at this issue please

[wieslawsoltes]

Hi,

Currently using the SvgColourServer to define the stopColor of fill color

There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...)

Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white)

It is translated as

<linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity">
      <stop offset="0%" stop-color="36, 199, 201" stop-opacity="0" />
      <stop offset="100%" stop-color="'White'" stop-opacity="1" />
    </linearGradient>
    <mask id="filter_1">
      <rect x="0px" y="0px" width="1080" height="225" style="fill:url(#filter_1_opacity);" />
      <rect x="0px" y="225px" width="1080" height="604" opacity="1" style="fill:'White';" />
    </mask>

instead of

<linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity">
      <stop offset="0%" stop-color="rgb(36, 199, 201)" stop-opacity="0" />
      <stop offset="100%" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="filter_1">
      <rect x="0px" y="0px" width="1080" height="225" style="fill:url(#filter_1_opacity);" />
      <rect x="0px" y="225px" width="1080" height="604" opacity="1" style="fill:White;" />
    </mask>
    ```
    
    Thanks in advance for your time

Interesting, are those working in chrome? Not sure if those things are supported by svg specification. Need to investigate.

[AmaelN]

Initially I've used svg. Net and the output is correct.

It's supported by svg and is working under Chrome.

I've moved my project under svg. Skia and I've seen the described mismach

If I can help, please let me know

Amael

Le ven. 17 juin 2022 à 9:05 PM, Wiesław Šoltés @.***> a écrit :

Hi,

Currently using the SvgColourServer to define the stopColor of fill color

There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...)

Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white)

It is translated as

instead of

```

Thanks in advance for your time

Interesting, are those working in chrome? Not sure if those things are supported by svg specification. Need to investigate.

— Reply to this email directly, view it on GitHub https://github.com/wieslawsoltes/Svg.Skia/issues/100#issuecomment-1159156909, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.***>

[wieslawsoltes]

Initially I've used svg. Net and the output is correct. It's supported by svg and is working under Chrome. I've moved my project under svg. Skia and I've seen the described mismach If I can help, please let me know Amael Le ven. 17 juin 2022 à 9:05 PM, Wiesław Šoltés @.> a écrit : … Hi, Currently using the SvgColourServer to define the stopColor of fill color There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...) Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white) It is translated as <linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity"> </linearGradient> instead of <linearGradient x1="1px" y1="0.2px" x2="1" y2="1" id="filter_1_opacity"> </linearGradient> ``` Thanks in advance for your time Interesting, are those working in chrome? Not sure if those things are supported by svg specification. Need to investigate. — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.>

Ah ok that helps a lot, which version of Svg.Net did you use?

[AmaelN]

Latest... For now I'm mainly on svg. Net It's working on svg net for the last two years since the day I started playing with your library....

I've a branch for svg skia...I am waiting to merge it in order to be able to move to net 6 as I'm deploying on a Linux docker and system drawing is not available...

Le ven. 17 juin 2022 à 9:27 PM, Wiesław Šoltés @.***> a écrit :

Initially I've used svg. Net and the output is correct. It's supported by svg and is working under Chrome. I've moved my project under svg. Skia and I've seen the described mismach If I can help, please let me know Amael Le ven. 17 juin 2022 à 9:05 PM, Wiesław Šoltés @.

> a écrit : … <#m_5423916160839134622_> Hi, Currently using the SvgColourServer to define the stopColor of fill color There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...) Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white) It is translated as instead of ``` Thanks in advance for your time Interesting, are those working in chrome? Not sure if those things are supported by svg specification. Need to investigate. — Reply to this email directly, view it on GitHub <#100 (comment) https://github.com/wieslawsoltes/Svg.Skia/issues/100#issuecomment-1159156909>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.>

Ah ok that helps a lot, which version of Svg.Net did you use?

— Reply to this email directly, view it on GitHub https://github.com/wieslawsoltes/Svg.Skia/issues/100#issuecomment-1159169832, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46ILXMH7DJBKO6QW7RALVPTGSRANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.***>

[wieslawsoltes]

Latest... For now I'm mainly on svg. Net It's working on svg net for the last two years since the day I started playing with your library.... I've a branch for svg skia...I am waiting to merge it in order to be able to move to net 6 as I'm deploying on a Linux docker and system drawing is not available... Le ven. 17 juin 2022 à 9:27 PM, Wiesław Šoltés @.> a écrit : … Initially I've used svg. Net and the output is correct. It's supported by svg and is working under Chrome. I've moved my project under svg. Skia and I've seen the described mismach If I can help, please let me know Amael Le ven. 17 juin 2022 à 9:05 PM, Wiesław Šoltés @. > a écrit : … <#m_5423916160839134622_> Hi, Currently using the SvgColourServer to define the stopColor of fill color There is a issue in the SvgGradientStop StopColor and fill when it is a text color (white, bleu, black...) Missing the rbg( ) for stop-color and the single quote should be removed when text color is used (white) It is translated as instead of ``` Thanks in advance for your time Interesting, are those working in chrome? Not sure if those things are supported by svg specification. Need to investigate. — Reply to this email directly, view it on GitHub <#100 (comment) <#100 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA https://github.com/notifications/unsubscribe-auth/AEB46IIUFIW67M2GNFLLVIDVPTEA7ANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.> Ah ok that helps a lot, which version of Svg.Net did you use? — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEB46ILXMH7DJBKO6QW7RALVPTGSRANCNFSM5O2TONSA . You are receiving this because you authored the thread.Message ID: @.>

Ok will try to fix

[AmaelN]

I'm doing more test today

Here is some samples which are working on svg.net 3.4.0 but not on Svg.skia 0.5.14

Initial SVG file content

<path id="Path_10" data-name="Path 10" d="M-852.448,736.591l-339.719,530.792h661.341" transform="translate(1610.825 -568.591)" fill="none" stroke="#ffa60e" stroke-width="10"/>

Save as svg output with no transformation

var doc = SvgDocument.Open("src_test.svg");
doc.Write("ouput.svg");

Output

<path d="M-852.448 736.591 l-339.719 530.792 h661.341" transform="translate(1610.825, -568.591)" id="Path_10" stroke-width="10" data-name="Path 10" style="fill:none;stroke:255, 166, 14;" />

To test the issue with fill white

<circle cx="5" cy="5" r="5" transform="translate(60, 795)" id="Ellipse_2#1" data-name="Ellipse 2" style="fill:White;" />
  <text transform="matrix(1, 0, 0, 1, 87, 810)" font-family="Poppins-Medium, Poppins" font-size="18px" font-weight="500">
    <tspan x="0px" y="0px" transform="" class="" style="fill:White;">Pick the style of the house and</tspan>
  </text>

Save as svg Output

<circle cx="5" cy="5" r="5" transform="translate(60, 795)" id="Ellipse_2#1" data-name="Ellipse 2" style="fill:'White';" />
<text transform="matrix(1, 0, 0, 1, 87, 810)" font-family="Poppins-Medium, Poppins" font-size="18px" font-weight="500">
<tspan x="0px" y="0px" transform="" class="" style="fill:'White';">Pick the style of the house and</tspan>
</text>

[nielsbosma]

I'm having the same issue with setting a simple fill:

sElement.Fill = new SvgColourServer( Color.FromArgb(solidPaint.Color.A, solidPaint.Color.R, solidPaint.Color.G, solidPaint.Color.B) );

Produces something like: <ellipse cx="88px" cy="52.5px" rx="88px" ry="52.5px" style="fill:249, 14, 14;" />

[andywyatte17]

I have also come across the same issue in a similar case to that reported by @nielsbosma. My case is very simple - I wrote a simple unit-tests that

1. Loads svg into an SvgDocument. <circle cx="100" cy="100" r="50" id="2" style="stroke: rgb(128,64,32);" />
2. Creates svg via SvgDocument.Write(..)
3. Checks the result as 'good' or 'bad', ie
   • Good <circle cx="100" cy="100" r="50" id="2" style="stroke: #804020;" />
   • Bad <circle cx="100" cy="100" r="50"" id="2" style="stroke:128,64,32"/> or similar.

By bisecting through the tags I have found that between tag 0.5.11 and 0.5.11.1 the result went from good to bad.

Taking this further I looked at the git submodule code for the fork from SVG-NET library - which is extracted to externals/SVG. The following commit between 0.5.11 [e42d4ff] and 0.5.11.1 [302ce0d] seems to change the behaviour for writing svg colour information:

• Commit in SVG git [be9f7dd]
• Date: 02 January 2022 15:48:31
• Remove System.Drawing.Common dependency

SvgColourConverter.cs @ be9f7dd

// externals/SVG/Source/Painting/SvgColourConverter.cs
...
using System.Drawing;
...
public override object ConvertTo(System.ComponentModel.ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
{
...
#if !NO_SDC
                var colorString = ColorTranslator.ToHtml((Color)value).Replace("LightGrey", "LightGray");
                // color names are expected to be lower case in XML
                return colorString.StartsWith("#", StringComparison.InvariantCulture) ? colorString : colorString.ToLowerInvariant();
#endif
...
}

My guess is that it might be possible to compile the code without the #if !NO_SDC ... #endif here. But I've only seen this code tonight so it might be a terrible suggestion.

Anyway hope this info might help someone investigate a possible fix.

[generalmimon]

I did some tests - the color issue only occurs with the https://www.nuget.org/packages/Svg.Custom/0.5.16 NuGet package, which is used by Svg.Skia. So if you load the following SVG via SvgDocument from Svg.Custom:

<circle cx="100" cy="100" r="50" id="2" fill="#804020" stroke="none" />

and save it back to string, you get this:

<circle cx="100" cy="100" r="50" id="2" style="fill:128, 64, 32;stroke:none;" />

where fill:128, 64, 32; is an invalid SVG.

The https://www.nuget.org/packages/Svg/3.4.3 package is unaffected, it only happens when using https://www.nuget.org/packages/Svg.Custom/0.5.16. Which explains why none of the tests in the SVG.NET project could have caught this - it doesn't occur there. And Svg.Custom doesn't have its own tests.

---

@andywyatte17 is right - the difference is that the Svg.Custom project has the NO_SDC constant set:

https://github.com/wieslawsoltes/Svg.Skia/blob/612735397887e1644d1f863dc2b6f8519481ddb2/src/Svg.Custom/Svg.Custom.csproj#L14

which causes the #if !NO_SDC ... #endif block to be skipped (SvgColourConverter.cs:196-208)

        public override object ConvertTo(System.ComponentModel.ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
        {
            if (destinationType == typeof(string))
            {
#if !NO_SDC
                var colorString = ColorTranslator.ToHtml((Color)value).Replace("LightGrey", "LightGray");
                // color names are expected to be lower case in XML
                return colorString.StartsWith("#", StringComparison.InvariantCulture) ? colorString : colorString.ToLowerInvariant();
#endif
            }


            return base.ConvertTo(context, culture, value, destinationType);
        }

So base.ConvertTo is used instead, which refers to the ConvertTo method from System.Drawing.ColorConverter (ColorConverter.cs:264):

    string sep = culture.TextInfo.ListSeparator + " ";
    TypeConverter intConverter = TypeDescriptor.GetConverter(typeof(int));
    string[] args;
    int nArg = 0;
 
    if (c.A < 255) {
        args = new string[4];
        args[nArg++] = intConverter.ConvertToString(context, culture, (object)c.A);
    }
    else {
        args = new string[3];
    }
 
    // Note: ConvertToString will raise exception if value cannot be converted.
    args[nArg++] = intConverter.ConvertToString(context, culture, (object)c.R);
    args[nArg++] = intConverter.ConvertToString(context, culture, (object)c.G);
    args[nArg++] = intConverter.ConvertToString(context, culture, (object)c.B);
 
    // Now slam all of these together with the fantastic Join 
    // method.
    //
    return string.Join(sep, args);

And this method is apparently intentionally programmed to produce 128, 64, 32 or 128, 64, 32, 127 (if the alpha component is < 255). Which is obviously incompatible with SVG syntax, though.