SVG-Filter und CSS-Filter

index.html

<h1>Vergleich zwischen SVG- und CSS-Filtern</h1>

<p>IE 10 und 11 können leider nicht mit <a href="https://developer.mozilla.org/de/docs/Web/CSS/filter">CSS-Filtern</a> umgehen und haben auch die vorher proprietären IE-Filter nicht mehr integriert. Allerdings stellen Sie <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG-Filter</a> dar. Deshalb müssten dann alle Bilder als Teil eines SVG-Konstruktes implementiert werden. In diesem Beispiel stehen ein in SVG implementiertes Bild und ein normal implementiertes Bild nebeneinander. Beiden wurde ein Blur-Filter auferlegt. </p>

<h2>Bild im SVG</h2>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
 <filter id="blurMe">
   <feGaussianBlur stdDeviation="5"/>
 </filter>

   <image xlink:href="http://placekitten.com/300/200" 
          height="200" width="300" y="0" x="0" filter="url(#blurMe)" />
</svg>


<h2>Bild ganz normal als HTML-Element implementiert</h2>

<img src="http://placekitten.com/300/200" style="filter: blur(5px)" alt="">

<h2>Das Ursprungsbild</h2>
<img src="http://placekitten.com/300/200" alt="">

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />

svg-filter-und-css-filter.markdown

SVG-Filter und CSS-Filter

A Pen by Jens Grochtdreis on CodePen.

License.