Why does a task on svg sprites minify the file?

Question

JavaScript

Get a compressed version of a file

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 22 21" id="favor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.103.696C13.173.172 14.106 0 15.553 0 19.258.015 22 3.14 22 7.12c0 3.038-1.694 5.972-4.849 8.81-1.656 1.49-3.77 2.963-5.285 3.747l-.866.45-.866-.45c-1.515-.784-3.63-2.258-5.285-3.747C1.694 13.092 0 10.158 0 7.12 0 3.097 2.716 0 6.455 0 7.85 0 8.83.189 9.922.728a6.3 6.3 0 011.068.668 6.166 6.166 0 011.113-.7zm3.71 13.747C18.587 11.949 20 9.5 20 7.12c0-2.931-1.912-5.11-4.45-5.12-1.163 0-1.804.118-2.568.492a4.18 4.18 0 00-1.25.936l-.73.79-.736-.784a4.265 4.265 0 00-1.23-.913C8.247 2.13 7.563 2 6.454 2 3.884 2 2 4.148 2 7.12c0 2.38 1.414 4.83 4.186 7.323 1.512 1.36 3.455 2.718 4.814 3.43 1.359-.712 3.302-2.07 4.814-3.43z"/></symbol><symbol viewBox="0 0 20 20" id="inst-icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 0h8a6 6 0 016 6v8a6 6 0 01-6 6H6a6 6 0 01-6-6V6a6 6 0 016-6zm0 2a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V6a4 4 0 00-4-4H6zm4 13a5 5 0 110-10 5 5 0 010 10zm0-2a3 3 0 100-6 3 3 0 000 6zm5-7a1 1 0 110-2 1 1 0 010 2z"/></symbol><symbol viewBox="0 0 27 27" id="vk-icon" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M13.663 21.938c3.906 0 2.513-2.473 2.815-3.184-.005-.531-.01-1.042.009-1.353.247.07.831.366 2.037 1.538 1.862 1.88 2.338 2.998 3.842 2.998h2.769c.877 0 1.334-.363 1.562-.668.22-.294.437-.812.2-1.617-.617-1.94-4.22-5.29-4.443-5.642a3.2 3.2 0 01.116-.197h-.003c.712-.94 3.425-5.005 3.824-6.632a.022.022 0 00.003-.01c.216-.742.018-1.223-.187-1.495-.308-.408-.799-.614-1.462-.614h-2.768c-.927 0-1.63.467-1.986 1.319-.595 1.513-2.267 4.625-3.52 5.726a72.124 72.124 0 01.008-3.637c.04-1.727.171-3.408-1.621-3.408h-4.352c-1.122 0-2.197 1.227-1.034 2.683 1.018 1.275.366 1.986.585 5.526-.854-.917-2.376-3.394-3.451-6.558-.301-.856-.758-1.65-2.044-1.65H1.793C.671 5.064 0 5.677 0 6.702c0 2.301 5.095 15.236 13.663 15.236zM4.562 6.75c.244 0 .269 0 .45.514 1.101 3.244 3.572 8.043 5.376 8.043 1.356 0 1.356-1.39 1.356-1.913l-.001-4.164c-.075-1.378-.576-2.065-.906-2.481l3.947.005c.002.019-.023 4.606.01 5.718 0 1.578 1.254 2.483 3.21.503 2.065-2.33 3.492-5.813 3.55-5.955.084-.202.157-.271.423-.271h2.78c-.001.003-.001.007-.003.01-.253 1.181-2.751 4.946-3.587 6.114a.976.976 0 00-.038.057c-.368.6-.668 1.264.05 2.198h.001c.066.079.236.263.483.52.77.794 3.409 3.51 3.643 4.59-.155.024-.324.006-2.94.012-.557 0-.992-.832-2.654-2.509-1.494-1.453-2.463-2.047-3.347-2.047-1.714 0-1.59 1.392-1.573 3.075.005 1.824-.006 1.247.006 1.362-.1.04-.387.118-1.135.118-7.138 0-11.787-11.33-11.965-13.495.062-.006.913-.003 2.864-.004z"/></g></symbol><symbol viewBox="0 0 22 22" id="whatsup-icon" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M16.048 13.115l-.008.069c-2.016-1.005-2.227-1.139-2.487-.748-.18.27-.707.883-.865 1.065-.16.178-.32.192-.593.068-.275-.137-1.157-.426-2.202-1.36-.814-.73-1.36-1.623-1.522-1.898-.268-.464.293-.53.805-1.498.092-.193.045-.344-.023-.48-.069-.138-.616-1.486-.845-2.023-.22-.535-.447-.467-.616-.467-.528-.046-.914-.039-1.254.315-1.48 1.626-1.107 3.304.16 5.088 2.487 3.256 3.813 3.855 6.236 4.688.655.208 1.252.178 1.724.11.526-.083 1.62-.66 1.848-1.307.234-.646.234-1.182.165-1.306-.068-.124-.248-.192-.523-.316z"/><path d="M18.81 3.161C11.762-3.653.097 1.289.093 10.901c0 1.922.503 3.795 1.462 5.45L0 21.999l5.807-1.514C13.053 24.4 21.997 19.202 22 10.907a10.81 10.81 0 00-3.204-7.71l.014-.036zm1.359 7.716c-.006 6.996-7.687 11.366-13.762 7.795l-.33-.196-3.437.893.921-3.34-.219-.345c-3.78-6.017.563-13.882 7.724-13.882 2.433 0 4.716.948 6.436 2.667a8.972 8.972 0 012.667 6.408z"/></g></symbol></svg>

I would like it like this

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 22 21" id="favor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
            d="M12.103.696C13.173.172 14.106 0 15.553 0 19.258.015 22 3.14 22 7.12c0 3.038-1.694 5.972-4.849 8.81-1.656 1.49-3.77 2.963-5.285 3.747l-.866.45-.866-.45c-1.515-.784-3.63-2.258-5.285-3.747C1.694 13.092 0 10.158 0 7.12 0 3.097 2.716 0 6.455 0 7.85 0 8.83.189 9.922.728a6.3 6.3 0 011.068.668 6.166 6.166 0 011.113-.7zm3.71 13.747C18.587 11.949 20 9.5 20 7.12c0-2.931-1.912-5.11-4.45-5.12-1.163 0-1.804.118-2.568.492a4.18 4.18 0 00-1.25.936l-.73.79-.736-.784a4.265 4.265 0 00-1.23-.913C8.247 2.13 7.563 2 6.454 2 3.884 2 2 4.148 2 7.12c0 2.38 1.414 4.83 4.186 7.323 1.512 1.36 3.455 2.718 4.814 3.43 1.359-.712 3.302-2.07 4.814-3.43z" />
    </symbol>
    <symbol viewBox="0 0 20 20" id="inst-icon" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
            d="M6 0h8a6 6 0 016 6v8a6 6 0 01-6 6H6a6 6 0 01-6-6V6a6 6 0 016-6zm0 2a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V6a4 4 0 00-4-4H6zm4 13a5 5 0 110-10 5 5 0 010 10zm0-2a3 3 0 100-6 3 3 0 000 6zm5-7a1 1 0 110-2 1 1 0 010 2z" />
    </symbol>
    <symbol viewBox="0 0 27 27" id="vk-icon" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#cclip0)">
            <path
                d="M13.663 21.938c3.906 0 2.513-2.473 2.815-3.184-.005-.531-.01-1.042.009-1.353.247.07.831.366 2.037 1.538 1.862 1.88 2.338 2.998 3.842 2.998h2.769c.877 0 1.334-.363 1.562-.668.22-.294.437-.812.2-1.617-.617-1.94-4.22-5.29-4.443-5.642a3.2 3.2 0 01.116-.197h-.003c.712-.94 3.425-5.005 3.824-6.632a.022.022 0 00.003-.01c.216-.742.018-1.223-.187-1.495-.308-.408-.799-.614-1.462-.614h-2.768c-.927 0-1.63.467-1.986 1.319-.595 1.513-2.267 4.625-3.52 5.726a72.124 72.124 0 01.008-3.637c.04-1.727.171-3.408-1.621-3.408h-4.352c-1.122 0-2.197 1.227-1.034 2.683 1.018 1.275.366 1.986.585 5.526-.854-.917-2.376-3.394-3.451-6.558-.301-.856-.758-1.65-2.044-1.65H1.793C.671 5.064 0 5.677 0 6.702c0 2.301 5.095 15.236 13.663 15.236zM4.562 6.75c.244 0 .269 0 .45.514 1.101 3.244 3.572 8.043 5.376 8.043 1.356 0 1.356-1.39 1.356-1.913l-.001-4.164c-.075-1.378-.576-2.065-.906-2.481l3.947.005c.002.019-.023 4.606.01 5.718 0 1.578 1.254 2.483 3.21.503 2.065-2.33 3.492-5.813 3.55-5.955.084-.202.157-.271.423-.271h2.78c-.001.003-.001.007-.003.01-.253 1.181-2.751 4.946-3.587 6.114a.976.976 0 00-.038.057c-.368.6-.668 1.264.05 2.198h.001c.066.079.236.263.483.52.77.794 3.409 3.51 3.643 4.59-.155.024-.324.006-2.94.012-.557 0-.992-.832-2.654-2.509-1.494-1.453-2.463-2.047-3.347-2.047-1.714 0-1.59 1.392-1.573 3.075.005 1.824-.006 1.247.006 1.362-.1.04-.387.118-1.135.118-7.138 0-11.787-11.33-11.965-13.495.062-.006.913-.003 2.864-.004z" />
        </g>
        <defs>
            <clipPath id="cclip0">
                <path d="M0 0h27v27H0z" />
            </clipPath>
        </defs>
    </symbol>
    <symbol viewBox="0 0 22 22" id="whatsup-icon" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#dclip0)">
            <path
                d="M16.048 13.115l-.008.069c-2.016-1.005-2.227-1.139-2.487-.748-.18.27-.707.883-.865 1.065-.16.178-.32.192-.593.068-.275-.137-1.157-.426-2.202-1.36-.814-.73-1.36-1.623-1.522-1.898-.268-.464.293-.53.805-1.498.092-.193.045-.344-.023-.48-.069-.138-.616-1.486-.845-2.023-.22-.535-.447-.467-.616-.467-.528-.046-.914-.039-1.254.315-1.48 1.626-1.107 3.304.16 5.088 2.487 3.256 3.813 3.855 6.236 4.688.655.208 1.252.178 1.724.11.526-.083 1.62-.66 1.848-1.307.234-.646.234-1.182.165-1.306-.068-.124-.248-.192-.523-.316z" />
            <path
                d="M18.81 3.161C11.762-3.653.097 1.289.093 10.901c0 1.922.503 3.795 1.462 5.45L0 21.999l5.807-1.514C13.053 24.4 21.997 19.202 22 10.907a10.81 10.81 0 00-3.204-7.71l.014-.036zm1.359 7.716c-.006 6.996-7.687 11.366-13.762 7.795l-.33-.196-3.437.893.921-3.34-.219-.345c-3.78-6.017.563-13.882 7.724-13.882 2.433 0 4.716.948 6.436 2.667a8.972 8.972 0 012.667 6.408z" />
        </g>
        <defs>
            <clipPath id="dclip0">
                <path d="M0 0h22v22H0z" />
            </clipPath>
        </defs>
    </symbol>
</svg>

Task code

module.exports = function () {

    $.gulp.task('svg', function () {
        return $.gulp.src('src/static/img/svg/*.svg')
            // minify svg
            .pipe($.gp.svgmin({
                js2svg: {
                    pretty: true
                }
            }))
            // remove all fill, style and stroke declarations in out shapes
            .pipe($.gp.cheerio({
                run: function ($) {
                    $('[fill]').removeAttr('fill');
                    $('[stroke]').removeAttr('stroke');
                    $('[style]').removeAttr('style');
                },
                parserOptions: {
                    xmlMode: true
                }
            }))
            // cheerio plugin create unnecessary string '>', so replace it.
            .pipe($.gp.replace('>', '>'))
            // build svg sprite
            .pipe($.gp.svgSprite({
                mode: {
                    symbol: {
                        sprite: "../sprite.svg",
                    }
                }
            }))
            .pipe($.gulp.dest('build/img/svg/'));
    });
}

Answer 1

Add after the sprite formation a module for formatting html / xml, like this

Answer 2

Am I the only one who saw the comment in the code as soon as I opened the question?
// minify svg
.pipe($.gp.svgmin({
js2svg: {
pretty: true
}
}))
What's the catch?) Delete it and that's it.
But I would leave. If you need to format nice SVG to look, use CTRL+ALT+L in phpStorm IDE)