Como usar imagens vetoriais com segurança com WordPress

Adicionar gráficos e ilustrações personalizados ao design do seu site Divi pode realmente ajudar a melhorar o apelo visual. Mas nem sempre é viável encontrar os recursos de imagem certos ou contratar um designer. Felizmente, o Divi facilita a criação de suas próprias imagens vetoriais e ilustrações diretamente no construtor.

Neste guia, exploraremos como realmente implementar SVG sem comprometer seu site.

Mesmo se você não tiver experiência em design, você pode criar imagens vetoriais profissionais de alta qualidade para realmente levar seu site Divi para o próximo nível visualmente.

Introdução ao SVG e seus usos

SVG significa Gráficos Vetoriais Escaláveis. É um formato de imagem vetorial baseado em XML amplamente utilizado, projetado para descrever gráficos vetoriais bidimensionais. Ao contrário dos formatos de imagem raster (como JPEG ou PNG) que usam pixels para representar imagens, o SVG usa equações matemáticas para definir formas, linhas e cores, tornando-o um formato independente de resolução e altamente escalável.

Aqui estão alguns usos principais do SVG no design de sites:

1. Gráficos responsivos: as imagens SVG são independentes da resolução, o que significa que podem ser ampliadas ou reduzidas sem perder qualidade. Isso os torna perfeitos para web design responsivo, onde o conteúdo se ajusta para caber em diferentes tamanhos e resoluções de tela.
2. Ícones e logotipos: SVG é comumente usado para ícones, logotipos e outros elementos gráficos em sites. Como os arquivos SVG são pequenos e podem ser facilmente personalizados e animados com CSS e JavaScript, eles são uma escolha popular para criar interfaces de usuário interativas e visualmente atraentes.
3. Telas Retina e de alto DPI: SVG é ideal para exibir gráficos nítidos e nítidos em telas de alto DPI (pontos por polegada), como telas Retina, onde imagens raster tradicionais podem parecer pixeladas quando ampliadas.
4. Animação: SVG permite a criação de animações complexas diretamente no código XML usando ferramentas como animações CSS ou bibliotecas JavaScript como Snap.svg e GreenSock Animation Platform (GSAP). Isso possibilita adicionar elementos dinâmicos e interativos a um site.
5. Acessibilidade: as imagens SVG são facilmente acessíveis para leitores de tela e tecnologias assistivas porque a estrutura XML subjacente pode ser anotada com texto descritivo, tornando os sites mais inclusivos e utilizáveis ​​para pessoas com deficiência.
6. Benefícios de SEO: Os mecanismos de pesquisa podem analisar e indexar o conteúdo dos arquivos SVG, o que pode melhorar a otimização do mecanismo de pesquisa (SEO), fornecendo mais contexto aos rastreadores dos mecanismos de pesquisa.
7. Visualização interativa de dados: SVG pode ser usado para criar visualizações interativas de dados, como tabelas e gráficos, que podem ajudar a transmitir informações de maneira eficaz em um site.

Resumindo, SVG é um formato versátil e poderoso para criar e exibir gráficos vetoriais em sites. Sua capacidade de escalar perfeitamente, funcionar bem com vários tamanhos e resoluções de tela e suporte para animações e interatividade o tornam uma ferramenta valiosa no design e desenvolvimento web moderno.

Maneiras de usar imagens vetoriais com segurança com WordPress

Nesta parte, veremos dois métodos para usar SVG seguro no WordPress: manualmente e por meio de plug-ins. A melhor escolha para suas necessidades será então apresentada a você para seleção. Vamos começar agora!

Adicione suporte SVG manualmente e limpe seu código

Com um pequeno código, o suporte SVG pode ser adicionado ao WordPress em questão de minutos. Isso exporia você às possíveis preocupações de segurança que já destacamos. As seguintes ações são necessárias para implementar o SVG de maneira mais segura:

1. Faça alterações em seu arquivo functions.php para ativar o suporte SVG.
2. Proibir que as funções de usuário desejadas carreguem arquivos SVG para o WordPress.
3. Antes de enviar qualquer arquivo SVG, limpe todos eles.

No geral, não é difícil concluir as etapas um e dois. O primeiro passo é conectar-se ao seu site usando o File Transfer Protocol (FTP) e encontrar a pasta raiz do WordPress. Encontre seu arquivo functions.php lá, abra-o e cole o seguinte código nele.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Com isso, você pode fazer upload de arquivos SVG para WordPress e vê-los em sua biblioteca de mídia, atendendo a dois propósitos. Após adicionar o código, feche o arquivo function.php e salve as modificações.

Agora que precisamos impedir que pessoas cujos uploads não confiamos sejam corrompidos, as coisas se tornam um pouco mais desafiadoras. Você pode, por exemplo, confiar em seus editores e autores para fazer upload de arquivos precisos, mas não em seus colaboradores. Existem duas abordagens que você pode adotar aqui:

1. Estabeleça funções de usuário exclusivas para usuários com acesso restrito ou sem acesso à Biblioteca de Mídia.
2. Para restringir os tipos de arquivos que cada função de usuário pode enviar, instale um plugin como WP Upload Restriction .

É verdade que ambas as estratégias têm desvantagens, o que é um dos motivos pelos quais a implementação manual do SVG pode ser um desafio. Mas se você escolher uma estratégia para impedir uploads maliciosos de SVG, também precisará ter certeza de não usá-la acidentalmente.

Idealmente, você deve usar uma ferramenta higienizadora antes de enviar qualquer SVG para o seu site. Isso pegará seu arquivo, verificará se ele contém algo questionável e, se houver, excluí-lo-á. No final, você terá um arquivo SVG organizado que poderá finalmente enviar ao WordPress.

Usando o plug-in SVG seguro

Pretendíamos demonstrar o quão difícil pode ser a implementação segura de SVG usando o método mencionado acima. Isso é necessário para que você possa entender completamente o que o plugin Safe SVG executa.

o plugin para Safe SVG. Resumindo, as dificuldades que declaramos anteriormente são todas abordadas por este plugin, incluindo:

1. Possibilitando o upload de SVGs.
2. Verificando se seus SVGs estão visíveis na Biblioteca de Mídia.
3. Limpeza do código-fonte de cada SVG carregado para evitar falhas de segurança. Este plugin é essencialmente plug-and-play por natureza e segue o caminho mais simples para proteger a implementação de SVG no WordPress. Aconselhamos você a tentar se estiver determinado a usar SVGs.

Animando SVGs usando CSS e plugins

Se você começar a integrar SVGs ao WordPress, sem dúvida desejará maximizar o retorno do investimento. Isso significa que, quando apropriado, você deve animar seus SVGs usando CSS. Existem duas abordagens que você pode adotar, que discutimos anteriormente:

• SVGs podem ser animados manualmente com CSS como qualquer outro elemento.
• Use programas como SVGator para criar e animar SVGs.

Se você estiver disposto a experimentar coisas novas, adicionar algumas animações aqui e ali pode melhorar muito a experiência do usuário em seu site. No entanto, adicionar vídeos ou GIFs seria consideravelmente pior para dispositivos móveis do que utilizar SVGs e CSS para conseguir isso.

Conclusão

Com a capacidade de criar gráficos vetoriais personalizados diretamente no Divi Builder , você tem uma maneira poderosa de criar ilustrações e ícones para o seu site sem a necessidade de qualquer conhecimento de design. A implementação desses gráficos originais pode conferir às suas páginas e postagens uma estética mais exclusiva e personalizada. Você ficará surpreso com o quão profissionais seus gráficos vetoriais DIY podem parecer!