Função para trocar images SVG pela tag SVG inline no WordPress

A quantidade de imagens numa página pode impactar a velocidade de carregamento deixando o site mais lento. Uma das melhores formas de diminuir este impacto é reduzir o número de requisições ao adicionar as imagens no próprio corpo da página. Isso também contribui para melhorar o SEO do site e, da mesma forma, aumentar a pontuação no PageSpeed Insights, um sistema do Google que mede a qualidade de uma página web.

Mas como a SVG inline funciona?

Segue abaixo um exemplo de imagem que pode ser otimizada:

<p>
  <img src="phone.svg" alt="Logo do Site">
</p>

O trecho de código acima pode ser trocado pelo código SVG original:

<p>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z"/>
  </svg>
</p>

Ao fazer isso, colocamos o código que estava dentro do arquivo phone.svg para ser exibido diretamente na página. Isso faz diminuir o número de requisições e, consequentemente, aumentar a velocidade de carregamento da página.

Função para trocar images SVG no WordPress

Inicialmente, você não precisa trocar as imagens uma a uma. Para facilitar esse processo, eu elaborei uma função para trocar automaticamente cada imagem SVG da página pela sua respectiva tag SVG inline:

<?php
function wp_svg_inline_replacer(	&#36;matches) {
      &#36;src = 	&#36;matches[1];
      &#36;parts = explode('/wp-content/', 	&#36;src);

      &#36;svg = file_get_contents(WP_CONTENT_DIR . '/' . 	&#36;parts[1]);
      &#36;svg = preg_replace('/<\?xml.*\?>/', '', 	&#36;svg);
      &#36;svg = preg_replace('/<\!DOCTYPE[^>]*>/', '', 	&#36;svg);

  return trim(	&#36;svg);
}

function wp_svg_inline_filter(	&#36;content) {
  global 	&#36;post;
      &#36;pattern = "/<img.*src=\"(.*\.svg)\"(.*) \/>/i";
      &#36;content = preg_replace_callback(	&#36;pattern, 'wp_svg_inline_replacer', 	&#36;content);
  return 	&#36;content;
}

add_filter('the_content','wp_svg_inline_filter');
add_filter('get_custom_logo','wp_svg_inline_filter');

Dessa forma, a função irá trocar cada tag <img /> pelo seu respectivo código SVG de acordo com o arquivo SVG que foi citado no atributo src da tag. Essa função está vinculada aos filtros the_content referente ao conteúdo da página e get_custom_logo referente a logo do site (caso seja um arquivo SVG).

Adicionando suporte SVG ao WordPress

Originalmente, o WordPress não vem com suporte ao SVG, então para poder adicionar os arquivos SVG ao seu site é preciso instalar um plugin. O melhor plugin para isso é o Safe SVG, pois, além de viabilizar os arquivos SVG, ele também faz uma limpeza no arquivo reduzindo seu tamanho do arquivo e eliminando qualquer ameaça que possa estar oculta no código.

Existe ainda a possibilidade de adicionar o suporte ao SVG sem o uso de plugins caso queira abrir mão da comodidade bem como a segurança que o plugin Safe SVG traz. Para isso, basta adicionar seguinte trecho de código abaixo ao seu functions.php:

<?php
function cc_mime_types(	&#36;mimes) {
      &#36;mimes['svg'] = 'image/svg+xml';
  return 	&#36;mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Em suma, ao implementar a troca de imagens SVG por tags SVG inline no WordPress e adicionar o suporte adequado, é possível otimizar a velocidade de carregamento da página, reduzir o número de requisições e melhorar o SEO do site. Com essas medidas, seu site estará mais bem preparado para oferecer uma experiência de navegação mais rápida e agradável aos visitantes, além de obter melhores classificações nos mecanismos de busca. Aproveite essas práticas para potencializar o desempenho do seu site e aprimorar a presença online!