Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary.
The objective at hand is to transform an image, assuming that the source image is colored, into the following appearance:
The primary motivation for this effect stems from the need to rectify poor-quality images (both aesthetically and resolution-wise) that clients may upload onto their websites.
In Photoshop, achieving this outcome involves utilizing Gradient Map alongside a transparent grid in Mode Multiply.
While I've been successful in applying a filter for grayscale and "gradient map," integrating the grid/pattern remains a challenge.
Here's the progress of my code thus far:
SVG file titled gradient-map.svg
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="duotone_filter">
<feColorMatrix type="matrix" result="grayscale"
values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0" >
</feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.0039525691 0.5764705882"></feFuncR>
<feFuncG type="table" tableValues="0.0123456790 0.8431372549"></feFuncG>
<feFuncB type="table" tableValues="0.0123456790 0.9803921569"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</svg>
HTML snippet
<div class="image">
<img src="link/to/file" />
</div>
CSS styling
.image {
filter: url('../images/gradient-map.svg#duotone_filter');
}
Also, here's the SVG template for the pattern/fill:
<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="6px" height="6px" viewBox="0 0 6 6">
<circle cx="3" cy="3" r="2" />
</svg>
Is this the correct approach? How should I proceed in order to achieve the desired effect?
If you could redirect me to any valuable resources, I would be immensely grateful. I seem to be struggling to find up-to-date guides or articles.
Thank you.