个人中心
gpt4 book ai didi

svg - 内联 svg 与 svg Sprite 与多个外部文件

转载 作者：行者123 更新时间：2023-12-04 10:02:20 26 4
gpt4 key购买 nike

好的，所以我主要使用 Laravel 和 Vue js 构建一个 Web 应用程序。我尝试使用 https://github.com/JetBrains/svg-sprite-loader#installation但导出的 svg 显示为空白。

在继续之前的那种情况下，我开始想知道这是否真的值得，我不确定。

所以我的问题是，真正的区别是什么？

假设我们不能使用图标字体，因为我们想要多色 svgs。

  • 是否值得尝试使用包将 svgs 合并到 sprite 中然后使用它，或者它与 http/2 没有真正的区别？
  • 考虑到文件大小和数据使用情况，是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面？
  • 内联 svgs 也是一种选择，但这会显着增加 dom 大小。

    • 所以我想知道......有没有人尝试过所有这些技术并找出最好和性能最好的一种，以及它们的真正区别是什么。

    最后，如果有人能给我一些关于为什么我的 svg sprite 显示空白的意见，那将是一个巨大的奖励:P

    我已经在我的 webpack.mix 中配置了上面的包，如下所示: 

    const mix = require('laravel-mix');
    const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .webpackConfig({
            module: {
                rules: [
                    {
                        test: /resources\/images\/.*\.svg$/,
                        loader: 'svg-sprite-loader',
                        exclude: /node_modules/,
                        options: {
                            extract: true,
                            spriteFilename: 'icons-sprite.svg',
                            publicPath: 'images/sprites/',
                        }
                    }
                ]
            },
            plugins: [
                new SpriteLoaderPlugin({ plainSprite: true}) // Sprites Plugin.
            ],
        })
        .version()

    最佳答案

    Is it even worth trying to use a package to merge the svgs into a sprite and then use it, or does it not really make a difference with http/2?



    这确实很重要，但取决于您的用例。您必须在 上进行测试生产自己的环境。当然 HTTP/2 总是更好

    Considering file size and data usage, is it worth trying to minimise this aspect using sprite instead of multiple external svg files?



    与 1.. 用例相同的答案。归结为估计(因为您无法计算)浏览器 A 必须等待新内容的时间。

    GZip 是数据使用的最重要因素。

    在慢速 3G 连接上，为(大)文件添加您自己的 LZMA 压缩可能会很有趣。

    Inlining the svgs is also an option but this would dramatically increase the dom size.



    您仍然在发送相同的字节，只是在不同的文件中，甚至可能会更好，因为 GZip 可以处理一个文件中的所有内容。

    一般来说，我的建议是不要担心性能；这不是 OR-OR 决定。

    从单独的文件开始，只有在遇到性能问题时才重新考虑。
    如果您预计会出现性能问题，也许可以考虑重构进行开发。

    替代方案:创建 SVG 客户端

    我又进了一步。成为一个实验，我可以去多小/多快:
  • 将所有 SVG 重做字符串表示法 <circle cx='20' cy='20' r='5'/>变成 c:20,20,5
  • 在一个JS文件中使用
  • 解析字符串 客户侧面
  • 创建 SVG
  • 用于 DataURI IMG src

    • 这得到了 550 KB 在 52 个 SVG 文件中降至 16 KB 在 一 自定义元素文件
  • https://cardmeister.github.io/
  • https://github.com/cardmeister/cardmeister.github.io



    • 而 GZip 是一个重要因素!

    GZip 在将服务器端文件发送到客户端之前对其进行压缩。

    是的，缩小很重要，但缩小会对 GZip 压缩产生负面影响。

    很久以前的好书:

    https://encode.su/threads/1889-gzthermal-pseudo-thermal-view-of-Gzip-Deflate-compression-efficiency

    它解释了为什么 <!DOCTYPE HTML>坏了，还有 <!doctype html>很好。

    这同样适用于 SVG 文件: <circle ...优于 <CIRCLE ...
    和
    <circle fill='...' cx='20' .../>优于 <circle cx='20' ... fill='...'/>
    因为 GZip 找到了更长的 重复 图案 <circle fill='

    关于svg - 内联 svg 与 svg Sprite 与多个外部文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61763277/

    26 4 0
    文章推荐： azure - 如何将 Strapi 部署到 Azure？
    文章推荐： spring - Spring Security 上的组和 acl
    文章推荐： azure - VSTS - 如何将 Azure Key Vault 检索到的客户端证书转换为 Powershell X509Certificate 实例
    文章推荐： unity3d - 如何创建没有轮廓的 slider ？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com