iamjoshellis\/pen\/KVDQqm Em termos de desempenho, as imagens SVG tendem a ser significativamente menores em tamanho do que qualquer contraparte. Como resultado, é costume ver que ilustrações, logotipos e ícones são criados como gráficos vetoriais. Isso também levou ao desenvolvimento de muitas fontes de ícones, que vamos mencionar brevemente no artigo mais adiante.
Em suma, SVGs oferecem flexibilidade, tamanho de imagem pequeno e uma base sólida para melhorar o desempenho de imagem em seu site. WordPress. Como são criadas as imagens SVG? Criar imagens SVG pode ser de duas maneiras: escrever \
O outro método é usar software, e esta é a maneira mais rápida e eficiente de construir gráficos SVG. Com software baseado em vetor, você pode se concentrar na criação de gráficos e, em seguida, exportá-los como arquivos SVG prontos.
Affinity Designer é um programa de edição de vetores profissional bem conhecido, mas também é software como Adobe Illustrator, Sketch, Figma e Inkscape. Seja qual for o software que você decidir usar, a única coisa que realmente importa são seus planos. A funcionalidade de exportação funciona da mesma forma em todos os programas modernos.
Escusado será dizer que SVG é sempre a mesma estrutura XML. Assim, você pode usar imagens SVG tanto como um documento, mas também inseri-las em linha. O WordPress suporta SVG? Por mais estranho que pareça, uma plataforma com a esfera WordPress não suporta o formato de arquivo SVG. Mas não
Tem sérias preocupações de segurança. Você vê, ao contrário dos tipos de arquivo PNG\/JPG\/GIF – SVG não é uma imagem rasterizada, mas um vetor. Como resultado, o SVG corre o risco de explorar JavaScript, e o WordPress optou por não permitir o SVG no WordPress por padrão. Faz sentido em todos os sentidos.
Escusado será dizer que SVG é sempre a mesma estrutura XML. Assim, você pode usar imagens SVG tanto como um documento, mas também inseri-las em linha. O WordPress suporta SVG? Por mais estranho que pareça, uma plataforma com a esfera WordPress não suporta o formato de arquivo SVG. Mas não
Tem sérias preocupações de segurança. Você vê, ao contrário dos tipos de arquivo PNG\/JPG\/GIF – SVG não é uma imagem rasterizada, mas um vetor. Como resultado, o SVG corre o risco de explorar JavaScript, e o WordPress optou por não permitir o SVG no WordPress por padrão. Faz sentido em todos os sentidos.
Mesmo que os colaboradores do WordPress tenham falado sobre SVG por muitos anos, há muitos ângulos para abordar para evitar problemas de segurança em escala. Então, a única maneira de corrigir isso é por plugins ou habilitando SVG como um formato de arquivo usando as funções do tema. Como ativar imagens SVG em um site WordPress? Antes de chegar à parte de plugins, você pode realmente ativar o SVG no WordPress através do arquivo de funções. php do seu diretório. de trabalhos de casa. Esta é certamente a maneira mais rápida, mas também a menos segura, já que você habilita o SVG no formato raw.
\/\/enable SVG file format for WordPress Uploads function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes[‘svg’] = ‘image\/svg+xml’; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; } add_action(‘upload_mimes’, ‘add_file_types_to_uploads’); E a outra opção – mais segura – é usar plugins. Aqui estão três dos plugins mais proeminentes para ativar o SVG no WordPress. Suporte a SVG
\/\/enable SVG file format for WordPress Uploads function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes[‘svg’] = ‘image\/svg+xml’; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; } add_action(‘upload_mimes’, ‘add_file_types_to_uploads’); E a outra opção – mais segura – é usar plugins. Aqui estão três dos plugins mais proeminentes para ativar o SVG no WordPress. Suporte a SVG
Adicionar suporte SVG é metade da batalha, você também pode querer adicionar um estilo personalizado, efeitos de animação e ativar restrições. Mas para fazer tudo isso, você precisa de apoio.
Com suporte SVG – você pode começar a adicionar arquivos SVG às suas postagens e páginas. usando a marca Imagem tradicional. Por exemplo, você pode adicionar uma nova classe CSS às Imagens: \
SVG retransfere na Biblioteca de Mídia WordPress. Converta imagens SVG carregadas para código inline. Suporta o widget Imagem para adicionar tags Alt e Legenda a todas as imagens SVG. Estile imagens SVG individuais usando CSS personalizado. Implemente efeitos de animação usando CSS3 e JavaScript. Páginas de configuração detalhada no painel do plugin. Implementar acesso baseado em permissões. Por exemplo, restrinja o upload apenas para contas com privilégios de administrador. Palavra de aviso que, apesar do que este plugin oferece, os riscos de exploração SVG são bastante reais. Não ative o gerenciamento de arquivos SVG para usuários em quem você não confia. Então, idealmente, você só habilitaria esse recurso para usuários de nível administrativo.
Para reiterar, qualquer pessoa com privilégios de upload pode carregar novos arquivos SVG, mas como os arquivos SVG são baseados em XML, eles estão abertos à exploração de injeção maliciosa e de outra forma. SVG seguro
Com suporte SVG – você pode começar a adicionar arquivos SVG às suas postagens e páginas. usando a marca Imagem tradicional. Por exemplo, você pode adicionar uma nova classe CSS às Imagens: \
SVG retransfere na Biblioteca de Mídia WordPress. Converta imagens SVG carregadas para código inline. Suporta o widget Imagem para adicionar tags Alt e Legenda a todas as imagens SVG. Estile imagens SVG individuais usando CSS personalizado. Implemente efeitos de animação usando CSS3 e JavaScript. Páginas de configuração detalhada no painel do plugin. Implementar acesso baseado em permissões. Por exemplo, restrinja o upload apenas para contas com privilégios de administrador. Palavra de aviso que, apesar do que este plugin oferece, os riscos de exploração SVG são bastante reais. Não ative o gerenciamento de arquivos SVG para usuários em quem você não confia. Então, idealmente, você só habilitaria esse recurso para usuários de nível administrativo.
Para reiterar, qualquer pessoa com privilégios de upload pode carregar novos arquivos SVG, mas como os arquivos SVG são baseados em XML, eles estão abertos à exploração de injeção maliciosa e de outra forma. SVG seguro
Safe SVG é um plugin que lhe dará paz de espírito em relação à preocupação com potenciais riscos de segurança. O plugin foi criado especialmente para higienizar qualquer nova carga SVG e evitar intenções maliciosas. Além disso, o Safe SVG adiciona a capacidade de ver que tipo de arquivos SVG você carregou através de sua Biblioteca. media. Com 50.000 usuários ativos, você pode confiar no Safe SVG para fornecer um excelente histórico de desempenho seguro. Note que existem duas versões diferentes para este plugin; Livre e pago.
A versão gratuita inclui funcionalidade para higienizar novos uploads e também adiciona suporte para visualização SVG na Biblioteca de Mídia.
A versão gratuita inclui funcionalidade para higienizar novos uploads e também adiciona suporte para visualização SVG na Biblioteca de Mídia.
Se você escolher a versão Pro, você terá recursos adicionais como SVGO Optimization. Esta técnica de otimização reduzirá ainda mais o tamanho do arquivo SVG carregado. Também com o Pro, você pode escolher quem pode ou não pode ainda
definir a largura máxima, o ícone será escalado automaticamente. Tal como acontece com os autores, este plugin é excepcional para todos os tipos de atividades de desenvolvimento, multisite e cliente. Sem restrições, você não precisa se preocupar com a compatibilidade de temas ou qualquer coisa assim. Parece que há também uma versão premium na oferta, com um recurso que permite carregar ícones personalizados. Portanto, não se limite a ícones embutidos. Menu Social SVG
definir a largura máxima, o ícone será escalado automaticamente. Tal como acontece com os autores, este plugin é excepcional para todos os tipos de atividades de desenvolvimento, multisite e cliente. Sem restrições, você não precisa se preocupar com a compatibilidade de temas ou qualquer coisa assim. Parece que há também uma versão premium na oferta, com um recurso que permite carregar ícones personalizados. Portanto, não se limite a ícones embutidos. Menu Social SVG
Este é um plugin que funciona como um widget para exibir ícones de redes sociais através de imagens SVG. Para que este plugin funcione, tudo o que você precisa fazer é criar um novo menu WordPress com links para seus perfis. socializar. Em seguida, selecione a localização personalizada do menu social SVG e salve o novo menu. Depois disso, você pode usar o widget SVG Social Menu na barra lateral ou em outras áreas preparadas para widgets do seu blog. Os ícones atualmente disponíveis são para os seguintes sites e plataformas: plus. Google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing \/feed, mailto. Efeitos de logótipo e texto do SVG SLATE é um plugin que permite suporte de código curto para adicionar efeitos SVG personalizados. Você pode usar este plugin para promover uma imagem de marca forte, destacar widgets CTA ou fazer itens se destacar de sua própria maneira. O uso inteligente do suporte shortcode significa que você pode editar e personalizar seus efeitos a qualquer momento. Por exemplo, você pode misturar diferentes cores, fontes, filtros e usar vários padrões de preenchimento que se manifestam como efeitos de design atraentes. SLATE oferece tanta liberdade criativa quanto o software de edição vetorial, mas apenas sem a necessidade de usar nenhum software! Então, quais são algumas das características
num site que uso frequentemente. SVG Wallpapers – Você está atualizado com as últimas tendências de web design? Há tantas áreas criativas nas quais os projetos estão sendo explorados agora. E uma dessas áreas é SVG background. Você também os viu, padrões ondulados, linhas curvas e assim por diante. Use este site para gerar fundos SVG facilmente acessíveis! SVG Grabber – Esta extensão do Chrome é uma mana divina absoluta para obter imagens SVG de diferentes páginas do site. Basta clicar no ícone e a extensão pode tomar cada arquivo SVG de uma página. Claro, você tem que seguir as regras de direitos autorais sempre que puder, mas em geral parece uma extensão sólida para usar com frequência. Área de Logotipo Vector – Dependendo do nicho em que você trabalha, pode ser útil ter uma coleção de logotipos baseados em vetores das principais marcas do mundo. Você também pode usar esses arquivos ao fazer anúncios ou promoções específicas. E a maioria dos editores de fotos hoje em dia pode converter arquivos SVG para PNG e de qualquer maneira. Pessoalmente, a SVG fez uma grande diferença na forma como trabalho com design de sites e até mesmo com a criação de imagens em destaque. Com um SVG você pode realmente fazer tudo no espectro de cores, diferentes alinhamentos de formas, etc Claro, não é o mesmo com o uso de uma bela foto da vida real, mas em qualquer site você pode encontrar muitos lugares onde um JPG pode ser substituído por gráficos vetoriais. E esse é exatamente o propósito deste post, dar uma visão geral de como usar SVG com WordPress. Independentemente de termos alcançado esse objetivo, vamos deixar você ser o juiz. Se você gostaria de adicionar algo a este post ou se você tem recursos adicionais para compartilhar, por favor, saiba que nossa seção de comentários é
num site que uso frequentemente. SVG Wallpapers – Você está atualizado com as últimas tendências de web design? Há tantas áreas criativas nas quais os projetos estão sendo explorados agora. E uma dessas áreas é SVG background. Você também os viu, padrões ondulados, linhas curvas e assim por diante. Use este site para gerar fundos SVG facilmente acessíveis! SVG Grabber – Esta extensão do Chrome é uma mana divina absoluta para obter imagens SVG de diferentes páginas do site. Basta clicar no ícone e a extensão pode tomar cada arquivo SVG de uma página. Claro, você tem que seguir as regras de direitos autorais sempre que puder, mas em geral parece uma extensão sólida para usar com frequência. Área de Logotipo Vector – Dependendo do nicho em que você trabalha, pode ser útil ter uma coleção de logotipos baseados em vetores das principais marcas do mundo. Você também pode usar esses arquivos ao fazer anúncios ou promoções específicas. E a maioria dos editores de fotos hoje em dia pode converter arquivos SVG para PNG e de qualquer maneira. Pessoalmente, a SVG fez uma grande diferença na forma como trabalho com design de sites e até mesmo com a criação de imagens em destaque. Com um SVG você pode realmente fazer tudo no espectro de cores, diferentes alinhamentos de formas, etc Claro, não é o mesmo com o uso de uma bela foto da vida real, mas em qualquer site você pode encontrar muitos lugares onde um JPG pode ser substituído por gráficos vetoriais. E esse é exatamente o propósito deste post, dar uma visão geral de como usar SVG com WordPress. Independentemente de termos alcançado esse objetivo, vamos deixar você ser o juiz. Se você gostaria de adicionar algo a este post ou se você tem recursos adicionais para compartilhar, por favor, saiba que nossa seção de comentários é