Creating an SVG filter icon1 min read

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>

svg-circle

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)

svg-filter

Complete SVG filter icon

Good day/night 🙂