Evaluating SVG Filter Performance (Alphamap) - svg

Question

Is there a known tool to evaluate SVG Filter Performance? I am generating an alphamap using the following SVG node, but am struggling a little with the performance.
<feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 1 0" />
Is there a way to quantify rendering times for SVG filters? Alternativly, does anybody know a better way to extract alpha information using SVG filters?

Answer 1

Idea for measuring performance taken from https://developers.google.com/web/updates/2012/07/How-to-measure-browser-graphics-performance
function draw(x) {
var g = document.createElementNS("http://www.w3.org/2000/svg", "g")
g.id = "canvas"
canvas.parentNode.replaceChild(g, canvas)
for (var i = 1; i < x; i++) {
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect")
rect.setAttribute("width", "100")
rect.setAttribute("height", "100")
rect.setAttribute("filter", "url(#" + filter + ")")
rect.setAttribute("fill", "rgba(128,128,128,0.8)")
rect.setAttribute("x", Math.random() * 300)
rect.setAttribute("y", Math.random() * 300)
g.appendChild(rect)
}
}
var filter = "f1"
var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
var maximumFrameTime = 1000 / 30; // 30 FPS
t = performance.now();
var elapsed = t - previousTime;
previousTime = t;
if (elapsed < maximumFrameTime || slowCount < maxSlow) {
if (elapsed < maximumFrameTime) {
drawLoad += 10;
} else {
slowCount++;
}
draw(drawLoad);
requestAnimationFrame(tick);
} else {
// found maximum sustainable load at 30 FPS
document.getElementById('res').innerHTML = ("could draw " + (drawLoad) + " in " +
maximumFrameTime + " ms");
}
};
requestAnimationFrame(tick);
svg {
background: beige
}
<button onclick="filter='f1';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 1</button>
<button onclick="filter='f2';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 2</button>
<div id="res"></div>
<svg width="400" height="400">
<filter id="f1">
<feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 1 0" />
</filter>
<filter id="f2">
<feMerge>
<feMergeNode dx="1" dy="1" in="SourceAlpha" />
</feMerge>
</filter>
<g id="canvas">
</g>
</svg>