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