Linear gradient svg is not rendered

[habamax]

I know there was issue resolved upstream: mogest/prawn-svg#62

But it looks like it doesn't work for a simple svg with a single linear gradient (created in inkscape):

It is rendered as:

== hello world
image::box-gradient.svg[]

Prawn gems:

*** LOCAL GEMS ***

prawn (2.2.2)
prawn-icon (2.5.0)
prawn-svg (0.30.0)
prawn-table (0.2.2)
prawn-templates (0.1.2)

ps, svg file:

box-gradient.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="51.404762mm"
   height="38.55357mm"
   viewBox="0 0 51.404762 38.55357"
   version="1.1"
   id="svg7384"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="box-gradient.svg">
  <defs
     id="defs7378">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient7935">
      <stop
         style="stop-color:#6451a0;stop-opacity:1;"
         offset="0"
         id="stop7931" />
      <stop
         style="stop-color:#6451a0;stop-opacity:0;"
         offset="1"
         id="stop7933" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7935"
       id="linearGradient7937"
       x1="46.872978"
       y1="74.703476"
       x2="96.005951"
       y2="108.0119"
       gradientUnits="userSpaceOnUse" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.979899"
     inkscape:cx="51.297932"
     inkscape:cy="74.343256"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="2560"
     inkscape:window-height="1361"
     inkscape:window-x="1911"
     inkscape:window-y="-9"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7381">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-44.601189,-69.458336)">
    <rect
       style="opacity:1;fill:url(#linearGradient7937);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
       id="rect7929"
       width="51.404762"
       height="38.55357"
       x="44.601189"
       y="69.458336" />
    <rect
       style="opacity:1;fill:#6451a0;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
       id="rect7941"
       width="12.695303"
       height="11.22532"
       x="71.194504"
       y="85.293999" />
  </g>
</svg>

[habamax]

I am not sure how to test it against prawn-svg itself, so just wanted to confirm that it has nothing to do with asciidoctor-pdf and I should create issue upstream.

[mojavelinux]

All handling of the SVG itself is delegated to prawn-svg, so yes, it's an upstream issue. However, we could start adding tests for specific SVG features like this one so that we can detect regressions.

[mojavelinux]

The problem you're facing is mentioned in the fix for the resolved issue as a limitation in prawn-svg:

unimplemented: stop-opacity on the stop tag

In your example, the stop-color is the same for both stops, but the opacity is different. So the linear gradient will appear as a solid color. If you replace the stop-opacity=0 with the color white, it will work.

I've added a test to the test suite to verify that the linear gradient works with opaque colors.

[mojavelinux]

Although the issue is closed, the lack of support for stop-opacity still remains in prawn-svg. I recommend reporting the issue upstream. Then I'll update the test accordingly.

[habamax]

In your example, the stop-color is the same for both stops, but the opacity is different. So the linear gradient will appear as a solid color. If you replace the stop-opacity=0 with the color white, it will work.

Not sure if I got you right.

I have tried to change colors to black(first stop) and white (second stop) -- the same result (no gradient, no solid color for the bigger rect)

      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0"
         id="stop7931" />
      <stop
         style="stop-color:#ffffff;stop-opacity:0;"
         offset="1"
         id="stop7933" />

then I made stop-opacity:1 for both stops -- again nothing.

Well, anyway I will just avoid using gradients in svg (it was logo of our customer with fancy gradients -- I can use png instead)

[mojavelinux]

There's a secondary problem in the SVG that you provided which I forgot to mention. When you run the current SVG, there's a warning about missing stops in the console. The gradient references another gradient with the stops. If you combine them into a single element, the gradient will work (as long as you don't use opacity). So gradients do work, but they need to be: a) defined using a single element b) cannot use stop-opacity So you just have to play with the SVG a bit.

[habamax]

So you just have to play with the SVG a bit.

Oh, thx for clarifications, will try to play with it a bit.