Convert CSS filters to SVG filter
<p>I have working CSS filters on the <code>&lt;img /&gt;</code> elements as I want to.</p>

<p>eg.</p>

<pre><code>filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px);
</code></pre>

<p>My gol is to apply the same filter properties to the <code>&lt;image /&gt;</code> tag inside SVG file.</p>

<p>However things like</p>

<pre><code>&lt;g style="-webkit-filter: contrast(67%) saturate(250%);"&gt;
    &lt;image xlink:href="image.jpg" /&gt;
&lt;/g&gt;
</code></pre>

<p>or </p>

<pre><code>&lt;image xlink:href="image.jpg" style="-webkit-filter: contrast(67%) saturate(250%) sepia(40%)"/&gt;
</code></pre>

<p>does not work.</p>

<p>So most likely I have to combine CSS filters as SVG filters.</p>

<p>On webplatform.org I found SVS's represnetation of particular CSS filter effects, eg:</p>

<ul>
<li><p>invert: <a href="https://docs.webplatform.org/wiki/css/functions/invert" rel="nofollow">https://docs.webplatform.org/wiki/css/functions/invert</a></p>

<p>
  
    
    
    
  
</p></li>
</ul>

<p>then I have tried to combine generated filters with <code>feMerge</code>.</p>

<pre><code>&lt;filter id="clip_1-filter-90117969876336"&gt;
    &lt;feComponentTransfer in="SourceGraphic" result="brightness-filter"&gt;
      &lt;feFuncR type="linear" slope="22"&gt;&lt;/feFuncR&gt;
      &lt;feFuncG type="linear" slope="22"&gt;&lt;/feFuncG&gt;
      &lt;feFuncB type="linear" slope="22"&gt;&lt;/feFuncB&gt;
    &lt;/feComponentTransfer&gt;

    &lt;feComponentTransfer in="brightness-filter" result="contrast-filter"&gt;
      &lt;feFuncR type="linear" slope="-15" intercept="7"&gt;&lt;/feFuncR&gt;
      &lt;feFuncG type="linear" slope="-15" intercept="7"&gt;&lt;/feFuncG&gt;
      &lt;feFuncB type="linear" slope="-15" intercept="7"&gt;&lt;/feFuncB&gt;
    &lt;/feComponentTransfer&gt;

    &lt;feColorMatrix in="contrast-filter" result="grayscale-filter" type="matrix" values="
       1 0 0 0 0
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 1 0"&gt;&lt;/feColorMatrix&gt;

    &lt;feComponentTransfer in="SourceGraphic" result="invert-filter"&gt;
      &lt;feFuncR type="table" tableValues="0 1"&gt;&lt;/feFuncR&gt;
      &lt;feFuncG type="table" tableValues="0 1"&gt;&lt;/feFuncG&gt;
      &lt;feFuncB type="table" tableValues="0 1"&gt;&lt;/feFuncB&gt;
    &lt;/feComponentTransfer&gt;

    &lt;feMerge&gt;
      &lt;feMergeNode in="grayscale-filter"&gt;&lt;/feMergeNode&gt;
    &lt;/feMerge&gt;
    &lt;/filter&gt;
</code></pre>

<p>However the results are far from expected.</p>

<p>What is the proper way of translating CSS filters to the SVG?</p>