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

Question

我有这张 SVG 图像，我需要擦除 "all" 颜色，包括正面、背心和腹部的白光，只看到轮廓图像。我需要它干净地用于我正在制作的导航栏项目。 This is the image I need to edit

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

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

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

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

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

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

How can I remove all colors from SVG image?

svg

adobe-illustrator