Is This SVG Code Correct?

Question

Related to my other question, I need to convert my SVG to a 16-bit TIFF, which seems to be more complicated than expected. So I wanted to check Photoshop and Gimp, but they both (along with Figma) don't render my SVG correctly, so I wonder if anything is wrong with my code (here a simple example file, the original is basically the same just with a lot more rectangles):

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
  <defs>
    <linearGradient id="g">
      <stop offset="0%" stop-color="#0f0"></stop>
      <stop offset="50%" stop-color="#000"></stop>
      <stop offset="100%" stop-color="#0f0"></stop>
    </linearGradient>
    <linearGradient id="b" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#00f"></stop>
      <stop offset="50%" stop-color="#000"></stop>
      <stop offset="100%" stop-color="#00f"></stop>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="1000" height="1000" fill="#fff"></rect>
  <g>
    <rect x="100" y="100" width="300" height="300" fill="url(#g)"></rect>
    <rect x="600" y="600" width="300" height="300"  fill="url(#g)"></rect>
  </g>
  <g style="mix-blend-mode:screen">
    <rect x="100" y="100" width="300" height="300" fill="url(#b)"></rect>
    <rect x="600" y="600" width="300" height="300"  fill="url(#b)"></rect>
  </g>
</svg>

This is what it should look like (converted to PNG by CloudConvert): In Photoshop and Gimp, only the blue layer renders, so it seems like the blend mode is ignored? In Figma (not that important for my case, but still) there seems to be a different problem with the gradient coordinates. But the browser displays it correctly, also CloudConvert seems to be fine with it.

So is this a problem with my code and the browser is just very forgiving, or are the SVG modules of Photoshop and Gimp broken?

Maybe the style needs to be applied to the individual <rects>s? But MDN says

Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children.

so it should be fine?

Answer 1

Not sure what's up there, but your SVG fails to render properly in Illustrator, Inkscape, GIMP and Photoshop.

I messed around with it a little in Inkscape, ungrouping and rearranging a bit.

Try this one

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="1000"
   height="1000"
   viewBox="0 0 1000 1000"
   version="1.1"
   id="svg2281"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2265">
    <linearGradient
       id="g">
      <stop
         offset="0%"
         stop-color="#0f0"
         id="stop2251" />
      <stop
         offset="50%"
         stop-color="#000"
         id="stop2253" />
      <stop
         offset="100%"
         stop-color="#0f0"
         id="stop2255" />
    </linearGradient>
    <linearGradient
       id="b"
       gradientTransform="rotate(90)">
      <stop
         offset="0%"
         stop-color="#00f"
         id="stop2258" />
      <stop
         offset="50%"
         stop-color="#000"
         id="stop2260" />
      <stop
         offset="100%"
         stop-color="#00f"
         id="stop2262" />
    </linearGradient>
    <linearGradient
       xlink:href="#g"
       id="linearGradient2285"
       x1="100"
       y1="100"
       x2="400"
       y2="100"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       xlink:href="#g"
       id="linearGradient2287"
       x1="600"
       y1="600"
       x2="900"
       y2="600"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       xlink:href="#b"
       id="linearGradient2291"
       x1="100"
       y1="100"
       x2="400"
       y2="100"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(1.8675781e-5,-500)" />
    <linearGradient
       xlink:href="#b"
       id="linearGradient2293"
       x1="600"
       y1="600"
       x2="900"
       y2="600"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(0,-1500)" />
  </defs>
  <rect
     style="fill:#ffffff;fill-opacity:1;stroke-width:5.29134;paint-order:markers fill stroke;stop-color:#000000"
     id="rect2911"
     width="1000"
     height="1000"
     x="0"
     y="0" />
  <rect
     x="100"
     y="100"
     width="300"
     height="300"
     fill="url(#g)"
     id="rect2269"
     style="fill:url(#linearGradient2285)" />
  <rect
     x="600"
     y="600"
     width="300"
     height="300"
     fill="url(#g)"
     id="rect2271"
     style="fill:url(#linearGradient2287)" />
  <rect
     x="600"
     y="-900"
     width="300"
     height="300"
     fill="url(#b)"
     id="rect2277"
     style="mix-blend-mode:screen;fill:url(#linearGradient2293)"
     transform="rotate(90)" />
  <rect
     x="100"
     y="-400"
     width="300"
     height="300"
     fill="url(#b)"
     id="rect2275"
     style="mix-blend-mode:screen;fill:url(#linearGradient2291)"
     transform="rotate(90)" />
</svg>

Tested in Illustrator (failed, doesn't seem to see the blending modes), Inkscape (works), GIMP (works) and Photoshop (failed, same problem as Illustrator), and Firefox (works) and Chrome (works)

Blending modes can be problematic in SVG rendering, to be honest I tend to avoid using them at all. Excessive grouping can also be an issue. I suspect a combination of these is responsible for the issue. Adobe doesn't really keep up with SVG standards, but you might be able to use Illustrator to rearrange it and get something to work with Adobe software.

Answer 2

To add to your list: renders as you expect in Inkscape (v0.92) and Firefox. Renders as a Blue-Black-Blue vertical gradient in Gimp and Gwenview.

ImageMagick converts it without problem to TIFF or PNG:

convert gradient.svg gradient.tif