<!DOCTYPE html>
<html lang="en">
<head>
<style>
div	{
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	float: left;
}
.f0 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		brightness(0.5));
}
.f1 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		contrast(0.5));
}
.f2 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		saturate(0.5));
}
.f3 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		sepia(0.5));
}
.f4 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		grayscale(0.5));
}
.f5 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		invert(0.5));
}
.f6 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		opacity(0.5));
}
.f7 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		sepia(0.3) brightness(1.2) contrast(0.2));
}
.f8 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2));
}
.f9 {
	background-image: -webkit-filter(
		url("resources/image.svg"),
		contrast(0.5) contrast(1.5));
}
</style>
</head>
<body>
<div class="f0"></div>
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
<div class="f5"></div>
<div class="f6"></div>
<div class="f7"></div>
<div class="f8"></div>
<div class="f9"></div>
</body>
</html>