{"id":55918,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55918"},"modified":"2025-10-07T13:45:40","modified_gmt":"2025-10-07T20:45:40","slug":"arquivos-svg","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/","title":{"rendered":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site"},"content":{"rendered":"\n<p>Algumas pessoas dizem que Elvis Presley foi o maior artista de todos os tempos.<\/p>\n\n\n\n<p>Dizemos que o formato de arquivo SVG \u00e9 um concorrente pr\u00f3ximo.<\/p>\n\n\n\n<p>Voc\u00ea v\u00ea, Elvis sempre cumpria. Seu mantra pessoal era, &#8220;Cuidando dos neg\u00f3cios,&#8221; abreviado como TCB em suas joias.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1181\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp\" alt=\"Foto de Elvis no casamento de George Klein usando seu colar TCB\" class=\"wp-image-49627 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-300x221.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1024x756.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-768x567.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1536x1134.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-600x443.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1200x886.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-730x539.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1460x1078.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-784x579.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1568x1157.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-877x647.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1181;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.instagram.com\/p\/BwM33HqHAlW\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n\n<p>E voc\u00ea poderia dizer o mesmo para arquivos SVG.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SVG<\/h3>\n    <p>Um arquivo SVG, ou arquivo de Gr\u00e1fico Vetorial Escal\u00e1vel, \u00e9 um formato de arquivo que renderiza imagens bidimensionais. Ele descreve como a imagem deve aparecer usando um formato de texto XML.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/svg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>N\u00e3o importa em que projeto voc\u00ea est\u00e1 trabalhando, este formato de imagem far\u00e1 o trabalho. Esses arquivos s\u00e3o leves, escal\u00e1veis e \u00f3timos para <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" target=\"_blank\" rel=\"noreferrer noopener\">acessibilidade<\/a>. Voc\u00ea pode at\u00e9 edit\u00e1-los usando c\u00f3digo.<\/p>\n\n\n\n<p>Ainda precisa de convencimento? Neste guia muito leg\u00edvel, damos uma olhada mais de perto no formato SVG e explicamos como usar esses arquivos em seus pr\u00f3prios projetos.<\/p>\n\n\n\n<p>Pronto para come\u00e7ar? Vamos ter um pouco menos de conversa, um pouco mais de a\u00e7\u00e3o!<\/p>\n\n\n\n<h2 id=\"h-o-basico-dos-svgs-entendendo-arquivos-de-imagem\" class=\"wp-block-heading\">O B\u00e1sico dos SVGs: Entendendo Arquivos de Imagem<\/h2>\n\n\n\n<p>Suponha que voc\u00ea est\u00e1 construindo um site. Provavelmente vai querer algumas imagens.<\/p>\n\n\n\n<p>Qual tipo de arquivo voc\u00ea deve usar?<\/p>\n\n\n\n<p>Sua intui\u00e7\u00e3o pode ser JPEG ou PNG. Talvez voc\u00ea inove e inclua alguns GIFs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExemYyMXZuMThmZXBseDJ4Ym5raTR0NXVtNDI0dnpsaDZ5Y3JhOWcyNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/l0IyqqiSuoOFBdZ7i\/giphy.webp\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/giphy.com\/gifs\/chuber-bears-elvis-l0IyqqiSuoOFBdZ7i\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n\n<p>Mas&#8230; qual \u00e9 a diferen\u00e7a? Bem, aqui est\u00e1 uma compara\u00e7\u00e3o dos suspeitos habituais:<\/p>\n\n\n\n<p><strong>JPEG (Grupo de Especialistas em Fotografia Conjunta)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pr\u00f3s: Tamanhos de arquivo menores, \u00f3timo para imagens complexas.<\/li>\n\n\n\n<li>Contras: Perde qualidade quando comprimido, sem transpar\u00eancia.<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG (Portable Network Graphics)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pr\u00f3s: Compress\u00e3o sem perdas, suporta transpar\u00eancia.<\/li>\n\n\n\n<li>Contras: Arquivos maiores que os JPEGs.<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF (Formato de Interc\u00e2mbio de Gr\u00e1ficos)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pr\u00f3s: Suporta anima\u00e7\u00f5es simples, tamanho pequeno de arquivo.<\/li>\n\n\n\n<li>Contras: Cores limitadas, pode parecer pixelizado.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/i.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExZnQyaXJnOTNjNGtrOThvcHoyNmdtemFqOXZyeGtxbjZ6OTVmaGo5YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/IxPS9xRu7TwYlrgBv4\/giphy.gif\" alt=\"\" style=\"width:500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Estes formatos podem parecer diversos. No entanto, s\u00e3o todos exemplos de imagens raster.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/otimizar-imagens-para-a-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Imagens raster (ou bitmap)<\/a> s\u00e3o pintadas com pixels colocados precisamente. Elas t\u00eam dimens\u00f5es fixas, cores e formas.<\/p>\n\n\n\n<p>Estes tipos de arquivo s\u00e3o \u00f3timos para compartilhar imagens com muitos detalhes, como <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/design-de-site-de-portfolio-de-fotografia\/\" target=\"_blank\" rel=\"noreferrer noopener\">fotos de alta qualidade<\/a>.<\/p>\n\n\n\n<p>A desvantagem \u00e9 que voc\u00ea nunca pode alterar ou esticar a imagem original. Voc\u00ea s\u00f3 pode pintar por cima ou adicionar mais pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Por que os SVGs s\u00e3o t\u00e3o \u00fateis<\/h3>\n\n\n\n<p>O formato SVG (Scalable Vector Graphics) \u00e9 diferente.<\/p>\n\n\n\n<p>Arquivos vetoriais cont\u00eam um conjunto de instru\u00e7\u00f5es de texto sobre como construir uma imagem. Esses arquivos s\u00e3o escritos em XML (Linguagem de Marca\u00e7\u00e3o Extens\u00edvel).<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>XML<\/h3>\n    <p>XML \u00e9 uma sigla para Extensible Markup Language. Esta linguagem usa tags para adicionar informa\u00e7\u00f5es aos arquivos, que podem ser lidas tanto por m\u00e1quinas quanto por humanos.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/xml\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Quando voc\u00ea tenta carregar um arquivo SVG, seu dispositivo verifica as instru\u00e7\u00f5es e constr\u00f3i a imagem sob demanda.<\/p>\n\n\n\n<p>H\u00e1 v\u00e1rias vantagens neste sistema:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Os SVGs podem ser <strong>escalados para qualquer tamanho<\/strong> e ainda assim parecerem perfeitos.<\/li>\n\n\n\n<li>Eles tamb\u00e9m podem ser <strong>editados como arquivos de c\u00f3digo<\/strong>.<\/li>\n\n\n\n<li>Voc\u00ea pode at\u00e9 <strong>estiliz\u00e1-los usando CSS<\/strong>.<\/li>\n\n\n\n<li>Por serem feitos de texto, os SVGs t\u00eam <strong>tamanhos de arquivo realmente pequenos<\/strong>.<\/li>\n\n\n\n<li>Isso significa que eles ocupam <strong>menos espa\u00e7o de armazenamento<\/strong> no seu servidor web<strong>.<\/strong><\/li>\n\n\n\n<li>E eles podem <strong>carregar mais r\u00e1pido<\/strong> do que gr\u00e1ficos rasterizados.<\/li>\n<\/ul>\n\n\n\n<p>Outro benef\u00edcio do uso de SVGs \u00e9 a <strong>melhor acessibilidade. <\/strong>Voc\u00ea pode ajustar esses arquivos localmente nos dispositivos, de acordo com as necessidades do usu\u00e1rio, e os leitores de tela podem interpret\u00e1-los.<\/p>\n\n\n\n<p>A desvantagem dos SVGs \u00e9 que eles podem ficar muito grandes se voc\u00ea incluir muitos detalhes. Al\u00e9m disso, voc\u00ea n\u00e3o pode otimiz\u00e1-los da mesma forma que as imagens rasterizadas. Se voc\u00ea deseja compartilhar fotografias, provavelmente ser\u00e1 melhor optar por um JPEG.<\/p>\n\n\n\n<p>Mas para a maioria dos outros conte\u00fados visuais, o formato SVG \u00e9 uma op\u00e7\u00e3o forte.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Funcionalidade<\/strong><\/td><td><strong>SVG<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><td><strong>GIF<\/strong><\/td><\/tr><tr><td>Escala<\/td><td>Forte \u2705<\/td><td>N\u00e3o \u274c<\/td><td>N\u00e3o \u274c<\/td><td>N\u00e3o \u274c<\/td><\/tr><tr><td>Tamanho do Arquivo<\/td><td>Geralmente pequeno \u2705<\/td><td>Pode ser pequeno \u2705<\/td><td>Frequentemente grande \u274c<\/td><td>Pequeno para imagens simples \u2705<\/td><\/tr><tr><td>Transpar\u00eancia<\/td><td>Sim \u2705<\/td><td>N\u00e3o \u274c<\/td><td>Sim \u2705<\/td><td>Sim, mas limitado \u26a0\ufe0f<\/td><\/tr><tr><td>Anima\u00e7\u00e3o<\/td><td>Com certeza! ?<\/td><td>N\u00e3o \u274c<\/td><td>N\u00e3o \u274c<\/td><td>Apenas b\u00e1sico \u26a0\ufe0f<\/td><\/tr><tr><td>Melhor para<\/td><td>Gr\u00e1ficos, \u00edcones, logotipos&nbsp;<\/td><td>Fotos<\/td><td>Imagens que necessitam transpar\u00eancia<\/td><td>Anima\u00e7\u00f5es simples<\/td><\/tr><tr><td>Editabilidade<\/td><td>Com c\u00f3digo! ?<\/td><td>N\u00e3o \u274c<\/td><td>N\u00e3o \u274c<\/td><td>N\u00e3o \u274c<\/td><\/tr><tr><td>Suporte de Navegador<\/td><td>A maioria dos navegadores modernos \u2705<\/td><td>Todos os navegadores \u2705<\/td><td>Todos os navegadores \u2705<\/td><td>Todos os navegadores \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Usos Comuns para Imagens SVG<\/h3>\n\n\n\n<p>Embora os SVGs sejam bastante vers\u00e1teis, eles aparecem principalmente no design de sites como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00cdcones:<\/strong> De links de m\u00eddias sociais a bot\u00f5es de carrinho de compras, \u00edcones SVG ficam n\u00edtidos em qualquer dispositivo.<\/li>\n\n\n\n<li><strong>Logos:<\/strong> Salvar o seu <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/criar-logotipo-online-gratis\/\" target=\"_blank\" rel=\"noreferrer noopener\">logo da marca<\/a> como um SVG garante que ele pare\u00e7a perfeito em todos os lugares \u2014 de telas m\u00f3veis pequenas a grandes outdoors.<\/li>\n\n\n\n<li><strong>Ilustra\u00e7\u00f5es:<\/strong> Muitos sites agora usam ilustra\u00e7\u00f5es SVG em vez de imagens de estoque. Mesmo quando os gr\u00e1ficos s\u00e3o muito detalhados, eles escalam perfeitamente.<\/li>\n\n\n\n<li><strong>Anima\u00e7\u00f5es:<\/strong> Sim, os SVGs podem se mover! Voc\u00ea pode anim\u00e1-los para aquele toque extra no seu site, como um logo girando ou um personagem dan\u00e7ando.<\/li>\n\n\n\n<li><strong>Infogr\u00e1ficos<\/strong>: Como os SVGs s\u00e3o escal\u00e1veis, voc\u00ea tamb\u00e9m pode us\u00e1-los para construir visualiza\u00e7\u00f5es interativas de <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/galeria-de-modelos-de-exploracoes-do-ga4\/\" target=\"_blank\" rel=\"noreferrer noopener\">dados<\/a>. Muito legal!<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_working-with-svgs-create-or-copy\" class=\"wp-block-heading\">Trabalhando com SVGs: Criar ou Copiar?<\/h2>\n\n\n\n<p>Ok, chega de elogios entusiasmados. \u00c9 hora de come\u00e7ar a trabalhar.<\/p>\n\n\n\n<p>Se voc\u00ea deseja integrar SVGs em seus projetos digitais, voc\u00ea precisa adquirir alguns designs prontos ou criar seus pr\u00f3prios gr\u00e1ficos do zero.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Encontrando SVGs Gratuitos<\/h3>\n\n\n\n<p>Usar os designs de outra pessoa \u00e9 a op\u00e7\u00e3o mais f\u00e1cil. E, felizmente, milhares de SVGs est\u00e3o dispon\u00edveis para download online.<\/p>\n\n\n\n<p>Muitos s\u00e3o gratuitos para projetos pessoais, mas voc\u00ea pode precisar pagar para uso comercial.<\/p>\n\n\n\n<p>Aqui est\u00e3o alguns dos nossos recursos favoritos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a>: Um pacote popular de \u00edcones SVG.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a>: Enorme base de dados de gr\u00e1ficos vetoriais, ilustra\u00e7\u00f5es e \u00edcones.<\/li>\n\n\n\n<li><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lineicons<\/a>: Pacote com mais de 8.400 \u00edcones simples e limpos.<\/li>\n\n\n\n<li><a href=\"https:\/\/freesvg.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free SVG<\/a>: Biblioteca de ilustra\u00e7\u00f5es SVG completamente gratuitas.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.opendoodles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a>: Ilustra\u00e7\u00f5es coloridas e gratuitas de personagens que parecem pessoas.<\/li>\n\n\n\n<li><a href=\"https:\/\/iconscout.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IconScout<\/a>: Biblioteca pesquis\u00e1vel com mais de 9,5 milh\u00f5es de ativos, incluindo \u00edcones, ilustra\u00e7\u00f5es, logotipos gratuitos e pagos e mais.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DrawKit<\/a>: V\u00e1rios pacotes de ilustra\u00e7\u00f5es 2D\/3D, gratuitas e premium.<\/li>\n\n\n\n<li><a href=\"https:\/\/undraw.co\/illustrations\" target=\"_blank\" rel=\"noreferrer noopener\">unDraw<\/a>: Muitas \u00f3timas ilustra\u00e7\u00f5es SVG gratuitas.<\/li>\n<\/ul>\n\n\n\n<p>Lembre-se de que voc\u00ea pode editar qualquer SVG que baixar. Assim, voc\u00ea pode usar arquivos gratuitos como ponto de partida para suas pr\u00f3prias cria\u00e7\u00f5es.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h2_how-to-create-and-edit-svg-files\" class=\"wp-block-heading\">Como Criar e Editar Arquivos SVG<\/h2>\n\n\n\n<p>N\u00e3o consegue encontrar o que precisa online? N\u00e3o se preocupe. Editar SVGs \u00e9 muito f\u00e1cil.<\/p>\n\n\n\n<p>Aqui est\u00e1 um guia r\u00e1pido:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Escolha Seu Software<\/h3>\n\n\n\n<p>A maneira mais f\u00e1cil de editar SVGs \u00e9 com um editor de gr\u00e1ficos vetoriais. Aqui est\u00e3o algumas op\u00e7\u00f5es populares:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$): O campe\u00e3o dos pesos pesados. Caro, mas poderoso.<\/li>\n\n\n\n<li><strong>Inkscape <\/strong>(gratuito): A alternativa gratuita que \u00e9 eficiente.<\/li>\n\n\n\n<li><strong>Figma <\/strong>($): \u00d3timo para trabalho de design colaborativo.<\/li>\n\n\n\n<li><strong>Sketch <\/strong>($): Uma alternativa mais leve ao Illustrator, popular entre os designers de interfaces.<\/li>\n<\/ul>\n\n\n\n<p>Basearemos o restante deste tutorial no Inkscape, mas o processo \u00e9 muito semelhante na maioria dos aplicativos de edi\u00e7\u00e3o de vetores.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Configure seu Canvas<\/h3>\n\n\n\n<p>Se voc\u00ea est\u00e1 come\u00e7ando do zero, precisar\u00e1 criar uma tela para o seu trabalho. No Inkscape, visite <strong>Arquivo <\/strong>&gt;<strong> Novo<\/strong> e escolha as dimens\u00f5es para a sua nova imagem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1020\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp\" alt=\"captura de tela da op\u00e7\u00e3o &quot;Novo&quot; localizada em Arquivo no menu superior\" class=\"wp-image-49636 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-300x191.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1024x653.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-768x490.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1536x979.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-600x383.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1200x765.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-730x465.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1460x931.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-784x500.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1568x1000.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-877x559.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1020;\" \/><\/figure>\n\n\n\n<p>Se voc\u00ea deseja editar um documento SVG existente, v\u00e1 at\u00e9 <strong>Arquivo &gt; Abrir<\/strong> para iniciar o editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Desenhe Seu Projeto<\/h3>\n\n\n\n<p>A ferramenta mais importante na edi\u00e7\u00e3o de vetores \u00e9 a ferramenta <strong>Bezier<\/strong>. Voc\u00ea pode selecion\u00e1-la na barra de ferramentas \u00e0 esquerda do seu espa\u00e7o de trabalho. O \u00edcone parece uma caneta-tinteiro desenhando uma linha curva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp\" alt=\"localiza\u00e7\u00e3o na captura de tela da ferramenta B\u00e9zier que parece a ponta de uma caneta-tinteiro ao lado de uma linha desenhada\" class=\"wp-image-49638 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Esta ferramenta permite que voc\u00ea crie linhas retas e curvas perfeitas com alguns cliques.<\/p>\n\n\n\n<p>Cada forma que voc\u00ea cria cont\u00e9m caminhos e pontos individuais, que s\u00e3o registrados no c\u00f3digo XML subjacente.<\/p>\n\n\n\n<p>Usando a ferramenta Bezier, voc\u00ea pode facilmente voltar e ajustar esses pontos e caminhos depois de cri\u00e1-los. Uma vez que esteja satisfeito com a estrutura, adicione suas <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/esquemas-de-cores-para-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">pr\u00f3prias cores<\/a> atrav\u00e9s do painel de <strong>Propriedades do Objeto<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp\" alt=\"barra de navega\u00e7\u00e3o superior com menu suspenso de &quot;Object&quot; para &quot;Propriedades do Objecto&quot; \" class=\"wp-image-49640 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>As op\u00e7\u00f5es de propriedades do objeto aparecer\u00e3o no menu \u00e0 direita.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp\" alt=\"captura de tela do menu de propriedades do objeto agora aberto no menu da direita mostrando varia\u00e7\u00f5es de cor e padr\u00e3o.\" class=\"wp-image-49642 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p><strong>Dica profissional:<\/strong> Quer se aprofundar na edi\u00e7\u00e3o de vetores? O Inkscape tem uma excelente biblioteca de tutoriais gratuitos <a href=\"https:\/\/inkscape.org\/learn\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqui<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Salvar Como SVG<\/h3>\n\n\n\n<p>Uma vez que voc\u00ea esteja satisfeito com seu gr\u00e1fico, v\u00e1 em <strong>Arquivo &gt;<\/strong><strong>Salvar Como<\/strong>, e escolha <strong>SVG<\/strong> como seu formato.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp\" alt=\"Menu suspenso de &quot;arquivo&quot; para &quot;abrir&quot;\" class=\"wp-image-49644 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>D\u00ea um nome legal e salve!<\/p>\n\n\n\n<h2 id=\"h2_how-to-add-svgs-to-your-website\" class=\"wp-block-heading\">Como Adicionar SVGs ao Seu Site<\/h2>\n\n\n\n<p>Voc\u00ea criou sua obra-prima vetorial. Agora, o mundo merece v\u00ea-la.&nbsp;<\/p>\n\n\n\n<p>Voc\u00ea pode incorporar SVGs no HTML do seu site. Tudo o que voc\u00ea precisa \u00e9 de uma tag <strong><code>&lt;img&gt;<\/code><\/strong> que aponte para o seu arquivo. Deve ficar algo assim:<\/p>\n\n\n\n<p><code>&lt;img src=\"my-awesome-svg.svg\" alt=\"My Awesome SVG\"&gt;<\/code><\/p>\n\n\n\n<p>Alternativamente, voc\u00ea pode inserir o c\u00f3digo XML do seu arquivo SVG diretamente na sua p\u00e1gina web usando a tag <strong><code>&lt;svg&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p>Aqui est\u00e1 um exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"red\" stroke-width=\"2\" fill=\"green\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Este c\u00f3digo produzir\u00e1 um bot\u00e3o redondo agrad\u00e1vel, com um contorno vermelho e um interior verde.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ativando SVG no WordPress<\/h3>\n\n\n\n<p>Adicionar imagens individuais via HTML \u00e9 um processo muito lento. Voc\u00ea pode preferir fazer o upload de SVGs atrav\u00e9s do seu CMS (Sistema de Gest\u00e3o de Conte\u00fado).<\/p>\n\n\n\n<p>Mas h\u00e1 um problema para os usu\u00e1rios do WordPress.<\/p>\n\n\n\n<p>Por padr\u00e3o, o WordPress n\u00e3o suporta nativamente o upload de SVGs. Isso ocorre porque agentes mal-intencionados podem usar SVGs para entregar Malware.<\/p>\n\n\n\n<p>A maneira mais f\u00e1cil de habilitar SVGs \u00e9 instalando um plugin como <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Safe SVG<\/a> ou <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG Support<\/a>. Essas ferramentas verificam cada upload para garantir que nada prejudicial esteja escondido.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1362\" height=\"717\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp\" alt=\"captura de tela da tela de download do Safe SVG\" class=\"wp-image-49647 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp 1362w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-300x158.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1024x539.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-768x404.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-600x316.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1200x632.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-730x384.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-784x413.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-877x462.webp 877w\" data-sizes=\"(max-width: 1362px) 100vw, 1362px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1362px; --smush-placeholder-aspect-ratio: 1362\/717;\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode ent\u00e3o fazer o upload e inserir SVGs atrav\u00e9s da Biblioteca de M\u00eddia do WordPress. Basta navegar at\u00e9 <strong>Media &gt; Adicionar Novo<\/strong>, e escolher os gr\u00e1ficos que deseja incluir.<\/p>\n\n\n\n<h2 id=\"h2_styling-svgs-with-css\" class=\"wp-block-heading\">Estilizando SVGs com CSS<\/h2>\n\n\n\n<p>Se voc\u00ea incorporar arquivos SVG usando a tag <strong><code>&lt;svg&gt;<\/code><\/strong>, voc\u00ea pode mudar a apar\u00eancia das suas imagens usando CSS.<\/p>\n\n\n\n<p>Suponha que voc\u00ea criou um gr\u00e1fico verde, mas quer que ele apare\u00e7a vermelho no seu site. Em vez de criar uma nova c\u00f3pia, voc\u00ea pode simplesmente escrever o seguinte estilo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  stroke: red;\n  fill: blue;\n}<\/code><\/pre>\n\n\n\n<p>O atributo <strong><code>stroke<\/code><\/strong> define qual cor o contorno do seu gr\u00e1fico deve ter. Enquanto isso, o atributo <strong><code>fill<\/code><\/strong> controla a cor entre as linhas.<\/p>\n\n\n\n<p><strong>Dica profissional: <\/strong>Existem<a href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <em>muitos mais<\/em><\/a> atributos para explorar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tornando suas imagens SVG responsivas<\/h3>\n\n\n\n<p>Os arquivos SVG s\u00e3o infinitamente escal\u00e1veis, ent\u00e3o voc\u00ea pode us\u00e1-los em designs responsivos. Basta um pouco de m\u00e1gica CSS.<\/p>\n\n\n\n<p>Aqui est\u00e1 um passo-a-passo:<\/p>\n\n\n\n<p><strong>1. Incorpore sua imagem usando a tag <code>&lt;svg&gt;<\/code>.<\/strong> Isso significa que voc\u00ea pode fazer altera\u00e7\u00f5es via CSS.<\/p>\n\n\n\n<p><strong>2. Remover as dimens\u00f5es de altura e largura. <\/strong>Isso for\u00e7ar\u00e1 seu SVG a se adaptar ao seu cont\u00eainer. Certifique-se de que a parte <strong><code>viewBox<\/code><\/strong> permane\u00e7a. Deve ficar algo assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg viewBox=\"0 0 20 20\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;!-- conte\u00fado svg aqui --&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p><strong>3. Defina o tamanho m\u00e1ximo do seu SVG.<\/strong> Isso impede que a imagem extravase seu cont\u00eainer. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  display: inline-block;\n  max-width: 100%;\n}<\/code><\/pre>\n\n\n\n<p>E voc\u00ea terminou!<\/p>\n\n\n\n<p><strong>Dica profissional:<\/strong> Se tudo isso parece um pouco t\u00e9cnico, experimente o <a href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\" target=\"_blank\" rel=\"noreferrer noopener\">ZipWP<\/a>. \u00c9 um construtor de sites com intelig\u00eancia artificial que cuida do estilo para voc\u00ea.<\/p>\n\n\n\n<h2 id=\"h2_svg-masterclass-4-advanced-tips\" class=\"wp-block-heading\">Masterclass SVG: 4 Dicas Avan\u00e7adas<\/h2>\n\n\n\n<p>Cobrimos os b\u00e1sicos da cria\u00e7\u00e3o e compartilhamento de SVGs. Para finalizar este guia, vamos olhar algumas t\u00e9cnicas avan\u00e7adas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Anime Seus Gr\u00e1ficos SVG<\/h3>\n\n\n\n<p>Voc\u00ea sabia que pode fazer seus SVGs dan\u00e7arem? Sim, <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/animacao-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">anima\u00e7\u00e3o<\/a> funciona neste tipo de arquivo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/loading-animation.gif\" alt=\"anima\u00e7\u00e3o simples de um bot\u00e3o &quot;Carregando&quot; movendo-se para cima e para baixo no gr\u00e1fico de fundo preto s\u00f3lido\" class=\"wp-image-49653 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure>\n\n\n\n<p>Assim como na imagem original, voc\u00ea pode animar seus gr\u00e1ficos usando simples c\u00f3digo XML. Basta adicionar um elemento <strong><code>&lt;animate&gt;<\/code> <\/strong> dentro da sua forma para colocar as coisas em movimento.<\/p>\n\n\n\n<p>Deve parecer algo assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"100%\" height=\"auto\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill:red;\"&gt;\n    &lt;animate\n      attributeName=\"cx\"\n      begin=\"0s\"\n      dur=\"5s\"\n      from=\"30\"\n      to=\"90%\"\n      repeatCount=\"indefinite\" \/&gt;\n  &lt;\/circle&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Voc\u00ea pode usar esta t\u00e9cnica para adicionar um pouco de movimento aos \u00edcones, criar um indicador de carregamento de p\u00e1gina ou at\u00e9 mesmo projetar an\u00fancios animados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Use Sprites SVG para Tempos de Carregamento Mais R\u00e1pidos<\/h3>\n\n\n\n<p>Os sprites SVG s\u00e3o como um \u00e1lbum dos maiores sucessos para os seus \u00edcones. Em vez de ter dezenas de arquivos de \u00edcone individuais, voc\u00ea os agrupa todos em um \u00fanico SVG.<\/p>\n\n\n\n<p>Isso significa que voc\u00ea s\u00f3 precisa fazer uma solicita\u00e7\u00e3o HTTP por p\u00e1gina, n\u00e3o importa quantos \u00edcones voc\u00ea esteja usando. \u00c9 uma \u00f3tima maneira de reduzir os tempos de carregamento e conservar a largura de banda.<\/p>\n\n\n\n<p>Muitos pacotes de \u00edcones s\u00e3o entregues em forma de sprite atualmente. Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/hackernoon.com\/how-to-create-svg-sprite-with-icons\" target=\"_blank\" rel=\"noreferrer noopener\">criar o seu pr\u00f3prio<\/a>.<\/p>\n\n\n\n<p>Para incorporar um \u00edcone espec\u00edfico no seu site, voc\u00ea simplesmente localiza a \u00e1rea do arquivo sprite onde esse \u00edcone est\u00e1 salvo. Voc\u00ea pode fazer isso usando c\u00f3digo CSS b\u00e1sico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#button {\n  width: 20px;\n  height: 20px;\n  background: url('sprite.svg') -128px 0;\n}<\/code><\/pre>\n\n\n\n<p><strong>Dica profissional: <\/strong>Recomendamos o uso de uma ferramenta online como <a href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Sprites Generator<\/a> para calcular as dist\u00e2ncias corretas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Otimize Seus Arquivos SVG para Melhor Desempenho<\/h3>\n\n\n\n<p>Embora os arquivos SVG comecem bem pequenos, voc\u00ea pode otimiz\u00e1-los para torn\u00e1-los ainda mais leves.<\/p>\n\n\n\n<p>Aqui est\u00e1 como fazer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use uma ferramenta como<\/strong><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> SVGOMG<\/strong><\/a>. Sim, isso existe mesmo. \u00c9 um \u00f3timo pequeno aplicativo web que permite comprimir SVGs sem perder qualidade.<\/li>\n\n\n\n<li><strong>Simplifique caminhos sempre que poss\u00edvel<\/strong>. Formas complicadas podem se transformar em grandes quantidades de c\u00f3digo XML. Muitos editores de gr\u00e1ficos vetoriais t\u00eam ferramentas para esta tarefa. (Est\u00e1 em <strong>Path &gt; Simplify<\/strong> no Inkscape).<\/li>\n\n\n\n<li><strong>Considere o carregamento lento para SVGs abaixo da dobra.<\/strong> Ao atrasar o carregamento de imagens mais abaixo na p\u00e1gina, voc\u00ea pode reduzir o impacto de m\u00faltiplas imagens.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Tornar Seus Gr\u00e1ficos Acess\u00edveis<\/h3>\n\n\n\n<p>Como os SVGs s\u00e3o arquivos baseados em texto, eles s\u00e3o f\u00e1ceis de serem compreendidos por leitores de tela e outros softwares assistivos.<\/p>\n\n\n\n<p>Dito isso, ainda existem medidas que voc\u00ea pode tomar para torn\u00e1-los ainda mais acess\u00edveis:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inclua os elementos <code>&lt;title&gt;<\/code> e <code>&lt;desc&gt;<\/code> dentro de seus arquivos SVG<\/strong>. Esses elementos fornecem descri\u00e7\u00f5es do gr\u00e1fico, que s\u00e3o particularmente \u00fateis para usu\u00e1rios que dependem de leitores de tela.<\/li>\n\n\n\n<li><strong>Adicione o atributo <code>role=\"img\"<\/code><\/strong>. Isso informa \u00e0s tecnologias assistivas que o SVG \u00e9 uma imagem.<\/li>\n\n\n\n<li><strong>Preencha o atributo <code>aria-labelledby<\/code><\/strong>, que deve referenciar os IDs dos elementos <code>&lt;title&gt;<\/code> e <code>&lt;desc&gt;<\/code>, vinculando-os como r\u00f3tulos para a imagem.<\/li>\n\n\n\n<li><strong>Para SVGs mais complexos, forne\u00e7a texto alternativo<\/strong>. Descreva a imagem, para que os leitores de tela tenham menos a interpretar.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"666\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp\" alt=\"anima\u00e7\u00e3o simples de um bot\u00e3o &quot;Carregando&quot; subindo e descendo no gr\u00e1fico de fundo preto s\u00f3lido\" class=\"wp-image-49649 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-300x125.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1024x426.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-768x320.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1536x639.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-600x250.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1200x500.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-730x304.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1460x608.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-784x326.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1568x653.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-877x365.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/666;\" \/><\/figure>\n\n\n\n<p>Um benef\u00edcio adicional de tornar os SVGs super-acess\u00edveis \u00e9 que voc\u00ea tamb\u00e9m os otimiza para busca. Vit\u00f3ria em SEO!<\/p>\n\n\n\n<h2 id=\"h2_taking-care-of-business\" class=\"wp-block-heading\">Cuidando dos Neg\u00f3cios<\/h2>\n\n\n\n<p>Assim como Elvis cuidava dos neg\u00f3cios no palco, os SVGs podem ajud\u00e1-lo a cuidar dos neg\u00f3cios em seu site. Esses gr\u00e1ficos vers\u00e1teis e escal\u00e1veis oferecem um mundo de possibilidades para web designers e desenvolvedores.<\/p>\n\n\n\n<p>De logos n\u00edtidos e \u00edcones responsivos a anima\u00e7\u00f5es interativas e visuais acess\u00edveis, os SVGs s\u00e3o os her\u00f3is desconhecidos do <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">design web moderno<\/a>.<\/p>\n\n\n\n<p>Depois de conferir este guia, voc\u00ea deve se sentir bastante confiante em usar SVGs em seus projetos. Mas sua hospedagem est\u00e1 \u00e0 altura do desafio?<\/p>\n\n\n\n<p>Se voc\u00ea deseja garantir que seu site possa lidar com toneladas de gr\u00e1ficos de alta qualidade, considere mudar para a DreamHost.<\/p>\n\n\n\n<p>Nossos<a href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"> planos de hospedagem<\/a> todos v\u00eam com largura de banda ilimitada (exceto hospedagem em nuvem), o que significa que voc\u00ea n\u00e3o precisa se preocupar se seu site receber muitos visitantes.<\/p>\n\n\n\n<h2 id=\"h2_fun-faqs-about-svgs\" class=\"wp-block-heading\">Perguntas Frequentes Divertidas Sobre SVGs<\/h2>\n\n\n\n<p>Se voc\u00ea ainda tem curiosidade sobre SVGs, isso \u00e9 totalmente normal. Temos mais conhecimento para compartilhar. Aqui est\u00e1 um resumo r\u00e1pido de algumas perguntas que podemos ter perdido:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como voc\u00ea converte SVG para JPEG?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Voc\u00ea pode fazer isso rapidamente usando um editor de vetores para desktop ou uma ferramenta online como<a href=\"https:\/\/cloudconvert.com\/svg-to-jpg\" target=\"_blank\" rel=\"noreferrer noopener\"> CloudConvert<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-voce-pode-editar-svgs-diretamente-em-um-editor-de-texto\">Voc\u00ea pode editar SVGs diretamente em um editor de texto?<\/h3>\n\n\n\n<p>Sim! Os SVGs s\u00e3o baseados em XML, ent\u00e3o voc\u00ea pode modificar o c\u00f3digo deles diretamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-o-svg-e-mais-nitido-que-o-png\">O SVG \u00e9 mais n\u00edtido que o PNG?<\/h3>\n\n\n\n<p>Na maioria dos casos, sim. Isso \u00e9 particularmente not\u00e1vel se voc\u00ea tentar aumentar o tamanho de um arquivo PNG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-e-possivel-editar-svgs-usando-javascript\">\u00c9 poss\u00edvel editar SVGs usando JavaScript?<\/h3>\n\n\n\n<p>Sim, voc\u00ea pode. Isso \u00e9 \u00fatil para mudan\u00e7as din\u00e2micas baseadas nas entradas do usu\u00e1rio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-os-svgs-sao-suportados-em-todos-os-navegadores\">Os SVGs s\u00e3o suportados em todos os navegadores?<\/h3>\n\n\n\n<p>SVGs s\u00e3o suportados em todos os navegadores web modernos, incluindo Chrome, Firefox, Safari e Edge.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<p><em>Esta p\u00e1gina cont\u00e9m links de afiliados. Isso significa que podemos ganhar uma comiss\u00e3o se voc\u00ea adquirir servi\u00e7os atrav\u00e9s do nosso link sem nenhum custo extra para voc\u00ea.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer gr\u00e1ficos n\u00edtidos e claros que fa\u00e7am seu site parecer espl\u00eandido em qualquer escala? Aprenda a criar, otimizar e usar arquivos SVG com nosso guia.<\/p>\n","protected":false},"author":1058,"featured_media":49599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-the-abcs-of-svgs-understanding-image-files\",\"O B\u00e1sico dos SVGs: Entendendo Arquivos de Imagem\"],[\"h2_working-with-svgs-create-or-copy\",\"Trabalhando com SVGs: Criar ou Copiar?\"],[\"h2_how-to-create-and-edit-svg-files\",\"Como Criar e Editar Arquivos SVG\"],[\"h2_how-to-add-svgs-to-your-website\",\"Como Adicionar SVGs ao Seu Site\"],[\"h2_styling-svgs-with-css\",\"Estilizando SVGs com CSS\"],[\"h2_svg-masterclass-4-advanced-tips\",\"Masterclass SVG: 4 Dicas Avan\u00e7adas\"],[\"h2_taking-care-of-business\",\"Cuidando dos Neg\u00f3cios\"],[\"h2_fun-faqs-about-svgs\",\"Perguntas Frequentes Divertidas Sobre SVGs\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-55918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site\" \/>\n<meta property=\"og:description\" content=\"Quer gr\u00e1ficos n\u00edtidos e claros que fa\u00e7am seu site parecer espl\u00eandido em qualquer escala? Aprenda a criar, otimizar e usar arquivos SVG com nosso guia.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T20:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/","og_locale":"en_US","og_type":"article","og_title":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site","og_description":"Quer gr\u00e1ficos n\u00edtidos e claros que fa\u00e7am seu site parecer espl\u00eandido em qualquer escala? Aprenda a criar, otimizar e usar arquivos SVG com nosso guia.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-09-23T14:00:00+00:00","article_modified_time":"2025-10-07T20:45:40+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/"},"wordCount":2675,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Design de Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/","name":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","width":1460,"height":1095,"caption":"TCB With SVG: How To Create and Use SVG Files on Your Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/arquivos-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"TCB com SVG: Como Criar e Usar Arquivos SVG em Seu Site"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"pt","translations":{"pt":55918,"es":49610,"en":49598,"ru":52725,"de":55872,"pl":55924,"uk":55935,"it":68620,"fr":70813,"nl":70839},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=55918"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55918\/revisions"}],"predecessor-version":[{"id":76369,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55918\/revisions\/76369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/49599"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=55918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=55918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=55918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}