Support Focal property in Radial Gradient

[hermet]

The Radial Gradient lacks the "focal" property, which is commonly utilized in vector formats. It's necessary to provide support for this property.

#1555

[mgrudzinska]

@reptofrog
regarding the example: it would be great if you provide some samples svgs that you have in mind.
I tried to reconstruct your sample:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <radialGradient id="radialGradient3f" r="50" cx="100" cy="100" 
      fr="0" fx="65" fy="65"
      gradientUnits="userSpaceOnUse">
      <stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
      <stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="50" fill="url(#radialGradient3f)"/>
</svg>

result:

but on your screen the focal point is outside the circle, right? or does inkskape prevent such cases?

the focal support is reachable, but I'm no so sure about all of the corner cases...

[mgrudzinska]

I found the answer to my previous comment - the behavior may be as I guessed if inkskape supports svg1.1, this was changed in svg2: https://www.w3.org/TR/SVG2/pservers.html#RadialGradientNotes

[reptofrog]

@mgrudzinska

Inkscape allows to place the focal point anywhere, there are no limits.

---

Here is the example file with focal point set to be outside of circle and outside of canvas: https://github.com/thorvg/thorvg/assets/36744029/1c8cf513-2ff1-46c6-b6da-c4ea88b0d7c2

Here is one with focal point set to be outside of circle but inside the canvas: https://github.com/thorvg/thorvg/assets/36744029/7aa9172c-b2ef-40fd-b717-2cb61ec37d41

And finally, an example with focal point both inside the circle and inside the canvas: https://github.com/thorvg/thorvg/assets/36744029/86af735a-979f-4b0f-bba6-9e1cccc95524

---

It probably doesn't matter if the focal point lies outside of canvas or not, I added that example just in case.

Interestingly, only the last one is displayed properly inside web browsers. (No SVG2 support yet?)

However, none of these are displayed propely inside ThorVG Viewer.

[mgrudzinska]

@reptofrog thanks for the svgs. could I also ask you to show what results do you expect?
regarding svg2 std if focal lies outside the end circle, a cone is created. It would be much easier to support the svg1.1 std and I wondered, whether you really need a full svg2 support right now.

[reptofrog]

@mgrudzinska

You can see the expected result here: #1555 (first image, a screenshot from Inkscape)

---

I reported the bug because I was developing a game with Godot Engine and I noticed that my game's icon I've made (in .svg format) doesn't look the same as it does in Inkscape. I then identified that the focal point is what's not displayed properly.

I figured out that it would be beneficial to other developers if this is fixed in ThorVG, since it's used in Godot.

But as I understand now, a focal point that lies outside the circle is actually a new feature from SVG2, is that correct? It seems that even web browsers can't display such gradients properly yet.

---

Thank you for working on this issue!

[mgrudzinska]

@reptofrog thx for clarifications.
looking at #1555, one can deduce that Inkscape supports the SVG 1.1 std.
Back then, it was standardized such that if the focal point was placed outside the end circle (cx, cy, r), it would be interpreted as being on the edge of it. This was changed in the SVG 2.0 std, and now, in such cases, some cones are drawn.
I'll try to finish asap, but still need to take care of the edges (like in svg1.1 for now)

[mgrudzinska]

I'm not sure what should happen according the SVG 2, if a part of the starting circle is outside the ending circle, like in the sample below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <defs>
        <radialGradient id="grad" r="50" cx="100" cy="100"
                        fr="26" fx="100" fy="75"
                        spreadMethod="reflect" 
                        gradientUnits="userSpaceOnUse">
            <stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
            <stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.5"/>
            <stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
        </radialGradient>
    </defs>

    <circle cx="100" cy="100" r="50" fill="url(#grad)"/>
</svg>

but I think, after #1585 is merged we can close this issue as solved and if someone has a sample svg with such a problematic case, we can open a new issue