文章标签

在 Web 开发中使用 SVG 的优势是众所周知的。SVG 尺寸小，易于访问，可缩放且保持质量，并且可以进行动画处理。但是，也存在一定的学习曲线。例如……

我最喜欢的向网站添加图标的方法之一是将它们作为data URL背景图像添加到 CSS 中的伪元素（例如::after）。这种技术有几个优点

• 它们不需要任何额外的 HTTP 请求

有很多不同的方法可以使用 SVG。根据使用方式的不同，在不同状态或条件下（:hover、:active、:focus、类名更改等）重新着色 SVG 的策略也不同。…

我写过使用内联<svg图标可以创建最佳的图标系统。我仍然认为这是正确的。这是在页面上放置图标的最简单方法。无需网络请求，可完美地进行样式设置。

但是内联代码有…

Nicolas Gallagher

在 Twitter，我使用了此处描述的方法以多种不同格式发布公司的 SVG 图标库：优化的 SVG、纯 JavaScript 模块、React DOM 组件和 React Native 组件。

没有唯一正确的方法^©…

这是 Marco Hengstenberg 对可访问的 SVG 标记模式的精彩介绍。以下是理想示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

这篇文章是关于 CSS 强大功能的系列文章中的第一篇。

文章系列

1. 为 SVG 背景着色（本文）
2. 下拉菜单
3. 基于给定元素数量的逻辑样式

CSS 变得越来越强大，并且具有诸如…

当您使用一些内联<svg>并且您没有设置height和width，但您确实设置了viewBox时，这就是一个fitwigoo。我喜欢这个名字。

fatwigoo 的问题在于<svg>将…

仅仅内联 SVG似乎是最简单、最灵活的图标系统。但是，该<svg></svg>块可能有一个<title></title>，并且您可能出于各种原因在这两个元素上都应用 ID。…