正文 

当前位置： 首页 > 源码 >

移至 SVG 图标 - 如何将它们与代码分开？

     2023-03-06     214

关键词：

【中文标题】移至 SVG 图标 - 如何将它们与代码分开？【英文标题】：Moving to SVG icons - how to separate them from the code? 【发布时间】：2015-03-13 07:18:03 【问题描述】：

SVG 图标比字体图标有一些优势：它们可以缩放以适应可变大小的容器元素，并且理论上您可以更改各个路径的颜色。我也喜欢我可以在 Inkscape 中轻松制作它们的事实：P

但是如何在 CSS 文件中移动 SVG 以便它们可以在同一页面上重复使用，例如图标字体，并且仍然受益于这些优势？

背景属性支持 SVG，带有background: url(#svg_element)，但这意味着我必须将 SVG 放入 HTML 中：| 如果我把它作为“数据”字符串，我如何在同一个 css 文件中更改路径颜色？

【问题讨论】：

你也可以把is放在一个像svg_element.svg这样的带有anme的文件中，并像这样使用它 style="background: url(svg_element.svg)" 这与使用数据 url 字符串几乎相同，但每个图标都有一个额外的请求：P 你能解释一下，什么是“如何在同一个 css 文件中更改路径颜色”？ 使用“填充”和“描边”CSS 属性更改 SVG 图形的颜色 【参考方案1】：

但是如何移动 CSS 文件中的 SVG 以便它们可以在同一页面上重复使用，例如图标字体，并且仍然受益于这些优势？

带有 svg 模板

让我们创建一个 svg 模板。

模板 (html)

<svg   viewBox="0 0 100 100" class="hide">
    <circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>

它是一个模板，所以我们隐藏它。 （但仍在 DOM 中）

.hide display: none; //css

使用 (html)

<svg viewBox="0 0 100 100" class="circle-first">
    <use xlink:href="#circle-tmp" />
</svg>

这可以在页面的任何地方重复使用。

如何在同一个 css 文件中更改路径颜色？

简单，只需设置样式！

css

.circle-first 
    fill: #12bb34;

工作示例？ 给你：Fiddle

浏览器支持？不是 100% 确定，但所有大型浏览器都支持 svg：CanIUseIt

【讨论】：

好的，所以基本上所有的答案都表明不可能使用 svg 进行样式设置，至少现在还不行。我知道使用的东西，但这仍然无助于将图标移动到它们所属的位置 - 在 css 文件中:(【参考方案2】：

如需深入讨论，请查看在 SVG 上做了大量工作的 Sara Soueidan。 recent article/talk she gave 也可能有很多信息供您消化。

Chris Coyer 也有一些非常有用的话要说。

【讨论】：

【参考方案3】：

如果您使用 SVG 作为背景图像，则无法更改路径和填充颜色 (AFAIK)。但是，您可以使用白色 SVG 和背景颜色来创建 Metro 风格的图标。这正是jQuery Mobile theming system 所做的。

.icon 
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;

.icon-1 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");

.icon-bg-1 
  background-color: #800080;

.icon-bg-2 
  background-color: #DB7093;

.icon-bg-3 
  background-color: #CD853F;

.icon-bg-4 
  background-color: #B0E0E6;

<span class="icon icon-1 icon-bg-1"></span>
<span class="icon icon-1 icon-bg-2"></span>
<span class="icon icon-1 icon-bg-3"></span>
<span class="icon icon-1 icon-bg-4"></span>

另一种选择是使用彩色 SVG 并使用 CSS3 hue-rotate filter 更改 SVG 的颜色。此属性尚未得到广泛支持。

注意：色相旋转只影响“颜色”；黑色、白色和灰色不受影响。

.icon 
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #EEEEEE;

.icon-1 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");

.icon-hue-1 
  -webkit-filter: hue-rotate(0deg);
     -moz-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);

.icon-hue-2 
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);

.icon-hue-3 
  -webkit-filter: hue-rotate(180deg);
     -moz-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);

.icon-hue-4 
  -webkit-filter: hue-rotate(270deg);
     -moz-filter: hue-rotate(270deg);
          filter: hue-rotate(270deg);

<span class="icon icon-1 icon-hue-1"></span>
<span class="icon icon-1 icon-hue-2"></span>
<span class="icon icon-1 icon-hue-3"></span>
<span class="icon icon-1 icon-hue-4"></span>

【讨论】：

【参考方案4】：

为了保留 SVG 图标的优点，目前除了在 HTML 页面中包含 &lt;svg&gt; 之外别无选择。

Chris Coyier's article 描述了普遍接受的包容性最佳实践。是这样的：

    将您的 SVG 图标定义存储为 &lt;symbols&gt;:

    <svg id='my-icons'>
   <symbol id='icon-puppy'> <!-- puppy icon goes here --> </symbol>
   <symbol id='icon-kitty'> <!-- kitty icon goes here --> </symbol>
</svg>

    当需要使用图标时，参考图标定义：

    <svg class='icon'>
   <use xlink:href='#icon-puppy'/>
</svg>

This article 描述了如何将 SVG 文件动态地包含在 HTML 中。

【讨论】：

【参考方案5】：

看来你想远离来自html 的svg 文件的xml 内容 代码。

为了满足这一点，有两种方案可以将svg 文件嵌入html：

    使用&lt;object data="~/img/file.svg" type="image/svg+xml"&gt;&lt;/object&gt;元素，所以xml将 与html ==> 分开，结果视图将是 html 和 xml 的组合，可以用 css 设置样式 （也许是scoped 一个例如使用&lt;style scoped="scoped"&gt;&lt;/style&gt; 在目标页面上）。 使用&lt;img src="~/img/file.svg"/&gt;元素，所以xml会被分开 来自html ==> 的结果视图将只有html 和css 无法对 svg 文件的 xml 内容执行。

另一种使用svg 的方法是使用内联技术，比如使用&lt;svg&gt; 标签，这样你也可以为此使用内联样式表，但是你想在这里将xml 与html 分开：)

更多信息： Using SVG 和 SVG Styling with CSS。

【讨论】：

【参考方案6】：

我以前使用过 SVG，但没有专门使用 SVG 图标。但是，根据我所掌握的知识并环顾四周，这就是我想出的（在这种情况下，我可能没有完全理解您的问题，请发布更多问题）。

但是如何在 CSS 文件中移动 SVG 以便它们可以在同一页面上重复使用

但这意味着我必须将 SVG 放入 HTML

SVG 基本上是 XML，所以不完全确定您为什么不喜欢将 SVG 放在 HTML 文件中。如果您将 SVG 放在 HTML 文件中，您可以使用外部或内部 CSS 来设置 SVG 样式。这是一个 sample 来做这件事。

在 HTML 文件中：

<circle cx="100" cy="100" r="75" />

在 CSS 文件中：（在 HTML 文件中包含 CSS 文件）

<style>
circle 
  fill: deepPink;
  transition: fill .3s ease-out;


circle:hover 
  fill: #009966;

</style>

这是许多其他选项的第二个选项，使用&lt;img/&gt; 标记。这是一个article，它解释了如何使用&lt;img/&gt;tag 从单独的文件中使用SVG。这是伴随它的code。另请注意，它使用 jQuery 插件svginject。

这里有一些其他的options 可以让 SVG 远离 HTML 及其优点。

希望这会有所帮助。

【讨论】：

【参考方案7】：

您还可以深入研究evil-icons 项目。你会发现一些使用 svg 的巧妙方法。

他们最好的想法是将所有图标合并到一个文件“sprite.svg”中。您的每个 svg 图标都需要用带有 id 的 &lt;symbol&gt; 标签括起来。然后，您可以在需要时通过 xlink 访问它，如其他答案中所述。

通过加载整个 sprite.svg，您将获得加载时间和整洁度。

【讨论】：

如何在输入中添加 SVG 图标？

】如何在输入中添加SVG图标？【英文标题】：HowtoaddaSVGiconwithinaninput?【发布时间】：2017-04-1001:28:42【问题描述】：我需要在输入中放置图标以创建新用户。对于熟悉前端代码的人来说，这可能是一项非常容易的任务。然而我没有... 查看详情

Angular 4+：如何使用 svg 文件中的图标

】Angular4+：如何使用svg文件中的图标【英文标题】：Angular4+:Howtouseiconsfromsvgfile【发布时间】：2019-05-0309:08:29【问题描述】：我有一个包含图标集合的icon.svg文件。我想在我的应用中使用它们，因为我们会显示材质图标。知道如何... 查看详情

如何从PNG图像制作字体图标？

】如何从PNG图像制作字体图标？【英文标题】：Howtomakeafont-iconfromPNGimage?【发布时间】：2014-10-1911:39:28【问题描述】：目前我正在为我的图标使用.png图像。我想将它们转换为字体图标并改用它们。我正在做的是将图像转换为SVG，... 查看详情

将背景代码与 HTML 显示代码分开的好方法是啥？

...么？【发布时间】：2012-11-2915:12:32【问题描述】：这是我如何拥有我的文件以及它们做什么的粗略图片。index.php在开头显示开始的HTML标记并包括header.php（链接的d 查看详情

使用 SVG 图标时的设计和内容分离

】使用SVG图标时的设计和内容分离【英文标题】：SeparationofdesignandcontentwhenusingSVGicons【发布时间】：2016-05-3012:52:19【问题描述】：我在https://css-tricks.com/svg-sprites-use-better-icon-fonts/阅读了有关svg图标的信息但作者没有提到是否可以... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情

java示例代码_给定一个项目列表（不同类型），如何将它们分开，以便每个组只包含相同类型的项目

java示例代码_给定一个项目列表（不同类型），如何将它们分开，以便每个组只包含相同类型的项目 查看详情

如何将node js前端代码与后端代码分开？

】如何将nodejs前端代码与后端代码分开？【英文标题】：Howtoseparatenodejsfrontendcodefrombackendcode?【发布时间】：2020-11-0412:42:55【问题描述】：问题：我对nodejs还很陌生，发现将前端与后端分开非常困难。（我不完全理解这些概念）... 查看详情

将裁剪区域与非裁剪区域分开

】将裁剪区域与非裁剪区域分开【英文标题】：SeparateClippedAreafromNon-ClippedArea【发布时间】：2019-01-0901:17:19【问题描述】：我在SVG中嵌入了一张巨大的地图图像。SVG是交互式的，因此，如果用户单击任一路径（这两个路径都在地... 查看详情

如何将svg图标快速转换成字体图标？

　　今天遇到一个客户需要我将页面的图标做成字体图标，想想哎可能整的麻烦，不过想想这也是对项目的一个优化 (1.字体图标直接用color自由控制颜色；2.整合在一起，减少http请求等   PS:平时了解这些，就是麻... 查看详情

如何使用 React 组件在 UI 中显示 svg 图标（.svg 文件）？

】如何使用React组件在UI中显示svg图标（.svg文件）？【英文标题】：Howtodisplaysvgicons(.svgfiles)inUIusingReactComponent?【发布时间】：2017-07-0621:29:13【问题描述】：我在react上看到了很多svg库，但没有一个告诉我如何在react组件中导入svg... 查看详情

如何将svg图标添加到带有文本的按钮

】如何将svg图标添加到带有文本的按钮【英文标题】：Howtoaddsvgicontoabuttonwithatext【发布时间】：2018-10-0411:35:07【问题描述】：我有svg图标svgIcon的来源。我需要将此图标添加到按钮。它看起来和这个非常相似我试过了：css.btnborder:... 查看详情

您如何将测试数据与训练数据分开

】您如何将测试数据与训练数据分开【英文标题】：Howdoyoudivideyourtestdatafromtraindata【发布时间】：2022-01-1109:46:20【问题描述】：大家好，目前正在学习深度学习和机器学习我也在研究代码的同时阅读了一些github的解释但没有解释... 查看详情

如何制作带有矩形 SVG 图标的方形图标按钮

】如何制作带有矩形SVG图标的方形图标按钮【英文标题】：HowtoMakeSquareIconButtonswithRectangularSVGIconsInsideThem【发布时间】：2019-07-0316:30:15【问题描述】：我正在尝试使用React、样式组件和SVG制作我自己的图标按钮。我的图标通常是... 查看详情

如何重叠两个 SVG 图像？

】如何重叠两个SVG图像？【英文标题】：HowtooverlaptwoSVGimages?【发布时间】：2016-03-2714:37:19【问题描述】：所以我有两个我在Photoshop中创建的SVG图像。这些图像具有所有正确的尺寸，可以彼此对齐，但是，当我将它们导出时，它... 查看详情

如果它们是分开的，如何部署后端和前端项目？

】如果它们是分开的，如何部署后端和前端项目？【英文标题】：Howtodeploybackendandfrontendprojectsiftheyareseparate?【发布时间】：2016-05-2812:33:44【问题描述】：我正在与一个小团队一起开发一个Web应用程序，经过一番研究和研究，我... 查看详情

如何将视图与控制器分开？

】如何将视图与控制器分开？【英文标题】：Howtoseparateaviewfromacontroller?【发布时间】：2012-01-1100:02:08【问题描述】：我的一位同事在javascript中查看了我的代码，并告诉我不应该在控制器中使用视图。相反，我应该使用调解员。... 查看详情