Image management does not support SVG mesh gradients?

Ignition
1

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?)

2

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

Example view with gradient background:

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

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?

4

If I knew where Ignition kept them, I could - but I don’t. The original is:
rectmesh

5

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

6

Same in Chrome

1 Like
7

Blank in my chrome as well

8

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!

9

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

Here is the actual markup for it.

<?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>
10

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

11

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?