使用简单CSS操作SVG图标

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-08-09 13:05:23 发布 4.1k 阅读 AI 写同款· GEO 优化 ›

本文是由三部分组成的系列文章的第二篇，该系列文章将展示Iconic将提供的新的图像学方法。

用CSS样式图标

智能图标引起了人们的极大兴趣，但样式可能是每天最有用的功能。图标集涵盖了广泛的不同主题，但以单一视觉样式呈现。如果不是最佳的话，这通常是适当的。但是，在许多情况下，特定的图标可以并且应该具有特定的样式（颜色，笔触宽度或其他属性）。

静态图片无法进行样式设置（除非您针对每种特定的美感输出文件）。图标字体通过允许简单的样式使我们更接近，但它不是细粒度的-意味着如果将图标涂成红色，则整个图标将是红色。使用SVG，可以自由设置图标中各个元素的样式，从而开辟了全新的可能性。

一个图标，无限的可能性

SVG和CSS的结合是神奇的。图像可以呈现完全不同的外观，经过定制的处理以及有趣的交互式过渡。 SVG标记提供对其中包含的所有元素的访问和控制。这意味着可以使用CSS对灯泡图标进行“点亮”，可以对对比度图标进行样式设置以反映特定的对比度，而信号灯图标可以传达go信息 。能够在元素级别进行样式设计为图标注入了新的活力-它们可以是真正独特的 。

图标主题

使用CSS对图标进行样式设置的下一个逻辑步骤是创建范围广泛的主题，以实现一致的美观。我们对Iconic的关注重点之一就是揭露和应对围绕图标主题的挑战。通常，设置一组图标的样式（除了简单地更改颜色之外）是一项艰巨的任务，它依赖于具有源矢量文件。没有它们吗？好吧，你不走运。

SVG图标可以解决此问题。我之所以说“可以”，是因为很难始终如一地构造整个SVG图标集。图标的设计和构建必须考虑主题，以使样式在整个集合中保持一致。但是，当它起作用时，它看起来很棒。

我们整理了一个演示来展示图标主题。它向您显示了将CSS规则应用于整个图标集时可以完成多少工作。

玩我们的图标主题演示。

有趣的用例

图标样式不仅可以进行任意颜色更改，而且可以做得更多。这种方法使我们有机会提供另一个有价值的信息层。

提供简单的上下文信息

想一想您在界面中看到的所有显示上下文信息的图标。只需考虑一下各种应用程序中的画笔或填充图标即可传达您将要绘制或填充的颜色。设计成样式的SVG图标可以做到这一点。

样式状态

图标内的通信状态通常与使用颜色一样简单。图标字体已经可以实现这一点，但是如果您想超越简单的颜色开关该怎么办？这是SVG和CSS的另一个完美用例。例如，让我们看一下WIFI信号图标。

这个怎么运作

注意：下面的示例仍然是概念验证原型。以下代码都不是最终的代码，更不用说beta了。我们仍处于此方法的研发阶段，并且我们知道仍有许多问题需要解决。在Kickstarter活动结束后，我们将为这种方法的更具体的方向进行研究。

图标样式的机制非常简单。如果您过去曾经使用过CSS（我们假设您曾经使用过），那么几乎没有什么要学习的。这就是使这种方法如此出色的部分-使用您已经知道的技能和工具，它的功能非常强大。 SVG样式具有一组完全独特CSS规则，您需要学习这些CSS规则，但是这些概念非常简单，只需花很少的精力即可掌握。

真正的工作来自于设计和构造一个实际上可以样式化的图标。就像智能图标一样，此方法依赖于将SVG直接注入到DOM中，并在语义上进行结构化以进行样式设置。这远不只是将类添加到SVG图标中的每个元素（但这并不有害）。启动图标进行样式设置仍然有些艺术形式。我们非常确定这是一门科学，我们希望将来能更多地介绍该过程。 Iconic的目标是帮助使此过程清晰可重复，以便其他图标设计人员可以使他们的图标样式化。

让我们以设置WIFI信号图标的样式为例，以显示其各种状态。您将很快看到它是多么平易近人。

查看实际代码

HTML

<img src="signal.svg" class="svg-inject" alt="signal" />

$('.svg-inject').svgInject();

CSS

/*Strong signal*/

.iconic-signal.iconic-signal-strong .iconic-signal-base {

    fill:#569e26;

}

.iconic-signal.iconic-signal-strong .iconic-signal-wave * {

    stroke:#569e26;

}



/*Medium signal*/

.iconic-signal.iconic-signal-medium .iconic-signal-base {

    fill:#efc411;

}

.iconic-signal.iconic-signal-medium .iconic-signal-wave * {

    stroke:#efc411;

}

.iconic-signal.iconic-signal-medium .iconic-signal-wave-outer {

    opacity:.3;

    stroke-width:.5;

}



/*Weak signal*/

.iconic-signal.iconic-signal-weak .iconic-signal-base {

    fill:#b52808;

}

.iconic-signal.iconic-signal-weak .iconic-signal-wave * {

    stroke:#b52808;

}

.iconic-signal.iconic-signal-weak .iconic-signal-wave-outer ,

.iconic-signal.iconic-signal-weak .iconic-signal-wave-middle {

    opacity:.3;

    stroke-width:.5;

}



/*No signal*/

.iconic-signal.iconic-signal-none .iconic-signal-base {

    fill:#848484;

}

.iconic-signal.iconic-signal-none .iconic-signal-wave * {

    stroke:#848484;

    opacity:.3;

    stroke-width:.5;

}

SVG：signal.svg

<svg version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.26px" height="8px" viewBox="0 0 11.26 8" enable-background="new 0 0 11.26 8" xml:space="preserve">

  <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/>

  <g class="iconic-signal-wave">

    <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/>

    <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/>

    <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/>

  </g>

</svg>

还不错吧？正确设置了SVG图标的样式后，其余的操作就会下坡！

使用SVG 2.0可能会更好

如您所见，您可以使用SVG和CSS做很多事情 ，但是仍然有一些限制。我们遇到的主要问题之一是笔触对齐。 SVG 1.1中的所有笔触都是中心对齐的，这意味着笔触将在路径的每一侧平均分配。由于种种原因，我们认为这不是图标设计的最佳选择，其中包括在增加笔触权重时可能出现的削波，以及适应中心对齐笔触的更复杂的绘制过程。

幸运的是，此问题已在SVG 2.0中修复-笔触现在可以居中对齐，内部对齐和外部对齐。 不幸的是 ，似乎SVG 2.0仍然遥遥无期。我们希望Iconic将有助于激发人们对SVG的更多兴趣，并鼓励更快速的过程。