How can I remove all colors from SVG image?

I have this SVG image and I need to erase "all" colors, including the white light on front, vest and belly, seeing only the outlines' image. I need it clean to use on a navbar project I'm making. This is the image I need to edit

Solution

you can use a filter to:

turn your image into greyscale:

<feColorMatrix type="matrix"
                     values="0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0 0 0 1 0"/>

then use a descrete color transformation to turn black pixels black and everything else white:

<feComponentTransfer>
    <feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
    <feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
    <feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>

then inverse all this to have the outline white and everything else black:

<feColorMatrix type="matrix" values="-1  0  0 0 1
                                      0 -1  0 0 1
                                      0  0 -1 0 1
                                      0  0  0 1 0"/>

and finally, create a mask from this filtered image and apply it to your image.

<mask id="mask" viewBox="0 0 150 206">
    <rect width="150" height="206" fill="black"/>   
    <g filter="url(#nocolor_inv)">
      <!-- your image here -->
      <circle  cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
    </g>
</mask>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
	 <filter id="nocolor_inv" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
						<feColorMatrix type="matrix"
                     values="0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0 0 0 1 0"/>
						<feComponentTransfer>
			        <feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
			        <feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
			        <feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
			      </feComponentTransfer>
						<feColorMatrix type="matrix" values="-1  0  0 0 1
                                                  0 -1  0 0 1
                                                  0  0 -1 0 1
                                                  0  0  0 1 0"/>

    </filter>
		<mask id="mask" viewBox="0 0 150 206">
			<rect width="150" height="206" fill="black"/>
			
      <g filter="url(#nocolor_inv)">
        <!-- your image here -->
        <circle  cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
      </g>
		</mask>

    <g mask="url(#mask)">
        <!-- your image here -->
        <circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
    </g>
</svg>