here is the code where i m going to add the svgpicture but i m getting black image
new Container
child: new SvgPicture.asset('assets/camera.svg')
),
this is mine camera.svg file
<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608">
<defs>
<style>
.cls-1{}
</style>
</defs>
<g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
<g id="Group_4" data-name="Group 4">
<g id="Group_3" data-name="Group 3">
<path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
</g>
</g>
</g>
</svg>
This is probably happened because of the corrupted SVG files from the internet. I faced this problem earlier and tried many ways to solve it. But finally, I solved it with the help of this software, svgcleaner.
Download the application into your OS, from here
After installation,
import your SVG.
Click run.
Success! Here you can see your SVGs' cleaned successfully.
After cleaning, you can grab those SVG files from the output folder location and add those files into your flutter app without seeing any black coloured SVG.
It works perfectly fine for me.
flutter_svg can not understand Internal or Embedded CSS.
Hence you need to remove the internal css and write inline css.
Example:-
<path style="fill:#566e83;" ...
Use https://vecta.io/nano
It can remove the unsupported tags such as and compress the svg file at certain level
this is cause of inline css .....
<style>
.cls-1{}
</style>
remove this lines and try ... your problem will be solved... flutter svg cant read inline CSS
Edit the style like I did below in order to change the color:
<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608" style="fill: #ff0000;">
<defs>
<style>
.cls-1{}
</style>
</defs>
<g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
<g id="Group_4" data-name="Group 4">
<g id="Group_3" data-name="Group 3">
<path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
</g>
</g>
</g>
</svg>
First using the svg image you have provided I'm getting the following an error on the console
I/flutter ( 7705): ══╡ EXCEPTION CAUGHT BY SVG
╞═══════════════════════════════════════════════════════════════════════
I/flutter ( 7705): The following UnimplementedError was thrown in
parseSvgElement: I/flutter ( 7705): The element is not
implemented in this library.
You can remove this section on the image to resolve that issue:
.cls-1{}
Second, the image is being displayed properly, just verify you have added the proper assets registration on pubspec.yaml file, as follow.
assets:
- assets/camera.svg
Which means you have a folder called assets at a root level.
Third the image is not a camera picture is just like a person icon.
Use as follow and you will see:
Container(
height: 120.0,
width: 120.0,
color: Colors.yellow,
child: SvgPicture.asset('assets/camera.svg'),
)
I put a Yellow color background to show a better result.
Hope this help.
Even I faced this problem in flutter, the problem is with the SVG file and I cleaned the SVG file using this website https://jakearchibald.github.io/svgomg/ and it worked well then.
Nothing you have to do buddy! just open that svg file in your android studio. and remove style attribute from there.
Please follow below steps to resolve this error:
copy your svg picture code.
convert your svg code to inline CSS using this tool css-inliner
paste your new svg code to the existing svg file
restart the app, this will resolve your problem.
This is because the flutter_svg package does not render the internal CSS of your svg code.
I have a list of client logos (Views Block) at frontpage. Images are generated via ImageStyle (resize and desaturate). So the logos are grayscale, but I need them to be colored at mousehover. Any idea how to do that?
I googled if there is a way to make image grayscale with css, but cant find it. or I cant find a way to make 2 different image (one colored, one grayscale) in a ImageStyle.
Helps are much appreciated! Thanks a lot your time!
You can set up two ImageStyles, both with the same dimensions.
One is the regular, colour image, the other the filtered one. The settings should be the same (cropping etc.), except that one has the desaturation filter. You can call one setting 'logo-thumb-normal' and one 'logo-thumb-filtered'
You should now have two output images which are the same except for the filtering, and they should have the same file name, though they will be in different folders.
Set your content type Image field to use 'logo-thumb-filtered.'
So, when you upload an image within a content type, that should generate two files, one for each setting:
/sites/default/files/styles/logo-thumb-normal/public/field/image/image.jpg and
/sites/default/files/styles/logo-thumb-filtered/public/field/image/image.jpg
You can refer to these two images manually, as Spudley suggests, but even easier may be to use jQuery to swap the images out on hover (here's a simple example: http://jsfiddle.net/vSUkv/1/):
$('.image1').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
EDIT:
To include jQuery in Drupal 7:
To add the script above, you can:
Add a custom JavaScript file to your theme, if you haven't already, by adding the line scripts[] js/custom.js to your theme's info file.
Create the js folder inside your theme, and create the custom.js file inside that folder.
Add the following code to your custom.js file:
// We define a function that takes one parameter named $.
(function ($) {
// Store our function as a property of Drupal.behaviors
Drupal.behaviors.imageSwap = {
attach: function (context, settings) {
$('.hplogoclient a img').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
}
}
}(jQuery));
Clear the cache and check again. See http://drupal.org/node/171213 for details.
I think you're going to need two images for this; one for the greyscale version and one for the colour version. You can't easily do that kind of image manipulation on the browser at the moment. (in fact, it can be done if you really want to, using some of the more modern browser features, but it'd probably be a lot more work, and would not be compatible in all browsers, so I'd stick with the two image solution for now)
For the two-image solution, if you set your image as a background image, then it's fairly simple in CSS:
.myelement {
background-image:url(/path/to/greyscale.png);
}
.myelement:hover {
background-image:url(/path/to/fullcolour.png);
}
You could also do it using CSS 'Sprites', which basically means having both pictures in a single image file, but setting the element's size such that only the appropriate part of the image is visible; then in the :hover styles, adjust the offset so that the other part of the image is visible instead.
It's a bit more fiddly to set up CSS sprites than simply using two separate images, but it can be worth the effort. Find out more about how to do it and why here: http://css-tricks.com/158-css-sprites/
There is a very easy solution using only simple HTML and CSS:
HTML:
<div id="desaturate"> <a href="/thelink"> <a img src="/sites/default/files/images/yourfolders/image.png" alt="this image is">
CSS:
#desaturate img { opacity:0.4; padding-left: 20px; } #desaturate img:hover { opacity:1.0; }
Here is a sample and simple tutorial.
You can now do this in CSS, see http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html :
.myimage:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.myimage {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
This saves having to generate, store and load 2 images.
Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?
It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.
I know I can do it with both SVG and Canvas, but that seems like a lot of work right now.
Is there a truly lazy person's way to do this?
Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.
img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">
What about Internet Explorer 10?
You can use a polyfill like gray.
Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.
Your SVG file will look like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>
Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.
In your CSS you reference the filter using the Firefox specific filter property:
.target {
filter: url(resources.svg#desaturate);
}
Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).
edit: Here's a nice blog post which describes using the new CSS3 filter property in SalmanPK's answer in concert with the SVG approach described here. Using that approach you'd end up with something like:
img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}
Further browser support info here.
For Firefox you don't need to create a filter.svg file, you can use data URI scheme.
Taking up the css code of the first answer gives:
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */
Take care to replace "utf-8" string by your file encoding.
This method should be faster than the other because the browser will not need to do a second HTTP request.
Update: I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11: https://github.com/karlhorky/gray
I originally used SalmanPK's answer, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.
I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.
img.grayscale {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}
Simplest way to achieve grayscale with CSS exclusively is via the filter property.
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
The property is still not fully supported and still requires the -webkit-filter property for support across all browsers.
If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You can't use it with images loaded from a different domain.
http://james.padolsey.com/demos/grayscale/
Just got the same problem today. I've initially used SalmanPK solution but found out that effect differs between FF and other browsers. That's because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise I've found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
With css:
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
One more caveat is that IE10 doesn't support "filter: gray:" in standards compliant mode anymore, so needs compatibility mode switch in headers to work:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
A new way to do this has been available for some time now on modern browsers.
background-blend-mode allows you to get some interesting effects, and one of them is grayscale conversion
The value luminosity , set on a white background, allows it.
(hover to see it in gray)
.test {
width: 300px;
height: 200px;
background: url("http://placekitten.com/1000/750"), white;
background-size: cover;
}
.test:hover {
background-blend-mode: luminosity;
}
<div class="test"></div>
The luminosity is taken from the image, the color is taken from the background. Since it is always white, there is no color.
But it allows much more.
You can animate the effect setting 3 layers. The first one will be the image, and the second will be a white-black gradient. If you apply a multiply blend mode on this, you will get a white result as before on the white part, but the original image on the black part (multiply by white gives white, multiplying by black has no effect.)
On the white part of the gradient, you get the same effect as before. On the black part of the gradient, you are blending the image over itself, and the result is the unmodified image.
Now, all that is needed is to move the gradient to get this effect dynamic: (hover to see it in color)
div {
width: 600px;
height: 400px;
}
.test {
background: url("http://placekitten.com/1000/750"),
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 2s;
}
.test:hover {
background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>
reference
compatibility matrix
Doesn't look like it's possible (yet), even with CSS3 or proprietary -webkit- or -moz- CSS properties.
However, I did find this post from last June that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.
For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image:hover {
opacity: 0;
}
Applied on this markup:
<!DOCTYPE HTML>
<html>
<head>
<title>Grayscaling in Internet Explorer 10+</title>
</head>
<body>
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
</html>
For more demos, checkout IE testdrive's CSS3 Graphics section and this old IE blog http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
In Internet Explorer use the filter property.
In webkit and Firefox there is currently no way to desatuarte an image solely with CSS.
so you will need to use either canvas or SVG for a client side solution.
But I think using SVG is more elegant. check out my blog post for the SVG solution that works for both Firefox and webkit:
http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
And strictly speaking since SVG is HTML the solution is pure html+css :-)
Maybe this way help you
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
w3schools.org
It's in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from http://www.ssi-developer.net/css/visual-filters.shtml
The method by Ax simply makes the image transparent and has a black background behind it. I'm sure you could argue this is grayscale.
Although you didn't want to use Javascript, I think you'll have to use it. You could also use a server side language to do it.
If you're willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support <canvas>, it should work.
So I googled "canvas grayscale", and the first result was http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html which seems to work.
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...
Here's a mixin for LESS that will let you choose any opacity. Fill in the variables yourself for plain CSS at different percentages.
Neat hint here, it uses the saturate type for the matrix so you don't need to do anything fancy to change the percentage.
.saturate(#value:0) {
#percent: percentage(#value);
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='#value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(#percent); /* Current draft standard */
-webkit-filter: grayscale(#percent); /* New WebKit */
-moz-filter: grayscale(#percent);
-ms-filter: grayscale(#percent);
-o-filter: grayscale(#percent);
}
Then use it:
img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}
You don't need use so many prefixes for full use, because if you choose prefix for old firefox, you don't need use prefix for new firefox.
So for full use, enough use this code:
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: none;
-webkit-filter: grayscale(0%);
}
As a complement to other's answers, it's possible to desaturate an image half the way on FF without SVG's matrix's headaches:
<feColorMatrix type="saturate" values="$v" />
Where $v is between 0 and 1. It's equivalent to filter:grayscale(50%);.
Live example:
.desaturate {
filter: url("#desaturate");
-webkit-filter: grayscale(50%);
}
figcaption{
background: rgba(55, 55, 136, 1);
padding: 4px 98px 0 18px;
color: white;
display: inline-block;
border-top-left-radius: 8px;
border-top-right-radius: 100%;
font-family: "Helvetica";
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0.4"/>
</filter>
</svg>
<figure>
<figcaption>Original</figcaption>
<img src="http://www.placecage.com/c/500/200"/>
</figure>
<figure>
<figcaption>Half grayed</figcaption>
<img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>
Reference on MDN
Based on robertc's answer:
To get proper conversion from colored image to grayscale image instead of using matrix like this:
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0
You should use conversion matrix like this:
0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0 0 0 1
This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.
For more information why you should use matrix I posted more likely that the robertc's one check following links:
The luminance and colour difference signals
Margus's answer for question: "greyscalevalue in colorvalue" #stackoverflow part: Edit 2: #Hans Passant
Charles A. Bouman - Purdue university - Analog TV page 20 & 21
And here you can find some C# and VB codes
be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags.
Absolute positionning hover an img (or text area wich needs no click nor selection) can closely mimic effects of color scale , via rgba() or translucide png .
It will not give one single color scale, but will shades color out of range.
test on code pen with 10 different colors via pseudo-element, last is gray . http://codepen.io/gcyrillus/pen/nqpDd (reload to switch to another image)
One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.
If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I don't know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But that's a lot of if's!
You can use one of the functions of jFunc - use the function "jFunc_CanvasFilterGrayscale"
http://jfunc.com/jFunc-functions.aspx
Try this jquery plugin. Although, this is not a pure HTML and CSS solution, but it is a lazy way to achieve what you want. You can customize your greyscale to best suit your usage. Use it as follow:
$("#myImageID").tancolor();
There's an interactive demo. You can play around with it.
Check out the documentation on the usage, it is pretty simple. docs
For grayscale as a percent in Firefox, use saturate filter instead: (search for 'saturate')
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"
If you, or someone else facing a similar problem in future are open to PHP.
(I know you said HTML/CSS, but maybe you are already using PHP in the backend)
Here is a PHP solution:
I got it from the PHP GD library and added some variable to automate the process...
<?php
$img = #imagecreatefromgif("php.gif");
if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);
// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');
// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>