Can One Pixelate Images with an Svg Filter

Can one pixelate images with an SVG filter?

You can pixelate images if you have the right "magic" displacementMap. Feel free to use the one referenced below (courtesy of Zoltan Fegyver).

Update: Changed the sample code to inline the displacementmap image as a data: URI (thanks for the code IllidanS4.)

The original answer had the displacementMap image hosted on a different domain. This used to work - but browsers implemented the new Filters security measures that disallow this. For production code today, you need the displacement map image served from the same domain as the source graphic's file or you need to inline the displacementMap.

Update 2:
You may have to tweak the size of feImage and feGaussianBlur to avoid bugs in feTile that adds artifacts. For example - this seems to work better:

<feGaussianBlur stdDeviation="8" in="SourceGraphic" result="smoothed" />
 <feImage width="15.4" height="15.4" 

<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600" color-interpolation-filters="sRGB">
  <defs>
<filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
  <!--Thanks to Zoltan Fegyver for figuring out pixelation and producing the awesome pixelation map. -->
  <feGaussianBlur stdDeviation="2" in="SourceGraphic" result="smoothed" />
  <feImage width="15" height="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC" result="displacement-map" />
  <feTile in="displacement-map" result="pixelate-map" />
  <feDisplacementMap in="smoothed" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="50" result="pre-final"/>
  <feComposite operator="in" in2="SourceGraphic"/>
</filter>
  </defs>

  <image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>

SVG element pixelated on retina only if filters applied

This is crispy even on Chrome/Windows. And the issue is that the values you're using for your feColorMatrix are too large. It's nuking the anti-aliasing completely. Try:

<feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 -4" />

Which gives a more reasonable result. If you don't like that result, you could try a more detailed manipulation of opacity using feComponentTransfer instead of the feColorMatrix.

<feComponentTransfer>
 <feFuncA type="table" tableValues = "0 0 0 0 0.5 1 1 1 1 1 1 1 1 1 1 1"/>
</feComponentTransfer>

Why is this svg not affected by a filter?

@Shahar had this right; it's to do with how the svg is put together. Without a fill attribute on the path, it's not possible to use color filters on the image. The raw svg has been added below, with one of the paths having color, the other not.

The filter is applied to the part of the image with the fill attribute only.

.btn-icon {  border: 1px solid black;  height: 40px;  width: 40px;  padding: 0px;  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");  background-size: cover;}
.blur {  filter: blur(3px)}
.color {  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); }  #testSvg {  width: 40px;   filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);  }

<button class="btn-icon blur"></button><button class="btn-icon color"></button>

<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg id="testSvg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 511.874 511.874" style="enable-background:new 0 0 511.874 511.874;" xml:space="preserve"><g> <g>  <g>   <path fill="red" d="M490.114,12.813H132.568c-12.012,0.014-21.746,9.748-21.76,21.76v98.62l-16.35-24.525    c-7.484-11.289-22.535-14.676-34.133-7.68l-33.638,20.224c-11.016,6.464-19.097,16.946-22.545,29.244    c-12.271,44.681-3.166,121.66,109.824,234.667C203.821,474.885,270.816,499.06,316.99,499.06    c10.69,0.049,21.339-1.34,31.659-4.13c12.293-3.448,22.775-11.518,29.252-22.519l20.198-33.673    c6.968-11.589,3.584-26.609-7.68-34.091l-80.546-53.692c-11.049-7.308-25.859-4.905-34.031,5.521l-23.45,30.148    c-2.451,3.226-6.897,4.166-10.445,2.21l-4.463-2.458c-14.686-8.004-32.964-17.971-69.879-54.886    c-3.994-3.994-7.612-7.731-11.008-11.307h333.517c11.982,0.009,21.713-9.676,21.76-21.658V34.573    C511.86,22.561,502.126,12.827,490.114,12.813z M229.318,401.362l4.335,2.381c10.897,6.093,24.614,3.266,32.213-6.639    l23.45-30.148c2.666-3.396,7.49-4.179,11.093-1.801l80.546,53.692c3.659,2.439,4.759,7.321,2.5,11.093l-20.198,33.673    c-4.218,7.233-11.071,12.553-19.123,14.848c-40.337,11.093-110.933,1.707-218.078-105.446S9.56,195.273,20.627,154.97    c2.293-8.051,7.61-14.903,14.839-19.123l33.673-20.207c3.773-2.254,8.652-1.155,11.093,2.5l53.717,80.546    c2.382,3.602,1.599,8.43-1.801,11.093l-30.157,23.458c-9.903,7.597-12.731,21.311-6.639,32.205l2.389,4.335    c8.533,15.65,19.14,35.123,57.805,73.779C194.212,382.213,213.677,392.828,229.318,401.362z M494.808,298.526    c-0.028,2.567-2.127,4.627-4.693,4.608H141.203c-11.083-12.674-20.64-26.604-28.476-41.506l-2.458-4.48    c-1.96-3.54-1.022-7.982,2.202-10.428l30.157-23.458c10.43-8.17,12.833-22.982,5.521-34.031l-20.275-30.43V34.573    c-0.014-1.249,0.476-2.451,1.359-3.334c0.883-0.883,2.085-1.373,3.334-1.359h357.547c1.249-0.014,2.451,0.476,3.334,1.359    c0.883,0.883,1.373,2.085,1.359,3.334V298.526z"/>   <path d="M460.725,52.323l-142.618,108.16c-4.035,2.932-9.499,2.932-13.534,0L162.008,52.323    c-3.756-2.849-9.111-2.113-11.959,1.643c-2.849,3.756-2.113,9.111,1.643,11.959l142.583,108.151    c10.144,7.494,23.989,7.494,34.133,0L471.034,65.925c1.805-1.368,2.992-3.398,3.299-5.642c0.307-2.244-0.29-4.518-1.661-6.321    C469.824,50.213,464.478,49.48,460.725,52.323z"/>   <path d="M238.517,174.793l-87.415,93.611c-3.214,3.447-3.025,8.848,0.422,12.062c3.447,3.214,8.848,3.025,12.062-0.422    l87.416-93.653c2.888-3.484,2.553-8.617-0.762-11.698C246.924,171.612,241.78,171.656,238.517,174.793z"/>   <path d="M384.728,174.793c-3.214-3.447-8.614-3.637-12.062-0.422c-3.447,3.214-3.637,8.614-0.422,12.062l87.39,93.611    c3.214,3.447,8.614,3.637,12.062,0.422c3.447-3.214,3.637-8.614,0.422-12.062L384.728,174.793z"/>  </g> </g></g></svg>

How to achieve a Progressive Blur using SVG by combining a filter with a mask?

While it's possible to do this entirely in a filter without using double images, the solution can be buggy because of how both Firefox and Chrome handle ops on low opacities. So this is an alternative & straightforward way to do it using doubled images. Note that you have to clip the image edges for a clean image because feGaussianBlur creates edge fades.

<svg width="800px" height="600px">
  <defs>
    <linearGradient id="progFade" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="black"/>
      <stop offset="60%" stop-color="white"/>      
    </linearGradient>
    
    <mask id="progFadeMask" >
        <rect x="0%" y="0%" width="100%" height="100%" fill="url(#progFade)"  />
      <mask>
    
   <filter id="blurme" x="0%" y="0%" width="100%" height="100%">
     <feGaussianBlur stdDeviation="15" result="blurry"/>
    </filter>

     <clipPath id="outerclip">
       <rect x="20" y="20" width="460" height="380" fill="black">
      </clipPath>
    </defs>

<g clip-path="url(#outerclip)">
      
 <image x="0" y="0" filter="url(#blurme)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
  <image x="0" y="0" mask="url(#progFadeMask)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
       </g>
</svg>

Add filter only to image/ inside SVG, but not to the entire SVG

Since the expected results has sharp edges the #turbolence filter must be applied only to the fill.

To achieve this, shape and fill must be on separate layers: an easy solution is to create a <rect> filled with your image and an animated <mask> for the sharp edge.

In the CSS, then, it is possible to assign each single filter to the right element.

.svg {  filter: url("#innershadow");}
.svg .myfill {  filter: url("#turbulence");}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2100 1500" class="svg" x="0px" y="0px">        <filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">          <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>          <feOffset dy="12" dx="12"></feOffset>          <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>          <feComposite in2="shadowDiff" operator="in"></feComposite>          <feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>          <feGaussianBlur in="firstfilter" stdDeviation="10" result="blur2"></feGaussianBlur>          <feOffset dy="-12" dx="-12"></feOffset>          <feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>          <feComposite in2="shadowDiff" operator="in"></feComposite>          <feComposite in2="firstfilter" operator="over"></feComposite>        </filter>
        <filter id="turbulence" x="0" y="0" width="100%" height="100%">          <feTurbulence id="sea-filter" numOctaves="0.1" seed="2" baseFrequency="0.02 0.05"></feTurbulence>          <feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>          <animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>        </filter>
        <defs>          <pattern id="img1"   patternUnits="userSpaceOnUse" x="0" y="0" height="100%" width="100%">            <image xlink:href="../../assets/images/backgrounds/wall-main.png"  x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>          </pattern>          <mask id="myMask">            <path  fill="#fff">              <animate  repeatCount="indefinite" attributeName="d" dur="5s"                    values="M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z;
                            M500,190c90.412-66.126,238.022,65.138,388,26,86.586-22.595,152.56-120.7,236-104,94.03,18.821,101.05,142.366,196,170,115.58,33.639,245.25-120.028,314-76,38.98,24.962,16.27,88.038,60,136,36.16,39.655,72.52,30.721,114,68,29.47,26.484,75.25,85.812,64,146-15.53,83.071-131.92,94.889-144,172-12.37,78.965,107.48,140.205,90,192-28.41,84.17-381.55,26.287-402,96-14.33,48.86,147.88,116.62,138,192-4.81,36.7-57.51,62.76-150,102-79.12,33.57-154.38,62.03-210,70-115.07,16.49-217.716-1.22-252-18-104.652-51.21-150.906-194.87-242-198-73.985-2.54-105.059,84.42-190,98-112.843,18.04-211.468-78.6-246-120-83.04-99.54-53.27-201.986-90-356-36.055-151.181-93.562-237.142-48-288,55.26-61.683,186.476,13.989,268-52C476.816,378.965,421.53,247.392,500,190Z;                            M500,238C621.91,181.654,670.957,61.767,796,44c50.491-7.174,172,34.215,306,118,95.1,59.463,151.04,109.438,226,112,134.95,4.612,236.05-139.415,334-104,60.82,21.99,62.5,101.2,122,156,35.17,32.392,126.79,61.5,136,110,9.71,51.11-75.16,127.335-96,168-43.83,85.544-49.3,148.558-38,198,22.31,97.671,140.35,163.962,124,220-15.75,53.99-135.29,38.81-192,106-67.3,79.73-5.52,200.99-70,254-55.53,45.65-226.87-25.52-290-30-68.89-4.89-132.47,22.44-214-4-84.21-27.3-124.8-95.16-216-108-84.892-11.95-141.558,31.08-236,76-153.42,72.98-293.092,83.99-342,70-117.669-33.66-209.643-140.55-242-250-37.527-126.93,29.383-207.227,24-322C126.26,691.617,18.046,548.78,70,440c17.439-36.513,83.745-86.988,188-128C347.2,276.909,413.476,277.991,500,238Z;
                            M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z "/>            </path>          </mask>        </defs>
        <rect class="myfill" fill="url(#img1)" filter="url(#innershadow) url(#turbulence)" mask="url(#myMask)" width="2100" height="1500" ></rect>           </svg>

SVG gaussian blur in Safari unexpectedly lightens image

The answer, recommended by @RobertLongson in the first comment, requires the attribute 'color-interpolation-filters="sRGB"' to the feGaussianBlur filter.

http://jsfiddle.net/vtDYg/6/

<svg class="sg-blur-2">
  <defs>
    <filter id="sg-blur-2">
      <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image>
</svg>

To the best of my knowledge, the svg spec indicates that feGaussianBlur filter should use the linearRGB color space by default. All browsers except Safari 7 seem to do this incorrectly and default to sRGB. Oddly, mobile Safari also defaults to sRGB.

---

Related Topics