SVG Filter vs CSS Filter

Benchmark created by Sam on

Description

Applying SVG Filters vs CSS filters to a Video and Image

Preparation HTML

<video id='testvideo' controls="">
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>

<image src='http://i.imgur.com/0tKvonk.jpg' id='testimage'>

<svg xmlns="http://www.w3.org/2000/svg" id="image" version="1.1">
        <defs>
                <filter id="blur">
                        <feGaussianBlur id="blur1" stdDeviation="4"/>
                </filter>
                <filter id="brightness">
                        <feComponentTransfer>
                         <feFuncR type="linear" id='brightness1' slope="0.5"/>
                         <feFuncG type="linear" id='brightness2' slope="0.5"/>
                         <feFuncB type="linear" id='brightness3' slope="0.5"/>
                        </feComponentTransfer>
                </filter>
                <filter id="saturate">
                        <feColorMatrix id='saturate1' type="saturate" values="150"/>
                </filter>
                <filter id="hue_rotate">
                        <feColorMatrix id='hue_rotate1' type="hueRotate" values="45"/>
                </filter>
        </defs>
</svg>

Setup

var videoObj = document.getElementById('testvideo');
    var imageObj = document.getElementById('testimage');
    
    var VideoEditor = {
      filters: {
        brightness: 100,
        saturate: 100,
        hue_rotate: 360,
        blur: 10
      },
      filtersReset: {
        brightness: 100,
        saturate: 100,
        hue_rotate: 0,
        blur: 0
      },
    
    };
    
    
    
    for(var key in VideoEditor.filters) {
      if(VideoEditor.filters.hasOwnProperty(key)){
        switch(key){
         case 'brightness':
         document.getElementById(key+1).setAttribute('slope', 0.5*Math.random());
         document.getElementById(key+2).setAttribute('slope', 0.5*Math.random());
         document.getElementById(key+3).setAttribute('slope', 0.5*Math.random());
         break;
         case 'blur':
         document.getElementById(key+1).setAttribute('stdDeviation', 4*Math.random());
         break;
         case 'saturate':
         document.getElementById(key+1).setAttribute('values', 200*Math.random());
         break;
         case 'hue_rotate':
         document.getElementById(key+1).setAttribute('values', 360*Math.random());
         break;
        }
      VideoEditor.filters[key] = VideoEditor.filters[key]*Math.random();
      }
    }
    
    
    videoObj.style.filter = '';
    videoObj.style.filter = '';

Teardown


    VideoEditor.filters = VideoEditor.filtersReset;

Test runner

Ready to run.

Testing in
TestOps/sec
CSS Filters
var css = 'brightness(' + VideoEditor.filters.brightness + '%)  saturate(' + VideoEditor.filters.saturate + '%) hue-rotate(' + VideoEditor.filters.hue_rotate + 'deg) blur(' + Math.abs(VideoEditor.filters.blur) + 'px)';

videoObj.style.filter = css;
imageObj.style.filter = css;
ready
SVG Filters
videoObj.style.filter = "url('#brightness'), url('#saturate'), url('#hue_rotate'), url('#blur')";

imageObj.style.filter = "url('#brightness'), url('#saturate'), url('#hue_rotate'), url('#blur')";
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.