Sprite SVG | Performance Web I: otimizando o front-end

Olá professor,

tentei automatizar o processo de sprite através do gulp-svg-sprites, porem não funcionou muito bem para os logos.

Olha o código... fiz esta tarefa no gulp

gulp.task("sprite-svg", function(){
    return gulp.src("site/assets/img/*.svg")
        .pipe(svgSprite({
            mode: "symbols"
        }))
        .pipe(gulp.dest("dist/assets/img"));
});

Ele me gerou um código assim... (coloquei o exemplo de duas imagens)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">

<symbol id="busca" viewBox="0 0 17 17">
    <path d="M16.533 16.533a1.597 1.597 0 0 1-2.26 0l-2.816-2.818A7.392 7.392 0 0 1 7.45 14.9a7.45 7.45 0 1 1 7.45-7.45 7.4 7.4 0 0 1-1.186 4.007l2.818 2.818a1.596 1.596 0 0 1 0 2.257zM7.45 2.13a5.322 5.322 0 1 0 0 10.642 5.322 5.322 0 0 0 0-10.643z" fill="#FBCF36"></path>
</symbol>

<symbol id="logo-alura" viewBox="0 0 178 80">
    <path d="M46.53 0v79.1h9.2V0h-9.2zm84.3 21.1c-4.5.1-8.5.8-10.9 1.9-2.5 1.1-4.3 2.3-5.6 3.8-2.167 2.586-2.58 4.822-2.7 7.8v44.5h9.3V36.4c.05-3.45 1.89-5 4.4-6.1 2.6-1.2 8.1-.9 9-.9l2.1-8c-1-.1-4.3-.3-5.6-.3zm-112.2.2c-3.3 0-6.1.3-8.4 1-2.3.7-4.3 1.6-5.8 2.8-1.5 1.2-2.6 2.6-3.3 4.2-1.07 2.734-1 4.873-1 7.7h9.3c0-2.1.6-3.9 1.9-5.4 1.3-1.5 3.7-2.2 7.4-2.2 1.8 0 3.3.2 4.5.6 2.106.66 3.4 1.94 4.4 3.7.564 2.34.62 4.873-.1 6.6-.71 1.678-1.695 2.375-3.6 3.4-3.844 1.404-7.667 2.75-11.2 4-1.7.6-3.2 1.1-4.5 1.5-2.6.9-4.6 2.5-6.1 4.8-1.4 2.3-2.1 4.8-2.1 7.5-.05 3.19-.136 6.884.7 9.6.5 1.6 1.4 3 2.8 4.3 1.4 1.3 3.3 2.4 5.7 3.3 2.4.9 5.5 1.3 9.4 1.3 3.9 0 7-.4 9.4-1.3 2.4-.9 4.3-2 5.7-3.3 2.44-2.13 3.405-5.318 3.5-8.6V34.5c-.1-3.8-1.5-6.9-4.5-9.4s-7.7-3.8-14.1-3.8zm140.6 0c-3.3 0-6.1.3-8.4 1-2.3.7-4.3 1.6-5.8 2.8-1.5 1.2-2.6 2.6-3.3 4.2-1.07 2.734-1 4.873-1 7.7h9.3c0-2.1.6-3.9 1.9-5.4 1.3-1.5 3.7-2.2 7.4-2.2 1.8 0 3.3.2 4.5.6 2.106.66 3.4 1.94 4.4 3.7.563 2.34.62 4.873-.1 6.6-.71 1.678-1.69 2.375-3.6 3.4-3.84 1.404-7.667 2.75-11.2 4-1.7.6-3.2 1.1-4.5 1.5-2.6.9-4.6 2.5-6.1 4.8-1.4 2.3-2.1 4.8-2.1 7.5-.054 3.19-.136 6.884.7 9.6.5 1.6 1.4 3 2.8 4.3 1.4 1.3 3.3 2.4 5.7 3.3 2.4.9 5.5 1.3 9.4 1.3 3.9 0 7-.4 9.4-1.3 2.4-.9 4.3-2 5.7-3.3 2.44-2.13 3.404-5.318 3.5-8.6V34.5c-.1-3.8-1.5-6.9-4.5-9.4s-7.7-3.8-14.1-3.8zm-94.1.8v44.6c.046 2.91.61 5.426 2.7 7.8 1.2 1.5 3.1 2.7 5.6 3.8 2.5 1.1 5.9 1.6 10.2 1.6 4.4 0 7.8-.5 10.2-1.6 2.5-1.1 4.3-2.3 5.6-3.8 2.052-2.406 2.686-4.94 2.7-7.9V22.1h-9.2l.1 41.7c-.046 1-.21 2.338-.4 3.3-.68 1.99-2.47 3.113-4.1 3.8-1.99.922-7.85.846-9.9 0-1.707-.652-3.355-1.907-3.9-3.9-.224-1.085-.28-2.14-.4-3.2V22.1h-9.2zm-37.3 28.1l.2 13.4c0 2.6-.7 4.6-2 6.1-1.3 1.4-3.8 2.1-7.4 2.1-3.6 0-6-.7-7.3-2-1.3-1.3-2-3.4-2-6.2.05-3.652 2.064-5.677 5.1-7.1 3.595-1.3 7.43-2.607 10.7-3.9 1.166-.363 2.44-1.044 2.7-2.4zm140.6 0l.2 13.4c0 2.6-.7 4.6-2 6.1-1.3 1.4-3.8 2.1-7.4 2.1-3.6 0-6-.7-7.3-2-1.3-1.3-2-3.4-2-6.2.05-3.652 2.066-5.677 5.1-7.1 3.6-1.3 7.43-2.607 10.7-3.9 1.165-.363 2.44-1.044 2.7-2.4z" fill="#191919"></path>
</symbol>

</svg>

colocando no html, o icone de busca se encaixa perfeitamente.

<a href="/busca" class="header-busca">
    <svg class="header-busca-icone"><use xlink:href="assets/img/svg/simbols.svg#busca"></use></svg>
    <!-- <img class="header-busca-icone" src="assets/img/busca.svg"> -->
</a>

porem os logos ficam com tamanho muito grande, pricipalmente na altura, e tive que arrumar no css de cada logo.

<a class="header-logo" href=".">
    <svg><use xlink:href="assets/img/svg/simbols.svg#logo-alura"></use></svg>
    <!-- <img src="assets/img/logo-alura.svg" alt="Alura"> -->
</a>

imagens de como ficou na pratica.

com tag img -> https://screenshot.net/pt/d8peof8

com svg -> https://screenshot.net/pt/462rnfg

não estou conseguindo identificar o problema, com o pouco que mostrei aqui, da pra ver alguma dica?

Mergulhe em programação