如何从 SVG 图像中删除所有颜色？

Question

我有这个 SVG 图像，我需要擦除“所有”颜色，包括前面、背心和腹部的白光，只看到轮廓的图像。我需要它干净才能在我正在制作的导航栏项目上使用。 This is the image I need to edit

Answer 1

您可以使用过滤器：

1. 将您的图像转换为灰度：

<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"/>

1. 然后使用离散颜色转换将黑色像素变为黑色，将其他所有像素变为白色：

<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>

1. 然后反转所有这些以使轮廓为白色而其他所有内容为黑色：

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

1. 最后，从这个过滤后的图像中创建一个蒙版并将其应用于您的图像。

<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>