edge detection in svg filter

Question

I am trying to find the edge points of the image by using the SVG filter.The problem is not getting succeed with this.Below is the code that what I have tried.

<svg width="100%" height="495">
 <defs>
   <filter id="blobby" color-interpolation-filters="sRGB">
   <feColorMatrix type="saturate" values="0"/>
    <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
      <feMorphology operator="erode" radius="0"/>
      <feGaussianBlur stdDeviation="10"/>
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
<g filter="url(#blobby)">
 <image xlink:href="https://i.stack.imgur.com/dreFV.jpg" />
</g>
</svg>

If I put the image tag outside svg it works.But this way I could not save the svg when it has the html.And also i don't want this format.I am looking to have the above svg format.

img {
  width: 400px;
  
}

.blob {
  background-color: white;
  padding: 40px;
  filter: url(#blobby);
}

/* Hide the SVG element */
svg {
  width: 0px;
  height: 0px;
  position: absolute;
  left: -999px;
}

<svg>
  <defs>
    <filter id="blobby" color-interpolation-filters="sRGB">
      <!-- Convert to greyscale -->
      <feColorMatrix type="saturate" values="0"/>
      <!-- Threshhold to black or white -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
      <!-- Morphology filter to "erode" (shrink) the white areas -->
      <feMorphology operator="erode" radius="8"/>
      <!-- Blur to cause image to "spread" -->
      <feGaussianBlur stdDeviation="10"/>
      <!-- High contrast to threshhold again -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <g>
    <img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
    <br>
    <div class="blob">
      <img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
    </div>
  </g>
</svg>

The expected output is:

Thanks in advance.

score 2 · Accepted Answer · answered Oct 25 '17 at 02:40

We can get your desired final result using a few more filter elements.

img {
  width: 400px;
  
}

.blob {
  background-color: white;
  padding: 40px;
  filter: url(#blobby);
}

/* Hide the SVG element */
svg {
  width: 0px;
  height: 0px;
  position: absolute;
  left: -999px;
}

<svg>
  <defs>
    <filter id="blobby" color-interpolation-filters="sRGB">
      <!-- Convert to greyscale -->
      <feColorMatrix type="saturate" values="0"/>
      <!-- Threshhold to black or white -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
      <!-- Morphology filter to "erode" (shrink) the white areas -->
      <feMorphology operator="erode" radius="8"/>
      <!-- Blur to cause image to "spread" -->
      <feGaussianBlur stdDeviation="10"/>
      <!-- High contrast to threshhold again -->
      <!-- But this time we switch black and white as we -->
      <!-- will use this as an alpha mask in the next steps -->
      <!-- We only need one channel here -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="1 1 1 1 1 0"/>
      </feComponentTransfer>
      <!-- Convert the the red channel of this to an alpha channel -->
      <!-- The result is a black shape with an alpha mask of the right shape -->
      <feColorMatrix type="matrix" result="alpha-mask" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0 1 0 0 0 0"/>
      <!-- Create a blank white rectangle -->
      <feFlood flood-color="white" result="white-flood"/>
      <!-- Layer 1: Mask the blank white fill with the alpha mask we created earlier -->
      <feComposite in="white-flood" in2="alpha-mask" operator="in" result="masked-white"/>
      <!-- Layer 2: Grow the black shape to create our black outline "stroke" -->
      <feMorphology in="alpha-mask" operator="dilate" radius="1" result="black-stroke"/>
      <!-- Layer 3: Create a shadow to go at the back -->
      <feGaussianBlur in="alpha-mask" stdDeviation="10"/>
      <feOffset dx="5" dy="5" result="offset-blur"/>
      <feFlood flood-color="#000" flood-opacity="0.6"/>  <!-- Lighten the shadow a little -->
      <feComposite in2="offset-blur" operator="in" result="shadow"/>
      <!-- Merge the three layers together -->
      <feMerge>
        <feMergeNode in="shadow"/>
        <feMergeNode in="black-stroke"/>
        <feMergeNode in="masked-white"/>
      </feMerge>
    </filter>
  </defs>
  <g>
    <img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
    <br>
    <div class="blob">
      <img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
    </div>
  </g>
</svg>

Thanks Paul..but div should not be there in inside svg know.Is that possible to get the same result by using the svg image tag? — lalithkumar, Oct 25 '17 at 03:26
when i save this as svg it should show the expected result..but see this error [svg error](https://i.stack.imgur.com/aBRpM.png) — lalithkumar, Oct 25 '17 at 04:24
When using a filter like this, you'll probably need to inline it in your page. I'm not sure how reliably browsers handle filters inexternal documents. If you want to try it anyway, you'll need to add an [XML declaration](https://stackoverflow.com/questions/38169475/svg-in-html5-when-is-xml-declaration-xml-version-1-0-encoding-utf-8) to the file in order to make it a valid SVG document. — Paul LeBeau, Oct 25 '17 at 10:36
There is no version 2.1 of SVG. Try 1.1. And by XML declaration I was referring to the line: ``, which is required for all XML files. For more information, see the link I posted. — Paul LeBeau, Oct 25 '17 at 11:19
sorry i have tried with 1.1 only..then i just changed and tested..and also i added `` this already as you referred..no chnages — lalithkumar, Oct 25 '17 at 11:29
this is my [fiddle](https://jsfiddle.net/lalithcse/y0k19f5k/)..it works here ..but when i saved as svg it doesn't work.. — lalithkumar, Oct 25 '17 at 11:32
`
` is not a valid SVG element. Neither is ``. The SVG equivalent of `` is the `` element. — Paul LeBeau, Oct 25 '17 at 20:19
Ya if I change img to image tag the filter is not working..can you please update the answer with image tag — lalithkumar, Oct 26 '17 at 02:08
S.O. is not a code writing service. I think it is time for you to do some of the work yourself. Do some research into how the `` element works. — Paul LeBeau, Oct 26 '17 at 03:33
I am new to this actually..I was trying last two days but not getting the expected output with the image tag..And also in the question itself I told that I want with image tag. that's what I asked help..if you share me any link to refer will be appreciated and that will help a lot to me.. thanks — lalithkumar, Oct 26 '17 at 03:45

edge detection in svg filter

1 Answers1

Linked