Linear SVG gradient

Photoshop
1

Hi,
I’m trying to render a linear SVG gradient but it turns out solid black.
It’s in a React project, so I’ve massaged the SVG code exported directly from Adobe XD to comply to these recommendations.

      <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
        width="228" height="2" viewBox="0 0 228 2">
        <defs>
          <linearGradient id="linear-gradient" x1="0.021" x2="1" gradientUnits="objectBoundingBox">
            <stop offset="0%" stopColor="#7d4e0f" />
            <stop offset="65%" stopColor="#cc740d" />
            <stop offset="78%" stopColor="#faa723" />
            <stop offset="89%" stopColor="#d38122" />
            <stop offset="100%" stopColor="#d16210" />
          </linearGradient>
        </defs>
        <rect id="Rectangle_1002" data-name="Rectangle 1002" width="228" height="2" fill="url(#linear-gradient)" />
      </svg>

Still no luck. Is there anything obvious I’m missing here?
Thank you!

Davide

PS—I can always use a div with CSS background, I’m just curious about the SVG thing :slight_smile:

2

Not working for me either, looks like it’s not supported.

3

I suppose that might be why Adobes official gradient icons are like this (Gradient example):

<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
  <defs>
    <style>
      .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n {fill: #6E6E6E;}
      .a { opacity: 0.9; }
      .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m { isolation: isolate; }
      .b { opacity: 0.8;  }
      .c { opacity: 0.7; }
      .d { opacity: 0.6; }
      .e { opacity: 0.5;}
      .f {opacity: 0.4; }
      .g { opacity: 0.25; }
      .h { opacity: 0.3;}
      .i {opacity: 0.35;}
      .j { opacity: 0.2; }
      .k { opacity: 0.15; }
      .l { opacity: 0.1; }
      .m { opacity: 0.05;}
    </style>
  </defs>
  <title>S Gradient 18 N</title>
  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><rect class="a" height="12" width="1" x="2" y="3" />
  <rect class="b" height="12" width="1" x="3" y="3" />
  <rect class="c" height="12" width="1" x="4" y="3" />
  <rect class="d" height="12" width="1" x="5" y="3" />
  <rect class="e" height="12" width="1" x="6" y="3" />
  <rect class="f" height="12" width="1" x="7" y="3" />
  <rect class="g" height="12" width="1" x="10" y="3" />
  <rect class="h" height="12" width="1" x="9" y="3" />
  <rect class="i" height="12" width="1" x="8" y="3" />
  <rect class="j" height="12" width="1" x="11" y="3" />
  <rect class="k" height="12" width="1" x="12" y="3" />
  <rect class="l" height="12" width="1" x="13" y="3" />
  <rect class="m" height="12" width="1" x="14" y="3" />
  <path class="n" d="M1,2.5v13a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H1.5A.5.5,0,0,0,1,2.5ZM16,15H2V3H16Z" />
</svg>

Or Radial gradient icon:

<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
  <defs>
    <style>
      .a, .b, .c, .d, .e, .f, .g, .h, .i {fill: #6E6E6E;}
      .a {opacity: 0.07;}
      .a, .b, .c, .d, .e, .f, .g, .h {isolation: isolate;}
      .b {opacity: 0.18;}
      .c {opacity: 0.28;}
      .d {opacity: 0.38; }
      .e { opacity: 0.5;}
      .f {  opacity: 0.6; }
      .g {  opacity: 0.75; }
      .h {opacity: 0.9; }
    </style>
  </defs>
  <title>S RadialGradient 18 N</title>
  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M9,6.178A2.822,2.822,0,1,0,11.822,9,2.822,2.822,0,0,0,9,6.178Z" />
  <path class="b" d="M9,5.3345A3.6655,3.6655,0,1,0,12.6655,9,3.6655,3.6655,0,0,0,9,5.3345ZM9,11.822A2.822,2.822,0,1,1,11.822,9,2.822,2.822,0,0,1,9,11.822Z" />
  <path class="c" d="M9,4.4545A4.5455,4.5455,0,1,0,13.5455,9,4.5455,4.5455,0,0,0,9,4.4545Zm0,8.211A3.6655,3.6655,0,1,1,12.6655,9,3.6655,3.6655,0,0,1,9,12.6655Z" />
  <path class="d" d="M9,3.5455A5.4545,5.4545,0,1,0,14.4545,9,5.4545,5.4545,0,0,0,9,3.5455Zm0,10A4.5455,4.5455,0,1,1,13.5455,9,4.5455,4.5455,0,0,1,9,13.5455Z" />
  <path class="e" d="M9,2.6365A6.3635,6.3635,0,1,0,15.3635,9,6.36351,6.36351,0,0,0,9,2.6365Zm0,11.818A5.4545,5.4545,0,1,1,14.4545,9,5.4545,5.4545,0,0,1,9,14.4545Z" />
  <path class="f" d="M7.05,16h3.9A7.2755,7.2755,0,0,0,16,10.95V7.05A7.2755,7.2755,0,0,0,10.95,2H7.05A7.2755,7.2755,0,0,0,2,7.05v3.9A7.2755,7.2755,0,0,0,7.05,16ZM9,2.6365A6.3635,6.3635,0,1,1,2.6365,9,6.36351,6.36351,0,0,1,9,2.6365Z" />
  <path class="g" d="M7.05,2H4.78A8.20648,8.20648,0,0,0,2,4.78V7.05A7.2755,7.2755,0,0,1,7.05,2Z" />
  <path class="g" d="M10.95,16h2.268A8.2,8.2,0,0,0,16,13.2195V10.95A7.2755,7.2755,0,0,1,10.95,16Z" />
  <path class="g" d="M2,10.95v2.2675A8.19992,8.19992,0,0,0,4.7805,16H7.05A7.2755,7.2755,0,0,1,2,10.95Z" />
  <path class="g" d="M16,7.05V4.78A8.20648,8.20648,0,0,0,13.22,2H10.95A7.2755,7.2755,0,0,1,16,7.05Z" />
  <path class="h" d="M13.2195,16H14.8A9.08654,9.08654,0,0,0,16,14.8V13.2195A8.2,8.2,0,0,1,13.2195,16Z" />
  <path class="h" d="M4.78,2H3.2A9.08654,9.08654,0,0,0,2,3.2V4.78A8.20648,8.20648,0,0,1,4.78,2Z" />
  <path class="h" d="M2,13.2195V14.8A9.08654,9.08654,0,0,0,3.2,16H4.7805A8.2,8.2,0,0,1,2,13.2195Z" />
  <path class="h" d="M16,4.78V3.2A9.08654,9.08654,0,0,0,14.8,2H13.22A8.20648,8.20648,0,0,1,16,4.78Z" />
  <path class="i" d="M16.5,1H1.5a.5.5,0,0,0-.5.5v15a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1ZM16,14.8A9.08654,9.08654,0,0,1,14.8,16H3.2A9.08654,9.08654,0,0,1,2,14.8V3.2A9.08654,9.08654,0,0,1,3.2,2H14.8A9.08654,9.08654,0,0,1,16,3.2Z" />
</svg>
1 Like
4

Thanks @Karmalakas, good catch. So these don’t really look like gradients but discreet bits defined via classes…
@kerrishotts, is a more standard SVG support in the roadmap? I used to recommend it (it == SVG) to devs as a workaround for the Canvas.
Thanks!

Davide

5

Gradients themselves are not supported in UXP’s SVG renderer at this point. @pkrishna Can you take this as a feature request and put it on the backlog?

I’ll also add here that <defs> like you’re using here is not supported in UXP SVGs in order to save you some pain up front.

Davide, would be good to know what kinds of things you’re drawing so to better contextualize how you’re using gradients. If you’re using React to generate the component, though, you could also look at programatically generating lots of little <rect>s to simulate a gradient, or a hybrid element – some SVG, some HTML where the gradient can be applied to a DIV or similar.

6

Hi Kerri,
thanks for the info! I’m currently numbing my fingers with a lot of copy&“paste as SVG” from a plugin design I’ve received in Adobe XD format. Most of the times it’s just flat icons, with the occasional decorative gradient as a separator—nothing fancy, I’ve used this one to transform it into a div background.
Besides my limited use case, a bunch of the Canvas’ orphans (:wink:) were doing colour-picker kind of UIs in CEP; knowing the amazing SVG Bézier curve experiment you’ve posted a while ago, I assumed (and might have suggested to someone) that SVG could be used as a replacement in that context—that one would be a cooler use case for gradients, much more than my simple dividers.

7

To have a good sense of what UXP SVG is supported – if the GhostScript tiger uses it, it should work. UXP renders this just fine.

image
image2016×1690 407 KB

But if you look inside, any gradients are just “faked” – so just looking at an SVG can be deceptive visually as to what UXP can do, because if you squint at the image and don’t pay attention, it can sure look like there are gradients in there.

1 Like