diff options
Diffstat (limited to 'files/pt-pt/web/svg/index.html')
| -rw-r--r-- | files/pt-pt/web/svg/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/pt-pt/web/svg/index.html b/files/pt-pt/web/svg/index.html new file mode 100644 index 0000000000..8d27ffbb6b --- /dev/null +++ b/files/pt-pt/web/svg/index.html @@ -0,0 +1,95 @@ +--- +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) & <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> |