# SVG with Gaussian blur edge and gradient doesn't show in perspective

**URL:** <https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421>\
**Category:** Ignition Early Access\
**Created:** [October 26, 2019, 1:47pm UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421 "2019-10-26T13:47:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 26, 2019, 1:47pm UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421/1 "2019-10-26T13:47:46Z")

</div>

Hi  
I create some shape in inkscape with blur edge.  
 ![blur](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a12061fc7d35f034ab326d18cad815e796fcb605.jpeg)  
when I drop it in perspective, it doesn’t show and get these two errors:  
 ![error](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/50ba597154157aa6550ca8a66eb26e09cc939be1.jpeg)  
I try to put some value in stroke width and error gone but the shape still not shown.  
The strange thing is also gradient fill effect cause same behavior and I get error and svg shape doesn’t show.

Will this ‘Gaussian blur’ effect for svg be supported in perspective?

I attach two svg file to test.  
 ![gradient](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/446bb2aa1fa3efa592a6225d8651188d9a0e166c.svg) ![Blur](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/8a4d70af773eca1051e744c32b268409e46ee5f9.svg)

---

<div class="post-metadata">

**Author:** ![joyja](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/joyja/32/9401_2.png) [@joyja](https://forum.inductiveautomation.com/u/joyja)\
**Post date:** [February 18, 2021, 6:07pm UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421/2 "2021-02-18T18:07:08Z")

</div>

I know this thread is old, but I’ve been trying to use an feGaussianBlur filter as well and I landed here. I’m sure you’ve already figured out gradients at least @nader.chinichian, but for anyone else that lands here:

When you drag in an svg and select embedded image for svgs from Inkscape or Boxy SVG it doesn’t bring in the stops appropriately. It manages to bring in the gradient type, transforms, and some location properties, but you have to add the stops manually:

How it comes in after embed:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7a51001aeddc8847987fb7278d5fed5fe6424472.png)

after adding the stops:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d0f56ad69a6c91c2d38816ddf9bdf7340bfa2570.png)

I feel like this has something to do with the fact that most svg editors (and the generally advertised way to code filter/gradients by hand) is to use `url(#idOfGradientOrFilter)`). I’m not sure if there is a better way that the svg embed tool would understand.

I haven’t figured out how to get filters to work in Ignition. When you import an object with a filter, nothing about the filter comes in, just a style attribute applied to the shape with `filter: url(#idOfFilter)` and the element is invisible. Hopefully someone at Inductive has some insight, because filters are an excellent SVG feature.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [February 18, 2021, 6:28pm UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421/3 "2021-02-18T18:28:51Z")

</div>

You totally right about gradient and I’ve done the same way as you told and it manually.  
About filter perspective doesn’t support it yet.

---

<div class="post-metadata">

**Author:** ![Maheswaran\_S](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Maheswaran\_S](https://forum.inductiveautomation.com/u/Maheswaran_S)\
**Post date:** [January 1, 2023, 10:11am UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421/4 "2023-01-01T10:11:20Z")

</div>

hi @nader.chinichian i have tried to import Gaussian blur effect which i have done in the inkspace but it is not showing but i have seen in the vedio you have done can you explain in which way you have done.  
i have linked the details also

 ![Capture1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f97b01b4b756ca11a00cf533e8df6a3e60e05c11.png)  
 ![Capture2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/33fe0b49319b7b70fb8e3bc133f1dd9eb309120e.png)  
 ![Capture3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4f47bed1d7e6e51c66d829e8176e5149f570ab94.png)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 1, 2023, 6:39pm UTC](https://forum.inductiveautomation.com/t/svg-with-gaussian-blur-edge-and-gradient-doesnt-show-in-perspective/29421/5 "2023-01-01T18:39:04Z")

</div>

Hi  
This is the correct way. You need manually change the JSON format to the following:

```auto
{
  "paint": {
    "gradientTransform1": "matrix(-1 0 0 -1 -325.1172 -320.5864)",
    "gradientUnits": "userSpaceOnUse",
    "stops": [
      {
        "offset": 0,
        "style": {
          "stopColor": "transparent"
        }
      },
      {
        "offset": 0.25,
        "style": {
          "stopColor": "#FFCB0000"
        }
      },
      {
        "offset": 1,
        "style": {
          "stopColor": "#FFAE00"
        }
      }
    ],
    "type": "linear",
    "x1": 0,
    "x2": 100,
    "y1": 0,
    "y2": -100
  }
}

```
