SVG Filters Color Manipulation Filters: Posterizing


Example

<svg width="800px" height="600px" >
   <defs>
     <filter id="posterize" color-interpolation-filters="sRGB">
     <feComponentTransfer>
       <feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
       <feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
       <feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
     </feComponentTransfer>
     </filter> 
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>