I find it easier tot write an HTML page than create a document or powerpoint presentation. Similarly it is easier for me to write SVG icons in XML rather than create one in photoshop. So here is my simple “SVG filter icon”
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"> </svg>
Start by opening the svg tag and give it a width and height of 100
Next lets add a circle with a radius of 50 and it’s center coinciding with the svg element’s.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#1b3131" />
</svg>
Now lets add the filter icon using a polygon. We write the co-ordinates of each point of the filter icon, magics happens and we get a filter.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#1b3131" />
<polygon points="20,25 80,25 55,60 55,75 45,85 45,60" fill="#a9d41e" />
</svg>
We start from the top left corner of the icon (20, 25) and trace its path through (80,25) (55,60) (55,75) (45,85) (45,60) and is finally joined back to (20, 25)
Complete SVG filter icon
Good day/night 🙂