Wikipedia reference image
SVG or Scalable Vector Graphics are mainly concerned with vector graphic shapes. However, SVG can be used to manipulate images and apply cool effects. This guide shows you how to build SVG image processing filters to create interesting visual effects and compare resulting outputs with image refrences.
SVG filters can be used in image processing and computer vision, within edge detection algorithms
where it creates an image emphasising edges and provide an approximation of the image gradient.
See Openlayers implementation on aerial photo for fast edge detection.
We use reference images from the Wikipedia Sobel operator page to compare the magnitude of the gradient between test images and SVG filter results.
Wikipedia reference image
Wikipedia Sobel
Here, four different gradient operators are used to estimate the magnitude of the gradient of the test image from wikipedia.
Grayscale test image of brick wall and bike rack
SVG Laplacian filter
Wikipedia Sobel–Feldman operator
SVG Sobel filter
Wikipedia Roberts cross operator
SVG Roberts filter
Wikipedia Prewitt operator
SVG Prewitt filter