SVG filters

by wolver1ne

HTML

<div class="img">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="http://www.fluentin3months.com/wp-content/uploads/2011/05/amsterdam.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" /></svg>
</div>

<svg><defs><filter id="feLime"><feColorMatrix type="matrix" values="1 0 0 0 0, 0 2 0 0 0, 0 0 0 .5 0, 0 0 0 1 0"/></filter></defs></svg>

CSS

.img {
    display: block;
    position: relative;
    width: 600px;
    height: 400px;
}

.img svg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: cyan;
}

.img image {
    filter: url(#feLime);
}