问题标签 [svg-sprite]

svg-sprite 在我的项目中生成图标。但是我有一个配置问题。我想更改 scss 文件中的导入路径，因为我使用单独的任务来编译 scss。我已经将 svg-sprite 配置设置为：

当它构建和编译 scss 时，它会尝试从

但我想要的是 url 是 '../imgs/icons-2ccc073d.svg 有什么帮助吗？谢谢

这是我的用例：

我有一个源文件夹，其图标“收藏”分为文件夹，即

现在，我想将所有这些图标导出到带有 gulp -svg-sprite 的SVG spritesheets到这个结构中：

现在，我已经知道如何输出带有所有图标的 SVG spritesheet，但我不知道如何将文件夹参数 ( icons-{folder}.svg) 传递给 gulp-svg-sprite。

这是我当前的 gulp 任务：

任何人都知道一些方法来做到这一点？

尽管我使用 icomoon 生成了 SVG，但为了提供软可用性，我为它创建了一个组件，并意识到在此之前这是足够好的实践。一些图标只是变成空白。而且我仍然找不到导致这种行为的原因。我已经调查了 Stack Overflow 上的所有问题（不仅如此），但没有找到任何解决我的问题的解决方案。

我在 index.html 中预取了 symbol-defs.svg（symbol-defs.svg 的大小 ~ 200kb）：

结果，我得到了这个：

大多数图标的空白空间。

图标组件：

图标组件 HTML：

用法：

更新：

此问题仅在开发模式下的prod模式下出现，它表现良好。

我正在使用 SVG 图标（来自 IcoMoon），问题是我在本地工作时看不到图标，但是当我在线上传页面时它工作正常。

我没有使用任何本地服务器。它是一个纯 HTML 文件。我想知道如何解决这个问题？

谢谢你

我有一个网站。文件结构如下：
-index.html
-imgs
--sprite.svg

当我在 vscode 中使用 live-server 在端口上打开站点时，会出现 svg。

但是当我直接从文件中打开它时，它并没有出现。

index.html中的svg代码如下：

我不明白原因？

我最近将我网站上的所有图标都切换为 SVG 图标/图像。我从一个精灵文件中提供所有的 SVG。我正在使用 Chrome Dev Tools Performance 来尝试优化资源的加载。看到这个 SVG 文件的加载总共需要 10.61 秒，我感到非常惊讶。“网络传输”耗时 141.71 毫秒，“资源加载”耗时 10.47 秒。从这张图来看，资源加载似乎也阻塞了很多其他的事情。完全披露的是，在此测试期间，我正在节流 CPU 以优化最坏情况下的性能。

但是我不明白这么小的文件如何需要 10.47 秒才能加载资源？

SVG 文件详细信息：
未压缩大小：51,183 字节
文件路径：/web_root/images/svg/all.svg
文件布局（文件中大约有 20 个左右的符号）：

我对这个精灵做错了吗？我是否以错误的方式创建它？我是否在 HTML 标记中以不正确的方式使用/注入它？这个文件很小，图标/符号也很少，我不敢相信即使在受限制的 CPU 上也要花这么长时间来“资源加载”，除非我做的事情非常不正确。

任何建议将不胜感激！提前致谢！

我有一个包含多个图像的 SVG 精灵文件。出于测试目的，我将其缩小到单个图像。

当我将图像声明为 html 正文中的实例并引用 sprite 文件中的图像 id 时，图像会正确显示。这是我对 sprite 文件的正确性和可用性的测试。

当我在 css 部分中将相同的 url 声明为背景图像时 - 它失败了。当我引用另一个 svg 文件（此处注释掉）时，该文件不是作为精灵的图像 - 它运行良好并产生图像中显示的结果。这是我对 css 声明正确性的测试。

我在这里错过了什么？为什么它不起作用？

我已经在 Codepen 中看到了很多这样的例子。谢谢。

我在 css 中测试了有无 viewBox 声明。没有效果。

这是从非精灵 svg 文件中出来的背景的样子。

我省略了 svg sprite 文件的内容，因为它运行良好。

这是我的代码：

这是 SVG 文件：

我正在尝试在 HTML 中插入一个 SVG 图标以供以后使用，但是当我通过 <use> 引用它时，它不会出现在网页上。我复制图标的 SVG 代码并将其插入到 html 文件中。然后我将图标的路径移动到一个单独的 .svg 文件。当我稍后引用它时，它不会显示出来。这是我的学习任务，所以我应该使用这个确切的原则和标签：<defs> <g> 和 <use>。代码的第一部分是 HTML，第二部分是一个单独的 .svg 文件。

我有一个有效的 Gulp 脚本，我用它来创建我的 SVG 精灵以及一个预览页面。但现在我想丰富预览页面，更准确地说是其中的每个图标，以及我在单独的 json 文件中拥有的信息。但我不知道如何做到这一点。

它应该看起来像这样：

但我不知道我是否可以访问正在创建的预览页面。如果有人有完全不同的想法，我对任何事情都持开放态度。

在紧急情况下，我可以编写一个 C# 控制台应用程序，在创建精灵和预览页面后，解析和编辑后一个文件。不过我不认为这很好，因为我想纯粹用 Gulp 创建它。

我曾经使用SVG Spritemap Webpack Plugin来自动编译 svg sprite。

我的插件配置看起来像这样

编译后我有一个带有 svg 的精灵文件

在这里，我尝试在 Vue 组件中使用片段wave到.scss文件中 component.scss

但是网页上的fragment没有被渲染，因为所有的fragment都是从sprite中渲染出来的。如果我使用这样的背景样式

万事皆安。但这对我的项目没有用处。