{"id":1889,"date":"2020-08-04T16:36:24","date_gmt":"2020-08-04T19:36:24","guid":{"rendered":"https:\/\/www.souzahost.com\/tutoriais\/?p=1889"},"modified":"2021-06-02T07:55:13","modified_gmt":"2021-06-02T10:55:13","slug":"usando-arquivos-svg-no-wordpress","status":"publish","type":"post","link":"https:\/\/www.holahost.com.br\/tutoriais\/usando-arquivos-svg-no-wordpress\/","title":{"rendered":"Usando arquivos SVG no WordPress"},"content":{"rendered":"\n

Est\u00e1 com problemas de fazer upload ou abrir um arquivo SVG no WordPress? Sem preocupa\u00e7\u00f5es! Esse \u00e9 um problema comum porque o WordPress n\u00e3o tem suporte ao formato SVG por padr\u00e3o. Se voc\u00ea quer contornar esse dilema, \u00e9 s\u00f3 continuar lendo este artigo. Hoje voc\u00ea vai aprender como abrir arquivo SVG WordPress<\/strong> com plugins!<\/p>\n\n\n\n

\n\n\n\n

O Que \u00e9 SVG?<\/strong><\/h2>\n\n\n\n

SVG<\/strong> (Scalable Vector Graphics<\/em>) \u00e9 um formato de vetor de imagem baseado em texto XML<\/strong>. Enquanto formatos como JPG<\/strong> e PNG<\/strong> s\u00e3o feitos com zilh\u00f5es de pequenos quadradinhos chamados pixels, o formato de imagens SVG \u00e9 baseado em marca\u00e7\u00f5es XML para descrever linhas, formas e outros atributos de imagem.<\/p>\n\n\n\n

O SVG n\u00e3o tinha popularidade at\u00e9 recentemente, embora ele j\u00e1 esteja sendo usado desde o come\u00e7o dos anos 90. Dados do W3Techs<\/a> mostram que, at\u00e9 abril de 2019, apenas 16,7% de todos os sites da internet usam o formato SVG.  <\/p>\n\n\n\n

Mas \u00e9 prov\u00e1vel que esse n\u00famero aumente com o tempo, j\u00e1 que desenvolvedores e donos de sites costumam querer atualizar seus projetos de acordo com as demandas do mercado. Al\u00e9m disso, escalabilidade e carregamento r\u00e1pido de p\u00e1ginas est\u00e3o sempre entre as maiores exig\u00eancias.<\/p>\n\n\n\n

Outro ponto favor\u00e1vel ao SVG \u00e9 que ele tem amplo suporte e \u00e9 compat\u00edvel com a maior partes dos navegadores mais usados. Isso inclui Chrome, Firefox e Safari, inclusive nos dispositivos m\u00f3veis.<\/p>\n\n\n\n

Infelizmente, usu\u00e1rios com Internet Explorer 8 ou vers\u00f5es antigas do Chromes e Safari podem encontrar problemas de suporte ao SVG. Mas isso n\u00e3o chega a ser um grande problema para webmasters, j\u00e1 que a maioria das pessoas n\u00e3o usam estes navegadores. Eles nem aparecem no ranking dos 15 navegadores mais usados no mundo<\/a>.    <\/p>\n\n\n\n

\n\n\n\n

Por Que SVG Deve Ser Usado Com Mais Frequ\u00eancia?<\/strong><\/h2>\n\n\n\n

Muitas pessoas n\u00e3o est\u00e3o familiarizadas com o formato SVG porque ele n\u00e3o \u00e9 t\u00e3o estabelecido assim como os formatos em pixels. Mas esse n\u00e3o deveria ser o caso porque o pr\u00f3prio formato SVG tem muitos benef\u00edcios.<\/p>\n\n\n\n

A primeira grande vantagem do SVG \u00e9 a sua escalabilidade. Como SVGs s\u00e3o baseados em vetores, eles ret\u00eam a mesma qualidade de imagem em qualquer tipo de tela ou resolu\u00e7\u00e3o.<\/p>\n\n\n\n

Se um arquivo JPG aparece meio borrado em algum dispositivo em particular \u00e9 porque ele n\u00e3o \u00e9 grande o suficiente. Em compensa\u00e7\u00e3o, um arquivo em formato SVG vai se apresentar em forma perfeita e sem distor\u00e7\u00f5es.<\/p>\n\n\n\n

Voc\u00ea at\u00e9 mesmo consegue dar zoom o quanto quiser sem perder qualquer qualidade. Essa caracter\u00edstica \u00e9 muito \u00fatil quando voc\u00ea quer oferecer uma experi\u00eancia s\u00f3lida no seu site para usu\u00e1rios de qualquer plataforma e aparelho usando telas e resolu\u00e7\u00f5es diversas.<\/p>\n\n\n\n

O formato SVG tamb\u00e9m \u00e9 conhecido pelo tamanho reduzido dos arquivos<\/strong>. Al\u00e9m disso, eles consomem menos espa\u00e7o no armazenamento do seu site e carregam bem mais r\u00e1pido que os demais tipos de formatos de imagens.<\/p>\n\n\n\n

Mas aqui tem uma pegadinha: se voc\u00ea pegar uma imagem suficientemente detalhada e convert\u00ea-la em SVG, o novo arquivo vai ocupar mais espa\u00e7o que uma imagem JGP ou PNG.<\/p>\n\n\n\n

Isso acontece porque o tamanho do arquivo SVG depende diretamente da complexidade da imagem. Quanto mais detalhada for a imagem, maior vai ser o tamanho dela. \u00c9 por isso que SVG \u00e9 mais indicada para logo e \u00edcones. Se voc\u00ea quer destacar uma imagem detalhada, como fotografias, no seu site, os formatos JPG e PNG s\u00e3o bem mais indicados.<\/p>\n\n\n\n

Outra grande vantagem para webmasters \u00e9 que o Google indexa SVG<\/strong>. Todas as imagens neste formato v\u00e3o aparecer no Google Image Search<\/strong>, o que ajuda um pouco no SEO de um site.   <\/p>\n\n\n\n

\n\n\n\n

Por Que SVG N\u00e3o \u00c9 um Formato Padr\u00e3o no WordPress<\/strong><\/h2>\n\n\n\n

Com todas essas vantagens, porque o SVG n\u00e3o \u00e9 mais popular? Por que o WordPress n\u00e3o permite o upload f\u00e1cil do SVG \u00e0 plataforma?<\/p>\n\n\n\n

A principal raz\u00e3o disso \u00e9 que o WordPress ainda n\u00e3o incluiu o formato como parte dos seus formatos compat\u00edveis por padr\u00e3o (os arquivos centrais do sistema) por quest\u00f5es de seguran\u00e7a.<\/p>\n\n\n\n

Como o SVG \u00e9 basicamente arquivos de texto, as pessoas podem facilmente tirar vantagem deles inserindo um c\u00f3digo malicioso. Como resultado, seu site pode ficar exposto e receber inje\u00e7\u00f5es de ataques que podem levar ao comprometimento dos seus dados. D\u00e1 medo, n\u00e3o \u00e9?<\/p>\n\n\n\n

A solu\u00e7\u00e3o para evitar c\u00f3digos indesejados \u00e9 sanear os arquivos SVG. Esse processo remove c\u00f3digos suspeitos e erros deles, tornando as imagens SVG seguras para o seu site. Abrir um arquivo SVG sem cuidados extras pode gerar consequ\u00eancias s\u00e9rias, como sites fora do ar ou servidores comprometidos.<\/p>\n\n\n\n

Existe uma discuss\u00e3o recorrente<\/a> sobre a possibilidade de incluir o SVG como um dos formatos padr\u00e3o do WordPress. Mas por nenhuma conclus\u00e3o ter sido encontrada at\u00e9 agora, precisamos ser criativos e encontrar ajuda se outras fontes para abrir arquivo SVG WordPress.<\/p>\n\n\n\n

\n\n\n\n

Como Fazer Upload de Arquivos SVG WordPress<\/strong><\/h2>\n\n\n\n

A melhor forma de abrir arquivo SVG no WordPress \u00e9 usando o Safe SVG<\/a>, um plugin que automaticamente verifica esses arquivos e remove todas as poss\u00edveis falhas de seguran\u00e7a.<\/p>\n\n\n\n

Ele tamb\u00e9m faz a pr\u00e9-visualiza\u00e7\u00e3o dos arquivos SVG na biblioteca do WordPress e permite que voc\u00ea adicione tudo nas postagens de forma f\u00e1cil.<\/p>\n\n\n\n

Este plugin WordPress tamb\u00e9m tem uma vers\u00e3o PRO (premium) que permite limitar o n\u00famero de usu\u00e1rios que podem fazer upload de arquivos SVG. Essa fun\u00e7\u00e3o \u00e9 \u00fatil para sites com muitos colaboradores porque voc\u00ea limitar o acesso apenas a quem voc\u00ea confia.<\/p>\n\n\n\n

A vers\u00e3o premium ainda tem um otimizador de servidor SVGO, que reduz o tamanho do arquivo e oferece suporte dedicado, ao inv\u00e9s do suporte de f\u00f3runs comuns.<\/p>\n\n\n\n

Voc\u00ea consegue esse plugin diretamente do reposit\u00f3rio do WordPress, pelo painel de controle do sistema. Depois, \u00e9 s\u00f3 instalar e ativar o plugin para come\u00e7ar a us\u00e1-lo. N\u00e3o \u00e9 necess\u00e1rio fazer configura\u00e7\u00f5es extras.<\/p>\n\n\n\n

\"plugin<\/a><\/figure>\n\n\n\n

Abaixo est\u00e1 um exemplo do que acontece quando se tenta fazer o upload e abrir arquivo SVG no WordPress antes de instalar o Safe SVG. Como voc\u00ea pode ver, a plataforma simplesmente n\u00e3o permite fazer isso por conta de seguran\u00e7a.<\/p>\n\n\n\n

\"mensagem<\/a><\/figure>\n\n\n\n

Mas depois de instalar o plugin, \u00e9 poss\u00edvel usar arquivos SVG no WordPress sem qualquer problema. \u00c9 at\u00e9 poss\u00edvel pr\u00e9-visualizar a imagem em vez do \u00edcone do arquivo (que \u00e9 o caso de muitos outros plugins SVG).<\/p>\n\n\n\n

\"bilbioteca<\/a><\/figure>\n\n\n\n

E \u00e9 isso! Fazer upload de um arquivo SVG no WordPress \u00e9 bem f\u00e1cil, n\u00e3o achou?<\/p>\n\n\n\n

\n\n\n\n

Conclus\u00e3o<\/strong><\/h2>\n\n\n\n

Est\u00e1 claro que o SVG traz muitas vantagens ao seu site WordPress. Por\u00e9m, como ele \u00e9 um formato de texto, usu\u00e1rios mal intencionados podem inserir um c\u00f3digo malicioso nele e tornar seu site vulner\u00e1vel.<\/p><\/blockquote>\n\n\n\n

Essa \u00e9 o principal motivo do porqu\u00ea o WordPress n\u00e3o permite fazer upload de arquivos SVG por padr\u00e3o.<\/p><\/blockquote>\n\n\n\n

\u00c9 por isso que voc\u00ea deve usar o plugin Safe SVG. Ele permite fazer o upload de arquivos SVG e remove qualquer c\u00f3digo malicioso ao mesmo tempo, impedindo ataques que possam comprometer seu site.<\/p><\/blockquote>\n\n\n\n

Ainda assim, mesmo que essa pr\u00e1tica seja segura, encorajamos voc\u00ea a sempre pegar imagens de fontes confi\u00e1veis. Principalmente se elas forem gratuitas. N\u00e3o descuide da seguran\u00e7a do seu projeto na internet.<\/p><\/blockquote>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Est\u00e1 com problemas de fazer upload ou abrir um arquivo SVG no WordPress? Sem preocupa\u00e7\u00f5es! Esse \u00e9 um problema comum porque o WordPress n\u00e3o tem suporte ao formato SVG por padr\u00e3o. Se voc\u00ea quer contornar esse dilema, \u00e9 s\u00f3 continuar lendo este artigo. Hoje voc\u00ea vai aprender como abrir arquivo SVG WordPress com plugins! O […]<\/p>\n","protected":false},"author":1,"featured_media":5491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[99,1],"tags":[118,119,29],"_links":{"self":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1889"}],"collection":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=1889"}],"version-history":[{"count":2,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1889\/revisions"}],"predecessor-version":[{"id":5492,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1889\/revisions\/5492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/5491"}],"wp:attachment":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=1889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=1889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=1889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}