# Linear SVG gradient

**URL:** <https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450>\
**Category:** Photoshop\
**Created:** [March 22, 2022, 9:44pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450 "2022-03-22T21:44:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DavideBarranca](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/davidebarranca/32/1523_2.png) [@DavideBarranca](https://forums.creativeclouddeveloper.com/u/DavideBarranca)\
**Post date:** [March 22, 2022, 9:44pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/1 "2022-03-22T21:44:43Z")

</div>

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](https://stackoverflow.com/questions/37962071/react-js-use-svg-linear-gradient-not-working).

```auto
      <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 🙂

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 22, 2022, 11:01pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/2 "2022-03-22T23:01:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 23, 2022, 7:16am UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/3 "2022-03-23T07:16:17Z")

</div>

I suppose that might be why [Adobes official gradient icons](https://spectrum.adobe.com/page/icons/) are like this (`Gradient` example):

```auto
<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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![DavideBarranca](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/davidebarranca/32/1523_2.png) [@DavideBarranca](https://forums.creativeclouddeveloper.com/u/DavideBarranca)\
**Post date:** [March 23, 2022, 7:30am UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/4 "2022-03-23T07:30:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [March 23, 2022, 6:50pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/5 "2022-03-23T18:50:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DavideBarranca](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/davidebarranca/32/1523_2.png) [@DavideBarranca](https://forums.creativeclouddeveloper.com/u/DavideBarranca)\
**Post date:** [March 23, 2022, 7:34pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/6 "2022-03-23T19:34:33Z")

</div>

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](https://codepen.io/JosephusPaye/pen/vbaxBa) to transform it into a div background.  
Besides my limited use case, a bunch of the Canvas’ orphans (😉) 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.

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [March 23, 2022, 9:30pm UTC](https://forums.creativeclouddeveloper.com/t/linear-svg-gradient/4450/7 "2022-03-23T21:30:03Z")

</div>

To have a good sense of what UXP SVG is supported – if the [GhostScript tiger](https://commons.wikimedia.org/wiki/File:Ghostscript_tiger_(original_background).svg) uses it, it should work. UXP renders this just fine.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/5/5cfaf7f99e3d41cd9bc0de0385e52e3b993ea5a6.jpeg)

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.