---
title: SVG - Gráficos Vetoriais Escaláveis
slug: Web/SVG
tags:
  - Gráficos 2D
  - Imagens
  - Prioridade l10n
  - Referencia
  - SVG
  - Web
  - graficos
  - Ícones
translation_of: Web/SVG
---
<div class="callout-box"><strong><a href="/pt-PT/docs/Web/SVG/Tutorial">Inicação</a></strong><br>
Este tutorial irá ajudá-lo a começar a utilizar SVG.</div>

<p><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> é uma linguagem de marcação com base em <a href="/pt-PT/docs/Introducao_a_XML">XML </a>para descrever dois <a class="external" href="https://pt.wikipedia.org/wiki/Desenho_vetorial">gráficos vetoriais</a> dimensionais.</span> Como tal, é um padrão da Web aberta baseado erm texto para descrever imagens que podem ser renderizadas para qualquer tamanho e são criadas especificamente para funcionarem bem com outros padrões da Web, incluindo <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/CSS">CSS</a>, <a href="https://wiki.developer.mozilla.org/pt-PT/docs/DOM">DOM</a>, <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/JavaScript">JavaScript</a>, e <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>. SVG é, essencialmente para os gráficos, o que o <a href="/pt-PT/docs/Web/HTML">HTML</a> é para o texto.</p>

<p>SVG images and their related behaviors are defined in <a href="/pt-PT/docs/Web/XML">XML</a> text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.</p>

<p>Compared to classic bitmapped image formats such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.</p>

<p>SVG tem sido desenvolvido por <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a>, desde 1999.</p>

<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentação">Documentação</h2>

<dl>
 <dt><a href="/pt-PT/docs/Web/SVG/Element">SVG - referência de elemento</a></dt>
 <dd>Details about each SVG element.</dd>
 <dt><a href="/pt-PT/docs/Web/SVG/Attribute">SVG - referência de atributo</a></dt>
 <dd>Details about each SVG attribute.</dd>
 <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt>
 <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd>
 <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt>
 <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd>
</dl>

<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p>

<h2 class="Community" id="Comunidade">Comunidade</h2>

<ul>
 <li>Consulte os fóruns da Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
</ul>

<h2 class="Tools" id="Ferramentas">Ferramentas</h2>

<ul>
 <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
 <li><a href="http://jiggles.w3.org/svgvalidator/">Validador de SVG </a>(<strong>Descontinuado</strong>)</li>
 <li><a href="/pt-PT/docs/tag/SVG:Tools">Mais Ferramentas...</a></li>
 <li>Outros recursos: <a href="/pt-PT/docs/Introducao_a_XML">XML</a>, <a href="/pt-PT/docs/Web/CSS">CSS</a>, <a href="/pt-PT/docs/DOM/DOM_Reference">DOM</a>, <a href="/pt-PT/docs/Web/API/API_de_canvas">Canvas</a></li>
</ul>
</div>

<div class="section">
<h2 class="Related_Topics" id="Exemplos">Exemplos</h2>

<ul>
 <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) &amp; <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li>
 <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li>
 <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li>
 <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li>
 <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li>
 <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li>
 <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li>
 <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li>
</ul>

<h3 id="Animação_e_interações">Animação e interações</h3>

<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p>

<ul>
 <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li>
 <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li>
 <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li>
 <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li>
</ul>

<h3 id="Mapeamento_gráficos_jogos_e_experiências_em_3D">Mapeamento, gráficos, jogos e experiências em 3D</h3>

<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p>

<ul>
 <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
 <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li>
 <li><a href="http://jointjs.com/">JointJS</a> (JavaScript diagramming library)</li>
 <li><a href="https://d3js.org/">D3</a> ( JavaScript library for visualizing data with HTML, SVG, and CSS )</li>
</ul>
</div>
</div>