Direto ao ponto!

Para otimizar um SVG um site muito útil nesses momentos é o SVGOMG, nele você pode configurar de sua maneira para a melhor otimização que desejar. Vale a pena conferir! Abaixo segue um pouco mais caso esse assunto seja novo para você.

O que é SGV?

Para quem trabalha com desenvolvimento web é comum ter alguns arquivos no formato SVG (Scalable Vector Graphics), eles são um formato de arquivo vetorial, isso quer dizer que você pode diminuir ou aumentar o seu tamanho sem perder a qualidade. Um exemplo disso é o logo do TabNews, Sim! Aquela pastinha ali no canto esquerdo superior é um SGV e você pode clicar com o botão direito do mouse em cima dele e inpecionar o elemento e você vai achar uma tag <svg> igual que está logo abaixo.

<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.9999 4C20.6568 4 21.9999 5.34315 21.9999 7V17C21.9999 18.6569 20.6568 20 18.9999 20H4.99994C3.34308 20 1.99994 18.6569 1.99994 17V7C1.99994 5.34315 3.34308 4 4.99994 4H18.9999ZM19.9999 9.62479H13C12.4478 9.62479 11.8442 9.20507 11.652 8.68732L10.6542 6H4.99994C4.44765 6 3.99994 6.44772 3.99994 7V17C3.99994 17.5523 4.44765 18 4.99994 18H18.9999C19.5522 18 19.9999 17.5523 19.9999 17V9.62479Z" fill="currentColor"></path></svg>

Otimizando um SVG

Para um exemplo prático vamos baixar um SVG da internet, o escolhido foi um logo do Github, abaixo vemos como o SVG baixado da internet é bem grande comparado ao do TabNews.

<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -3.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">

<g fill="#161614">

<path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/>

<path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/>

</g>

</svg>

Para otimizar podemos utilizar o site SVGOMG, nele você pode tanto buscar um SVG do seu computador, como arrastar um SVG do seu computador para o site ou até mesmo copiar e colar o markup que é toda a tag <svg>. Com isso você consegue mexer em algumas configurações que podem diminuir o tamanho e otimizar, legal né?

Você poderá baixar seu SVG otimizado ou ir no menu acima e clicar em Markup para copiar toda a estrutura de como ele ficou, veja abaixo a diferença.

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" preserveAspectRatio="xMinYMin meet" viewBox="0 -3.5 256 256"><g fill="#161614"><path d="M127.5 0a127.5 127.5 0 0 0-40.3 248.5c6.4 1.2 8.7-2.8 8.7-6.1l-.2-23.8c-35.4 7.7-43-15-43-15-5.7-14.8-14-18.7-14-18.7-11.6-7.9.8-7.7.8-7.7 12.8.9 19.5 13.1 19.5 13.1C70.4 209.8 89 204.2 96.1 201a27.2 27.2 0 0 1 8.1-17c-28.3-3.3-58-14.2-58-63 0-14 5-25.3 13-34.3A45.8 45.8 0 0 1 60.6 53s10.7-3.4 35 13a122.1 122.1 0 0 1 64 0c24.3-16.4 35-13 35-13 7 17.5 2.5 30.5 1.2 33.7 8.2 9 13.1 20.3 13.1 34.2 0 49-29.8 59.8-58.2 63 4.6 4 8.7 11.7 8.7 23.6l-.2 35c0 3.4 2.3 7.3 8.8 6A127.5 127.5 0 0 0 127.5 0"/><path d="M47.8 181.6c-.3.7-1.3.9-2.2.4-1-.4-1.5-1.3-1.2-1.9.3-.6 1.3-.8 2.2-.4 1 .4 1.5 1.3 1.2 2m6.2 5.5c-.6.6-1.8.3-2.6-.6-.8-.8-1-2-.3-2.6.6-.6 1.7-.3 2.6.6.8.9 1 2 .3 2.6m4.3 7.2c-.8.5-2 0-2.8-1.1-.8-1.1-.8-2.5 0-3 .8-.6 2-.1 2.8 1 .8 1.2.8 2.5 0 3m7.3 8.4c-.7.8-2.2.5-3.3-.5-1-1-1.4-2.5-.7-3.3.7-.7 2.2-.5 3.3.5 1.1 1 1.5 2.5.7 3.3m9.4 2.8c-.3 1-1.7 1.4-3.2 1-1.4-.4-2.4-1.6-2-2.6.2-1 1.7-1.5 3.1-1 1.5.4 2.4 1.6 2.1 2.6m10.7 1.2c0 1-1.2 1.9-2.7 2-1.5 0-2.7-.9-2.8-2 0-1 1.2-1.9 2.8-1.9 1.5 0 2.7.8 2.7 1.9m10.5-.4c.2 1-.8 2-2.3 2.3-1.5.3-2.9-.3-3-1.4-.3-1 .8-2 2.3-2.3 1.5-.3 2.8.3 3 1.4"/></g></svg>