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

Question

当我在我的选项卡式离子应用程序中使用任何 out-of-the-box Ionicons 或其他定制的 SVG 图标时，它们都可以正常工作，即

they are greyed out when the tab is deactivated
激活标签时，它们获得了主要颜色

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

选项卡图标始终具有原始颜色（黑色），只有标题会相应地更改颜色

我最好的猜测是，当我首先使用 Inkscape 创建合适的图标时，我做错了一些事情。

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

首先，我从网上获取了一个免费的 SVG 图标，并将其作为自定义图标用于我的选项卡式 ionic 应用程序中。这完全符合预期！我使用了 GraphBerry 的这个漂亮的飞机形状：
- https://www.flaticon.com/free-icon/airplane-shape_59919
然后我将完全相同的 SVG 加载到 Inkscape 中并将其存储为 "Inkscape SVG"。由于 Inkscape 添加的所有额外内容，文件大小略大。不过它仍然可以正常工作。
然后我在飞机形状上添加了一个简单的圆，并将其再次存储为 Inkscape SVG。加载生成的 SVG 作为自定义图标仍然可以完美运行！
接下来，我从头开始创建一个新图标，并添加了 6 个 non-intersecting 具有默认 Inkscape 颜色的圆圈。它被存储为 Inkscape SVG，并且运行顺利！
麻烦来了！我又开始了一个新的图标，现在我有两个相交的圆圈，一个是黑色的，另一个是灰色的。我把灰色的用"cut off"黑圈的一部分用"Difference"操作。结果是 black-only 类 "crescent moon"。另存为 Inkscape SVG 并在我的应用程序中用作自定义图标。它保持黑色，而且只有黑色。没有变灰，没有焦点颜色，什么都没有。只有选项卡的标题会相应地调整颜色。
- 我绝对确定该图标是一种颜色的图标：黑色。
- 我尝试了 "Object to Path" 功能和其他绝望的措施，但没有帮助

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

离子/打字稿代码本身可能没有任何问题，因为自定义图标通常对我有用。但是如果你想用我错误的 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>

Tab One 有一个 out-of-the-box Ionicons 图标
选项卡二使用上面提到的飞机图标
选项卡三引用 non-working 自制图标

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

Image: wrong icon behaviour

这是 non-working svg/xml 代码 第三个图标 "custom-shape-cut-circle.svg":

<?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"。选中此选项（而不是使用任何颜色设置 Fill/Stroke 样式）自定义图标可以完美运行！

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

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

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

Answer 1

这两个图形在样式方面的主要区别在于，有效的图形根本没有样式信息。

因此，保存为优化的 SVG 以删除所有 Inkscape-specific 内容，然后使用文本编辑器打开文件并删除所有样式信息 (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 无需 Inkscape 开销的更全面的 SVG 保存方法。

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

How do I make my custom SVG icons display correctly? (Inkscape, Ionic 4)

svg

inkscape

ionic-framework

ionicons

ionic4

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

How do I make my custom SVG icons display correctly? (Inkscape, Ionic 4)

svg

inkscape

ionic-framework

ionicons

ionic4

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