SvgGradientStop StopColor and fill color #134

AmaelN · 2022-02-19T14:49:09Z

AmaelN
Feb 19, 2022

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 · 2022-06-17T16:25:59Z

AmaelN
Jun 17, 2022
Author

Hi,

Hope that you doing fine,

Could you have a look at this issue please

0 replies

wieslawsoltes · 2022-06-17T19:05:41Z

wieslawsoltes
Jun 17, 2022
Maintainer

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.

0 replies

AmaelN · 2022-06-17T19:16:36Z

AmaelN
Jun 17, 2022
Author

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"> <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. — 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: ***@***.***>

0 replies

wieslawsoltes · 2022-06-17T19:27:24Z

wieslawsoltes
Jun 17, 2022
Maintainer

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 <#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?

0 replies

AmaelN · 2022-06-17T19:39:32Z

AmaelN
Jun 17, 2022
Author

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: ***@***.***>

0 replies

wieslawsoltes · 2022-06-17T20:37:21Z

wieslawsoltes
Jun 17, 2022
Maintainer

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

0 replies

AmaelN · 2022-06-18T12:11:40Z

AmaelN
Jun 18, 2022
Author

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>

0 replies

nielsbosma · 2022-07-31T18:25:45Z

nielsbosma
Jul 31, 2022

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;" />

0 replies

andywyatte17 · 2022-08-21T21:36:22Z

andywyatte17
Aug 21, 2022

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

Loads svg into an SvgDocument.
<circle cx="100" cy="100" r="50" id="2" style="stroke: rgb(128,64,32);" />
Creates svg via SvgDocument.Write(..)
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.

0 replies

generalmimon · 2022-10-23T13:56:58Z

generalmimon
Oct 23, 2022

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:

Svg.Skia/src/Svg.Custom/Svg.Custom.csproj

Line 14 in 6127353

<DefineConstants>$(DefineConstants);NO_SDC</DefineConstants>

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.

1 reply

generalmimon Mar 20, 2023

I've just found an SVG.NET issue also reporting that the SvgColourConverter.ConvertTo method doesn't work when the library is compiled with NO_SDC: svg-net/SVG#962

It has been closed by @mrbean-bremen, a developer of svg-net/SVG (see svg-net/SVG#962 (comment)):

Closing, this is not a bug. NO_SDC is undocumented and not ready to be used.

@wieslawsoltes Is this bug still on your radar?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SvgGradientStop StopColor and fill color #134

{{title}}

Replies: 10 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

SvgGradientStop StopColor and fill color #134

AmaelN Feb 19, 2022

Replies: 10 comments · 1 reply

AmaelN Jun 17, 2022 Author

wieslawsoltes Jun 17, 2022 Maintainer

AmaelN Jun 17, 2022 Author

wieslawsoltes Jun 17, 2022 Maintainer

AmaelN Jun 17, 2022 Author

wieslawsoltes Jun 17, 2022 Maintainer

AmaelN Jun 18, 2022 Author

nielsbosma Jul 31, 2022

andywyatte17 Aug 21, 2022

generalmimon Oct 23, 2022

generalmimon Mar 20, 2023

AmaelN
Feb 19, 2022

Replies: 10 comments 1 reply

AmaelN
Jun 17, 2022
Author

wieslawsoltes
Jun 17, 2022
Maintainer

AmaelN
Jun 17, 2022
Author

wieslawsoltes
Jun 17, 2022
Maintainer

AmaelN
Jun 17, 2022
Author

wieslawsoltes
Jun 17, 2022
Maintainer

AmaelN
Jun 18, 2022
Author

nielsbosma
Jul 31, 2022

andywyatte17
Aug 21, 2022

generalmimon
Oct 23, 2022