# Image management does not support SVG mesh gradients?

**URL:** <https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 29, 2022, 7:41pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578 "2022-08-29T19:41:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rpulsifer](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rpulsifer](https://forum.inductiveautomation.com/u/rpulsifer)\
**Post date:** [August 29, 2022, 7:41pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/1 "2022-08-29T19:41:14Z")

</div>

I’m the first to admit I don’t know much about SVG… All I wanted was a pretty gradient to use as a background. Since I was in Perspective, I figured i should learn to draw some SVG’s. So I downloaded Inkscape, installed with all the defaults and drew a rectangle, clicked Object, Fill and Stroke, and chose one the gradients and saved it as rect.svg.  
Dragged it into the Image Management tool and got a little icon with a red X in it.  
Went back to inkscape and File, New and made a circle, chose a linear gradient red to blue. Dragged that over and Voila! it showed up and and I was able to assign it to a image component.  
Edited rect.svg and noted that I had picked a mesh gradient, so I changed it to linear and now it works too.  
What’s my question?? I like the mesh - it looks cool… can it be made to work? Am I doing something wrong? (I’m not doing much, so maybe I need to do something different?)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [August 29, 2022, 10:31pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/2 "2022-08-29T22:31:43Z")

</div>

If you just want a gradient, see this (while this is for a button the idea is still the same),

> [@Gradient background on buttons](https://forum.inductiveautomation.com/t/gradient-background-on-buttons/29106/2):
>
> That might depend on whether you’re using the Vision or Perspective module. Are you using Vision or are you using Perspective? I want to say that gradients are not a possibility in Vision (but if someone wants to correct me, feel free). Perspective gradients are easy: Set Button.props.style.backgroundImage to linear-gradient(to right, yellow , green). [15%20PM] To do a left-to-right gradient. For a more diagonal gradient, use something like linear-gradient(to bottom right, red , blue). [3…

Example view with gradient background:

```auto
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "background-image": "linear-gradient(red, yellow)"
      }
    },
    "type": "ia.container.coord"
  }
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 30, 2022, 6:24am UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/3 "2022-08-30T06:24:25Z")

</div>

i remeber someone else had a problem because the gradient wasnt constructed good.  
perspective has gradients, can you post the json of you svg after importing it to ignition?

---

<div class="post-metadata">

**Author:** ![rpulsifer](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rpulsifer](https://forum.inductiveautomation.com/u/rpulsifer)\
**Post date:** [August 30, 2022, 3:23pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/4 "2022-08-30T15:23:21Z")

</div>

If I knew where Ignition kept them, I could - but I don’t. The original is:  
 ![rectmesh](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/407bcdaa806dbe6d53e25bc50b71e90047b9bdb5.svg)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 30, 2022, 5:30pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/5 "2022-08-30T17:30:44Z")

</div>

> [@rpulsifer](#):
>
> The original is:

Interesting. That SVG doesn't display in my FireFox. Just a big blank space.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 30, 2022, 5:32pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/6 "2022-08-30T17:32:31Z")

</div>

> [@pturmel](#):
>
> That SVG doesn’t display in my FireFox.

Same in Chrome

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [August 30, 2022, 5:32pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/7 "2022-08-30T17:32:37Z")

</div>

Blank in my chrome as well

---

<div class="post-metadata">

**Author:** ![rpulsifer](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rpulsifer](https://forum.inductiveautomation.com/u/rpulsifer)\
**Post date:** [August 30, 2022, 5:52pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/8 "2022-08-30T17:52:12Z")

</div>

Huh… I hit the upload button and selected the file… it shows as  
"! rectmesh|353x500](upload://9crNWQYdyvvqs1ypsdw1GEMlBUV.svg)

on my reply box (I added a space after the exclamation point for display purposes)  
then it says: uploading… then that message goes away and I posted it.

Any road, I wouldn’t lose any sleep over it, I’d hoped there was a simple answer like, “Nope you can’t use mesh gradients - get over it” but thanks anyways folks!

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 30, 2022, 6:19pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/9 "2022-08-30T18:19:30Z")

</div>

The image is there, it just doesn’t render.

Here is the actual markup for it.

```xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     width="210mm"
     height="297mm"
     viewBox="0 0 210 297"
     version="1.1"
     id="svg11496"
     inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
     sodipodi:docname="rectmesh.svg">
  
  <defs id="defs11493">
    
  </defs>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
    <rect style="fill:url(#meshgradient17780);stroke-width:0.264583;fill-opacity:1" id="rect11980" width="84.239998" height="102.06" x="56.699997" y="98.279999"/>
  </g>
  
</svg>

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 31, 2022, 6:33am UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/10 "2022-08-31T06:33:25Z")

</div>

> [@lrose](#):
>
> `#meshgradient17780`

This id does not exist (in the svg defs), so no wonder its empty.  
Also you should use px and not mm

> [@lrose](#):
>
> ```auto
> width="210mm"
> height="297mm"
> 
> ```

---

<div class="post-metadata">

**Author:** ![rpulsifer](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rpulsifer](https://forum.inductiveautomation.com/u/rpulsifer)\
**Post date:** [August 31, 2022, 12:12pm UTC](https://forum.inductiveautomation.com/t/image-management-does-not-support-svg-mesh-gradients/63578/11 "2022-08-31T12:12:56Z")

</div>

Well, don’t look at me… As I mentioned, I installed inkscape with all defaults. Opened it, on the blank page that came up I drew a rectangle, clicked Fill and Stroke and added a mesh gradient as fill, then saved it.  
I guess that shows that some tweaks are necessary from the default installation?