programação

Incorporação de Gráficos SVG em HTML

Última Actualização 25/02/2024
lido 3 minutos

Adicionar gráficos vetoriais escaláveis (SVG) a uma página HTML é uma prática comum para melhorar a apresentação visual e a interatividade do conteúdo web. SVG é um formato de imagem baseado em XML que permite criar gráficos vetoriais de alta qualidade que são escaláveis e podem ser manipulados usando CSS (Cascading Style Sheets) e JavaScript.

Artigos Relacionados

Para incorporar um gráfico SVG em uma página HTML, você pode seguir alguns passos simples:

  1. Criar o arquivo SVG: Primeiro, você precisa criar o arquivo SVG. Isso pode ser feito usando um editor de gráficos vetoriais, como o Adobe Illustrator, Inkscape (software livre), ou até mesmo escrevendo manualmente o código SVG em um editor de texto simples.

  2. Incorporar o SVG na página HTML: Depois de criar o arquivo SVG, você pode incorporá-lo à sua página HTML usando a tag . Você pode copiar e colar o código SVG diretamente dentro da tag em seu arquivo HTML, ou usar a tag para referenciar o arquivo SVG externo.

    html
    <svg width="400" height="200">
  
svg>

  3. Estilizar o SVG com CSS: Você pode estilizar elementos dentro do SVG usando CSS. Isso inclui a alteração de cores, tamanhos, posicionamento e outros estilos visuais.

  4. Adicionar interatividade com JavaScript: Se desejar adicionar interatividade ao seu gráfico SVG, você pode fazer isso usando JavaScript. Por exemplo, você pode adicionar eventos de clique, hover ou animações para tornar o gráfico mais dinâmico e envolvente.

  5. Garantir a acessibilidade: Ao utilizar SVG em sua página HTML, é importante garantir que o conteúdo seja acessível a todos os usuários, incluindo aqueles que utilizam tecnologias assistivas, como leitores de tela. Certifique-se de fornecer texto alternativo descritivo para elementos do SVG usando a tag </code> ou <code><desc></code>.</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"400"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"200"</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Gráfico de barras<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-comment"><!-- Seu código SVG vai aqui --></span> <span class="hljs-tag"></<span class="hljs-name">svg</span>></span> </code></div></div></pre> </li> <li> <p><strong>Testar em diferentes navegadores</strong>: Antes de publicar sua página HTML, é recomendável testar o gráfico SVG em diferentes navegadores para garantir que ele seja exibido corretamente e tenha o mesmo desempenho em todos os ambientes.</p> </li> </ol> <p>Em resumo, adicionar gráficos SVG a uma página HTML é uma maneira eficaz de melhorar a experiência do usuário e tornar o conteúdo mais visualmente atraente e interativo. Com as técnicas certas de codificação e estilização, você pode criar gráficos impressionantes que funcionam bem em uma variedade de dispositivos e navegadores.</p> </div> </div> <h2>“Mais Informações”</h2> <p><img decoding="async" src="https://meukultura.com/pic/more_info.png" class="center"></p> <div data-message-author-role="assistant" data-message-id="248bbec4-90eb-4011-9a19-afa32b2aff1d" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto"> <div class="markdown prose w-full break-words dark:prose-invert light"> <p>Claro, vou fornecer uma explicação abrangente sobre como adicionar gráficos vetoriais escaláveis (SVG) a uma página HTML.</p> <p>Os gráficos vetoriais escaláveis (SVG) são uma forma de representação de imagens baseadas em vetores, o que significa que descrevem as imagens usando formas geométricas como linhas, curvas e formas básicas (como círculos e retângulos), em vez de pixels individuais, como ocorre em imagens rasterizadas, como JPG ou PNG. Isso confere aos SVGs a capacidade de serem dimensionados infinitamente sem perda de qualidade, tornando-os ideais para uso em páginas da web.</p> <p>Para adicionar um SVG a uma página HTML, você pode seguir estes passos:</p> <ol> <li> <p><strong>Criar o arquivo SVG</strong>: Primeiro, você precisa criar o próprio arquivo SVG. Você pode fazer isso manualmente usando um editor de texto simples, como o Bloco de Notas, ou usar software de design gráfico, como Adobe Illustrator, Inkscape ou Sketch. Certifique-se de que o arquivo SVG esteja corretamente estruturado e contendo as formas e elementos desejados.</p> </li> <li> <p><strong>Inserir o SVG na página HTML</strong>: Depois de criar o arquivo SVG, você pode inseri-lo em sua página HTML usando a tag <code><svg></code>. Por exemplo:</p> </li> </ol> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"pt"</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Exemplo SVG<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Meu SVG<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100"</span>></span> <span class="hljs-comment"><!-- Aqui vai o conteúdo do seu SVG --></span> <span class="hljs-tag"><<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">r</span>=<span class="hljs-string">"40"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"black"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"red"</span> /></span> <span class="hljs-tag"></<span class="hljs-name">svg</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></div></div></pre> <p>Neste exemplo, um círculo simples é desenhado dentro do elemento <code><svg></code>. Os atributos <code>cx</code> e <code>cy</code> definem as coordenadas do centro do círculo, enquanto o atributo <code>r</code> define o raio do círculo. Os atributos <code>stroke</code> e <code>stroke-width</code> definem a cor e a largura da borda do círculo, respectivamente, e o atributo <code>fill</code> define a cor de preenchimento do círculo.</p> <ol start="3"> <li> <p><strong>Ajustar o tamanho e estilo do SVG</strong>: Você pode ajustar o tamanho e o estilo do SVG diretamente dentro da tag <code><svg></code> usando os atributos <code>width</code> e <code>height</code> para definir as dimensões e aplicando estilos CSS para personalizar a aparência das formas dentro do SVG.</p> </li> <li> <p><strong>Usar arquivos externos SVG</strong>: Em vez de incluir o código SVG diretamente no arquivo HTML, você também pode referenciar um arquivo SVG externo usando a tag <code><img></code> ou a tag <code><object></code>. Por exemplo:</p> </li> </ol> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"exemplo.svg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Meu SVG"</span>></span> </code></div></div></pre> <p>ou</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">object</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/svg+xml"</span> <span class="hljs-attr">data</span>=<span class="hljs-string">"exemplo.svg"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100"</span>></span> Seu navegador não suporta SVG. <span class="hljs-tag"></<span class="hljs-name">object</span>></span> </code></div></div></pre> <p>Usar arquivos externos pode facilitar a manutenção e reutilização do código SVG.</p> <ol start="5"> <li><strong>Interagir com SVG usando JavaScript</strong>: Além de apenas exibir SVGs, você também pode interagir com eles usando JavaScript para criar animações, manipular elementos e muito mais. O JavaScript pode ser usado para selecionar elementos dentro do SVG, modificar seus atributos e até mesmo adicionar eventos de clique e hover para criar interatividade.</li> </ol> <p>Em resumo, adicionar gráficos vetoriais escaláveis (SVG) a uma página HTML envolve criar o arquivo SVG desejado e, em seguida, inseri-lo na página HTML usando a tag <code><svg></code> ou referenciando um arquivo SVG externo usando as tags <code><img></code> ou <code><object></code>. Depois, você pode ajustar o tamanho, estilo e interatividade do SVG conforme necessário.</p> </div> </div> </p> <div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script> <!-- defults --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Última Actualização 25/02/2024</span><div class="tie-alignright"><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> lido 3 minutos</span> </div></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&title=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://api.whatsapp.com/send?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML%20https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2024-02-25T23:54:02+03:00","datePublished":"2024-02-25T23:54:02+03:00","dateModified":"2024-02-25T23:54:02+03:00","headline":"Incorpora\u00e7\u00e3o de Gr\u00e1ficos SVG em HTML","name":"Incorpora\u00e7\u00e3o de Gr\u00e1ficos SVG em HTML","keywords":[],"url":"https:\/\/meukultura.com\/incorporacao-de-graficos-svg-em-html\/","description":"Adicionar gr\u00e1ficos vetoriais escal\u00e1veis (SVG) a uma p\u00e1gina HTML \u00e9 uma pr\u00e1tica comum para melhorar a apresenta\u00e7\u00e3o visual e a interatividade do conte\u00fado web. SVG \u00e9 um formato de imagem baseado em XML qu","copyrightYear":"2024","articleSection":"programa\u00e7\u00e3o","articleBody":"Adicionar gr\u00e1ficos vetoriais escal\u00e1veis (SVG) a uma p\u00e1gina HTML \u00e9 uma pr\u00e1tica comum para melhorar a apresenta\u00e7\u00e3o visual e a interatividade do conte\u00fado web. SVG \u00e9 um formato de imagem baseado em XML que permite criar gr\u00e1ficos vetoriais de alta qualidade que s\u00e3o escal\u00e1veis e podem ser manipulados usando CSS (Cascading Style Sheets) e JavaScript.Para incorporar um gr\u00e1fico SVG em uma p\u00e1gina HTML, voc\u00ea pode seguir alguns passos simples:Criar o arquivo SVG: Primeiro, voc\u00ea precisa criar o arquivo SVG. Isso pode ser feito usando um editor de gr\u00e1ficos vetoriais, como o Adobe Illustrator, Inkscape (software livre), ou at\u00e9 mesmo escrevendo manualmente o c\u00f3digo SVG em um editor de texto simples.Incorporar o SVG na p\u00e1gina HTML: Depois de criar o arquivo SVG, voc\u00ea pode incorpor\u00e1-lo \u00e0 sua p\u00e1gina HTML usando a tag . Voc\u00ea pode copiar e colar o c\u00f3digo SVG diretamente dentro da tag em seu arquivo HTML, ou usar a tag para referenciar o arquivo SVG externo.htmlCopy code\n \n\nEstilizar o SVG com CSS: Voc\u00ea pode estilizar elementos dentro do SVG usando CSS. Isso inclui a altera\u00e7\u00e3o de cores, tamanhos, posicionamento e outros estilos visuais.Adicionar interatividade com JavaScript: Se desejar adicionar interatividade ao seu gr\u00e1fico SVG, voc\u00ea pode fazer isso usando JavaScript. Por exemplo, voc\u00ea pode adicionar eventos de clique, hover ou anima\u00e7\u00f5es para tornar o gr\u00e1fico mais din\u00e2mico e envolvente.Garantir a acessibilidade: Ao utilizar SVG em sua p\u00e1gina HTML, \u00e9 importante garantir que o conte\u00fado seja acess\u00edvel a todos os usu\u00e1rios, incluindo aqueles que utilizam tecnologias assistivas, como leitores de tela. Certifique-se de fornecer texto alternativo descritivo para elementos do SVG usando a tag ou .htmlCopy code\n Gr\u00e1fico de barras\n \n\nTestar em diferentes navegadores: Antes de publicar sua p\u00e1gina HTML, \u00e9 recomend\u00e1vel testar o gr\u00e1fico SVG em diferentes navegadores para garantir que ele seja exibido corretamente e tenha o mesmo desempenho em todos os ambientes.Em resumo, adicionar gr\u00e1ficos SVG a uma p\u00e1gina HTML \u00e9 uma maneira eficaz de melhorar a experi\u00eancia do usu\u00e1rio e tornar o conte\u00fado mais visualmente atraente e interativo. Com as t\u00e9cnicas certas de codifica\u00e7\u00e3o e estiliza\u00e7\u00e3o, voc\u00ea pode criar gr\u00e1ficos impressionantes que funcionam bem em uma variedade de dispositivos e navegadores.\"Mais Informa\u00e7\u00f5es\"\n\nClaro, vou fornecer uma explica\u00e7\u00e3o abrangente sobre como adicionar gr\u00e1ficos vetoriais escal\u00e1veis (SVG) a uma p\u00e1gina HTML.Os gr\u00e1ficos vetoriais escal\u00e1veis (SVG) s\u00e3o uma forma de representa\u00e7\u00e3o de imagens baseadas em vetores, o que significa que descrevem as imagens usando formas geom\u00e9tricas como linhas, curvas e formas b\u00e1sicas (como c\u00edrculos e ret\u00e2ngulos), em vez de pixels individuais, como ocorre em imagens rasterizadas, como JPG ou PNG. Isso confere aos SVGs a capacidade de serem dimensionados infinitamente sem perda de qualidade, tornando-os ideais para uso em p\u00e1ginas da web.Para adicionar um SVG a uma p\u00e1gina HTML, voc\u00ea pode seguir estes passos:Criar o arquivo SVG: Primeiro, voc\u00ea precisa criar o pr\u00f3prio arquivo SVG. Voc\u00ea pode fazer isso manualmente usando um editor de texto simples, como o Bloco de Notas, ou usar software de design gr\u00e1fico, como Adobe Illustrator, Inkscape ou Sketch. Certifique-se de que o arquivo SVG esteja corretamente estruturado e contendo as formas e elementos desejados.Inserir o SVG na p\u00e1gina HTML: Depois de criar o arquivo SVG, voc\u00ea pode inseri-lo em sua p\u00e1gina HTML usando a tag . Por exemplo:htmlCopy code\n\n\n \n \n Exemplo SVG\n\n\n Meu SVG\n \n \n \n \n\n\nNeste exemplo, um c\u00edrculo simples \u00e9 desenhado dentro do elemento . Os atributos cx e cy definem as coordenadas do centro do c\u00edrculo, enquanto o atributo r define o raio do c\u00edrculo. Os atributos stroke e stroke-width definem a cor e a largura da borda do c\u00edrculo, respectivamente, e o atributo fill define a cor de preenchimento do c\u00edrculo.Ajustar o tamanho e estilo do SVG: Voc\u00ea pode ajustar o tamanho e o estilo do SVG diretamente dentro da tag usando os atributos width e height para definir as dimens\u00f5es e aplicando estilos CSS para personalizar a apar\u00eancia das formas dentro do SVG.Usar arquivos externos SVG: Em vez de incluir o c\u00f3digo SVG diretamente no arquivo HTML, voc\u00ea tamb\u00e9m pode referenciar um arquivo SVG externo usando a tag ou a tag . Por exemplo:htmlCopy code\nouhtmlCopy code\n Seu navegador n\u00e3o suporta SVG.\n\nUsar arquivos externos pode facilitar a manuten\u00e7\u00e3o e reutiliza\u00e7\u00e3o do c\u00f3digo SVG.Interagir com SVG usando JavaScript: Al\u00e9m de apenas exibir SVGs, voc\u00ea tamb\u00e9m pode interagir com eles usando JavaScript para criar anima\u00e7\u00f5es, manipular elementos e muito mais. O JavaScript pode ser usado para selecionar elementos dentro do SVG, modificar seus atributos e at\u00e9 mesmo adicionar eventos de clique e hover para criar interatividade.Em resumo, adicionar gr\u00e1ficos vetoriais escal\u00e1veis (SVG) a uma p\u00e1gina HTML envolve criar o arquivo SVG desejado e, em seguida, inseri-lo na p\u00e1gina HTML usando a tag ou referenciando um arquivo SVG externo usando as tags ou . Depois, voc\u00ea pode ajustar o tamanho, estilo e interatividade do SVG conforme necess\u00e1rio.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Meu Kultura","logo":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/meu-kultura-high-resolution-logo-transparent-1.png"},"sameAs":["https:\/\/www.facebook.com\/MeuKultura\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/meukultura.com\/incorporacao-de-graficos-svg-em-html\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/meukultura.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/cropped-meu-kultura-high-resolution-logo.png","width":1200,"height":512}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&title=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div class="prev-next-post-nav container-wrapper media-overlay"> <div class="tie-col-xs-6 prev-post"> <a href="https://meukultura.com/ecossistema-python-para-ciencia-de-dados/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="prev"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://meukultura.com/ecossistema-python-para-ciencia-de-dados/" rel="prev"> <h3 class="post-title">Ecossistema Python para Ciência de Dados</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://meukultura.com/guia-completo-de-programacao-python/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="next"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> </a> <a href="https://meukultura.com/guia-completo-de-programacao-python/" rel="next"> <h3 class="post-title">Guia Completo de Programação Python</h3> </a> </div> </div><!-- .prev-next-post-nav /--> <div id="related-posts" class="container-wrapper"> <div class="mag-box-title the-global-title"> <h3>Artigos Relacionados</h3> </div> <div class="related-posts-list"> <div class="related-item tie-standard"> <a aria-label="Guia para Desenvolvimento de Temas WordPress" href="https://meukultura.com/guia-para-desenvolvimento-de-temas-wordpress/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" fetchpriority="high" /></a> <h3 class="post-title"><a href="https://meukultura.com/guia-para-desenvolvimento-de-temas-wordpress/">Guia para Desenvolvimento de Temas WordPress</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Lidando Efetivamente com a Web" href="https://meukultura.com/lidando-efetivamente-com-a-web/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://meukultura.com/lidando-efetivamente-com-a-web/">Lidando Efetivamente com a Web</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Planejamento de UI em JavaFX" href="https://meukultura.com/planejamento-de-ui-em-javafx/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><a href="https://meukultura.com/planejamento-de-ui-em-javafx/">Planejamento de UI em JavaFX</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="Introdução ao JavaScript Canvas" href="https://meukultura.com/introducao-ao-javascript-canvas/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://meukultura.com/introducao-ao-javascript-canvas/">Introdução ao JavaScript Canvas</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> </div><!-- .related-posts-list /--> </div><!-- #related-posts /--> </div><!-- .post-components /--> </div><!-- .main-content --> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script> <!-- defults --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2303082872" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> <span> © Direitos autorais 2026, Todos os direitos reservados  |  <span style="color:red;" class="tie-icon-heart"></span>  |  <a href="https://meukultura.com/about-us/">Sobre Nós</a>  |  <a href="https://meukultura.com/informacoes-politicas-e-condicoes/">Informações, políticas e condições</a>  |  <a href="https://meukultura.com/contact-us/">Entre em Contato</a> </span> <br> <span> <a href="https://meukultura.com/aviso-legal/">Aviso legal</a>  |  <a href="https://meukultura.com/privacy-policy/">Política de Privacidade</a>  |  <a href="https://meukultura.com/politica-de-cookies/">Política de cookies</a>  |  <a href="https://meukultura.com/terms-and-conditions/">Termos e Condições</a>  |  <a href="https://meukultura.com/faq/">Perguntas Frequentes</a> </span> </footer></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&title=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&name=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&description=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML&media=" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&title=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&redirect_uri=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&redirect_uri=https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML%20https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://meukultura.com/incorporacao-de-graficos-svg-em-html/&text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML%20https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Incorpora%C3%A7%C3%A3o%20de%20Gr%C3%A1ficos%20SVG%20em%20HTML%20https://meukultura.com/incorporacao-de-graficos-svg-em-html/" rel="external noopener nofollow" title="Linha" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Linha</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Botão Voltar ao Topo</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area is-fullwidth appear-from-left" aria-label="Sidebar Secundária" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Fechar</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- #mobile-social-icons /--> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://meukultura.com/"> <label> <span class="screen-reader-text">Pesquisar por:</span> <input type="search" class="search-field" placeholder="Pesquisar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Pesquisar" /> </form> </div><!-- #mobile-search /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jannah/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#DC7218"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="https://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="2" data-cky-tag="title" style="color:#DC7218">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#DC7218"> <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customize" aria-haspopup="true" aria-controls="ckyPreferenceCenter" data-cky-tag="settings-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Customize</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218">Accept All</button> </div></div></div></div><div class="cky-preference-wrapper" data-cky-tag="detail" style="color:#DC7218;background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-preference-center" id="ckyPreferenceCenter"> <div class="cky-preference"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="2" data-cky-tag="detail-title" style="color:#DC7218">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="Close" data-cky-tag="detail-close"> <img src="https://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt=""> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#DC7218"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#DC7218">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#DC7218">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#DC7218">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#DC7218">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#DC7218">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218"> Accept All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Save My Preferences </button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Reject All </button> </div></div></div></div></div></script><div id="reading-position-indicator"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Fechar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar"> <form method="get" class="tie-popup-search-form" action="https://meukultura.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Digite e tecle Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Pesquisar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Fechar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar"> <form method="get" class="tie-popup-search-form" action="https://meukultura.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Pesquisar por" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Pesquisar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="module"> import { Workbox } from "https:\/\/meukultura.com\/wp-content\/plugins\/pwa\/wp-includes\/js\/workbox-v7.3.0\/workbox-window.prod.js"; if ( 'serviceWorker' in navigator ) { window.wp = window.wp || {}; window.wp.serviceWorkerWindow = new Workbox( "https:\/\/meukultura.com\/wp.serviceworker", {"scope":"\/"} ); window.wp.serviceWorkerWindow.register(); } </script> <script id="wp-hooks-js" src="https://meukultura.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255"></script> <script id="wp-i18n-js" src="https://meukultura.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after </script> <script id="swv-js" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.7"></script> <script id="contact-form-7-js-translations"> ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2024-08-13 18:06:19+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"pt"},"This contact form is placed in the wrong place.":["Este formul\u00e1rio de contacto est\u00e1 colocado no s\u00edtio errado."],"Error:":["Erro:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); //# sourceURL=contact-form-7-js-translations </script> <script id="contact-form-7-js-before"> var wpcf7 = { "api": { "root": "https:\/\/meukultura.com\/wp-json\/", "namespace": "contact-form-7\/v1" } }; //# sourceURL=contact-form-7-js-before </script> <script id="contact-form-7-js" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.7"></script> <script id="eztoc-scroll-scriptjs-js-extra"> var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""}; //# sourceURL=eztoc-scroll-scriptjs-js-extra </script> <script id="eztoc-scroll-scriptjs-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.85"></script> <script id="eztoc-js-cookie-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1"></script> <script id="eztoc-jquery-sticky-kit-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2"></script> <script id="eztoc-js-js-extra"> var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"\u003Cspan class=\"\"\u003E\u003Cspan class=\"eztoc-hide\" style=\"display:none;\"\u003EToggle\u003C/span\u003E\u003Cspan class=\"ez-toc-icon-toggle-span\"\u003E\u003Csvg style=\"fill: #999;color:#999\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"\u003E\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"\u003E\u003C/path\u003E\u003C/svg\u003E\u003Csvg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"\u003E\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/span\u003E","chamomile_theme_is_on":""}; //# sourceURL=eztoc-js-js-extra </script> <script id="eztoc-js-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.85-1781436313"></script> <script id="tie-scripts-js-extra"> var tie = {"is_rtl":"","ajaxurl":"https://meukultura.com/wp-admin/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"\u003Cdiv class=\"loader-overlay\"\u003E\u003Cdiv class=\"spinner-circle\"\u003E\u003C/div\u003E\u003C/div\u003E","type_to_search":"1","lang_no_results":"Nada Encontrado","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; //# sourceURL=tie-scripts-js-extra </script> <script id="tie-scripts-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2"></script> <script id="tie-js-ilightbox-js" src="https://meukultura.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2"></script> <script id="tie-js-sliders-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2"></script> <script id="tie-js-shortcodes-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2"></script> <script id="tie-js-desktop-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2"></script> <script id="tie-js-single-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> </body> </html>