Search code examples
imagecanvassvgedge-detectionsvg-filters

edge detection in svg filter

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.sstatic.net/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.

Solution

  • 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>