如何使我的自定义 SVG 图标正确显示？ （Inkscape，离子 4）

Question

当我在标签式离子应用程序中使用任何开箱即用的 Ionicons 或其他定制的 SVG 图标时，它们都可以正常工作，即

• 当标签被停用时它们会变灰
• 当标签激活时，它们会获得原色

如果我使用 Inkscape 创建自己的黑白 SVG 图标，结果是图标不会改变其颜色。

• 标签图标始终具有原始颜色（黑色），只有标题会相应更改颜色

我最好的猜测是，我首先使用 Inkscape 创建一个合适的图标时做错了什么。

我做了什么来研究我的问题？

1. 首先，我从网上获取了一个免费的 SVG 图标，并将其用作我的选项卡式 ionic 应用程序中的自定义图标。这完全符合预期！ 我使用了 GraphBerry 的这个漂亮的飞机形状：

   • https://www.flaticon.com/free-icon/airplane-shape_59919

2. 然后我将相同的 SVG 加载到 Inkscape 中，并将其存储为“Inkscape SVG”。由于 Inkscape 添加了所有其他内容，文件大小略大。但它仍然可以完美运行。

3. 然后我在飞机形状上添加了一个简单的圆圈，并将其再次存储为 Inkscape SVG。将生成的 SVG 加载为自定义图标仍然可以完美运行！

4. 接下来，我从头开始创建一个新图标，并添加了 6 个具有默认 Inkscape 颜色的不相交的圆圈。它被存储为 Inkscape SVG 并且运行顺利！

5. 现在麻烦开始了！我又开始了一个新的图标，现在我有两个相交的圆圈，一个是黑色的，另一个是灰色的。我用灰色的通过“差异”操作“切断”了黑色圆圈的一部分。结果是一种只有黑色的“新月”。保存为 Inkscape SVG 并在我的应用程序中用作自定义图标。它保持黑色，并且只有黑色。没有变灰，没有焦点颜色，什么都没有。只有选项卡的标题会相应地调整颜色。

   • 我绝对确定该图标是一种单一颜色的图标：黑色。
   • 我尝试了“对象到路径”功能和其他不同的措施，但没有帮助

我不确定我的 SVG 文件有什么问题，但我怀疑仅将 SVG 设为单色以使其成为有用的图标还不够？

这样的 ionic / typescript 代码可能没有任何问题，因为自定义图标通常对我有用。但是如果你想用我错误的 SVG 尝试一个简单的 Ionic 4 示例，试试这个：

创建带有 3 个选项卡的标准选项卡式离子应用程序：

ionic start tabtester tabs

现在将 SVG 文件复制到“/assets/icon/”目录。

之后，在“/app/tabs/tabs.page.html”文件中添加自定义图标。

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon src="assets/icon/airplane-shape.svg"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon src="assets/icon/custom-shape-cut-circle.svg"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

• 标签一有一个开箱即用的 Ionicons 图标
• 标签二使用上面提到的飞机图标
• 标签三引用了无法使用的自制图标

在这张图片中，您可以看到所有三个选项卡一个接一个地被选中，第三个图标没有改变颜色：

• Image: wrong icon behaviour

这是名为“custom-shape-cut-circle.svg”的第三个图标的无效的 svg/xml 代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="612mm"
   height="612mm"
   viewBox="0 0 2168.5039 2168.5039"
   id="svg4137"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="cusoim-shape-cut-circle.svg">
  <defs
     id="defs4139" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.24748737"
     inkscape:cx="606.12303"
     inkscape:cy="1233.4996"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="997"
     inkscape:window-x="1672"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata4142">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,1116.1417)">
    <path
       style="opacity:0.98000004;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.53516412;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98039216"
       d="M 951.78671,-1021.0711 A 967.75597,989.18228 0 0 0 248.96227,-710.12864 945.97847,886.05228 0 0 1 1076.422,168.09039 945.97847,886.05228 0 0 1 650.77296,907.50594 967.75597,989.18228 0 0 0 951.78671,957.29165 967.75597,989.18228 0 0 0 1919.5415,-31.888051 967.75597,989.18228 0 0 0 951.78671,-1021.0711 Z"
       id="path4685"
       inkscape:connector-curvature="0" />
  </g>
</svg>

第三个图标的预期行为应该与第二个类似，在停用的选项卡上应该是灰色的，在激活的选项卡上应该是蓝色的。

有什么诀窍？

更新：

在@Moini 和@j-t-houtenbos 的出色回答下，我终于明白了我的自定义文件的问题。

样式是问题，现在我知道了原因，我终于明白了 Inkscape Fill/Stroke 选项“paint undefined”。 选中此选项（而不是使用任何颜色设置填充/描边），自定义图标可以完美运行！

这是找到选项的地方： Image: Inkscape option "paint undefined"

根据我在答案中获得的信息，我建议仅在起草时使用此选项。它使您的开发更容易，因为您不需要每次都手动编辑 SVG。

在为生产创建自定义 SVG 时，我强烈建议使用 @j-t-houtenbos 描述的程序 生成的文件大小要小得多，并且图标仍然可以正常工作！

Answer 1

两种图形在样式方面的主要区别在于，可以使用的图形根本没有样式信息。

因此，保存为优化的 SVG 以删除所有 Inkscape 特定的内容，然后使用文本编辑器打开文件并删除所有样式信息 (style="op....")。

Answer 2

正如@Moini 提到的，删除内联样式。它们防止外部样式覆盖它。如果您只是删除内联样式，它将起作用。下面是一个更精简版本的示例：

svg{
   width: 20px;
   height: 20px;
}
svg:hover{
   fill: orange;
}

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   version="1.1"
   width="612mm"
   height="612mm"
   viewBox="0 0 2168.5039 2168.5039">
   <g transform="translate(0,1116.1417)">
      <path d="M 951.78671,-1021.0711 A 967.75597,989.18228 0 0 0 248.96227,-710.12864 945.97847,886.05228 0 0 1 1076.422,168.09039 945.97847,886.05228 0 0 1 650.77296,907.50594 967.75597,989.18228 0 0 0 951.78671,957.29165 967.75597,989.18228 0 0 0 1919.5415,-31.888051 967.75597,989.18228 0 0 0 951.78671,-1021.0711 Z"/>
  </g>
</svg>

也可以保留 SVG 原样并使用 !important 规则覆盖它。您需要定位路径元素：

svg path{
   fill: red!important;
}

我建议您制作 SVG 的精简版本，以防止不必要的开销。 Look here 以更全面的方式保存 SVG 而无需 Inkscape 开销。