# Perspective SVG import handling

**URL:** <https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [September 20, 2022, 4:03pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291 "2022-09-20T16:03:57Z")\
**Posts on this page:** 1\
**Showing post:** 12

<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:** [September 23, 2022, 6:51am UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/12 "2022-09-23T06:51:05Z")

</div>

I got some svg feature i tried to use here before that didnt work... filters

> [@Perspective graphic outline color darker than fill](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/22):
>
> yeah the stroke color does not know about the fill color. Also the svg stroke is different than the html border you could create something with an opacity which would overlay on the fill. but that will require you to edit the svg as svg’s filters work different than just adding some css. in this post the soloution, you could make the red invisible and the blue a transaparent grey, which would result in a darker “inside” border. but this requires you to make some changes to the svg. you need t…

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/2812dc1d6925f3269082adec0d9c1a47759702a6.png)

```auto
<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <defs>
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
      <!--outside-stroke-->
      <feFlood flood-color="red" result="outside-color"/>
      <feMorphology in="SourceAlpha" operator="dilate" radius="2"/>
      <feComposite in="outside-color" operator="in" result="outside-stroke"/>
      <!--inside-stroke-->
      <feFlood flood-color="blue" result="inside-color"/>
      <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>
      <!--fill-area-->
      <feMorphology in="SourceAlpha" operator="erode" radius="2"/>
      <feComposite in="SourceGraphic" operator="in" result="fill-area"/>
      <!--merge graphics-->
      <feMerge>
        <feMergeNode in="outside-stroke"/>
        <feMergeNode in="inside-stroke"/>
        <feMergeNode in="fill-area"/>
      </feMerge>
    </filter>
  </defs>
  <g transform="scale(2)">
    <path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1
  l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7
  l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1
  l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z"
fill="#00ffff" filter="url(#inset)"/>
  </g>
</svg>

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291)._