1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: 'SVG: Gráficos Vetoriais Escaláveis'
slug: Web/SVG
tags:
- Design Responsivo
- Gráficos 2D
- Gráficos Escaláveis
- Gráficos Vetoriais
- Imagens
- Referencia
- SVG
- Web
- graficos
- 'l10n:prioridade'
- Ícones
translation_of: Web/SVG
---
<div class="callout-box"><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG/Tutorial" title="SVG/Tutorial">Iniciando</a></strong><br>
Este tutorial irá ajudá-lo a começar a trabalhar com SVG.</div>
<p>{{SVGRef}}</p>
<p><strong>Gráficos Vetoriais Escaláveis (SVG)</strong> é uma linguagem de marcação <a href="/en-US/docs/XML" title="XML">XML</a> para descrever gráficos vetoriais bidimensionais. Essencialmente, SVG é para gráficos o que o XHTML é para texto.</p>
<p>SVG é similar em escopo à tecnologia Flash, propriedade da Adobe, mas se distingue por ser uma <a href="http://www.w3.org/Graphics/SVG/">recomendação da W3C</a>, ou seja, um padrão, e por ser baseado em XML e não em um formato binário fechado. O SVG foi criado para funcionar com outros padrões da <a href="http://www.w3.org/">W3C</a>, tais como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> e <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentação">Documentação</h2>
<dl>
<dt><a href="/en-US/docs/SVG/Element" title="SVG/Element">Referência de elementos SVG</a></dt>
<dd>Veja detalhes sobre cada elemento SVG.</dd>
<dt><a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">Referência de atributos SVG</a></dt>
<dd>Veja detalhes sobre cada atributo SVG.</dd>
<dt><a href="/en-US/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">Referência da API de DOM do SVG</a></dt>
<dd>Veja detalhes sobre toda a API de DOM do SVG.</dd>
<dt>Melhorando o conteúdo HTML</dt>
<dd>O SVG funciona juntamente com HTML, CSS e JavaScript. Use o SVG para melhorar uma página comum HTML ou uma aplicação web.</dd>
<dt>SVG na Mozilla</dt>
<dd>Notas e informações sobre como o SVG é implementado na Mozilla.
<ul>
<li><a href="/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Como o SVG e implementado no Firefox</a></li>
<li><a href="/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Tutorial sobre como usá-lo</a></li>
<li><a href="/en-US/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">SVG em XHTML</a></li>
</ul>
</dd>
</dl>
<h2 class="Community" id="Comunidade">Comunidade</h2>
<ul>
<li>Ver 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/">Suíte de Teste SVG</a></li>
<li><a href="http://jiggles.w3.org/svgvalidator/">Validador SVG</a> (Descontinuado)</li>
<li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">Mais Ferramentas...</a></li>
<li>Outros recursos: <a href="/en-US/docs/XML" title="XML">XML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas" title="HTML/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">Menus bubble SVG</a></li>
<li><a href="http://jwatt.org/svg/authoring/">Orientações para autoria SVG</a></li>
<li>Uma visão geral do <a href="/en-US/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Projeto SVG da Mozilla</a></li>
<li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Perguntas frequentes</a> sobre SVG e Mozilla</li>
<li>Slides e demos da palestra <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> no SVG Open 2009</li>
<li><a href="/en-US/docs/SVG/SVG_as_an_Image" title="SVG/SVG as an Image">SVG como uma imagem</a></li>
<li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">Animação SVG com SMIL</a></li>
<li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Leão</a>, <a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Borboleta</a> & <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tigre</a></li>
<li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galeria de arte SVG</a></li>
<li>Mais exemplos (<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
</ul>
<h3 id="Animação_e_interações">Animação e interações</h3>
<p>Assim como o HTML, o SVG tem um modelo de documento (DOM), eventos e é acessível por JavaScript. Isto permite aos desenvolvedores criar animações e imagens interativas.</p>
<ul>
<li>Algumas imagens SVG impressionantes em <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li>
<li>Extensão do Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) para adicionar suporte a um subconjunto de animação SMIL</li>
<li>Manipulação interativa de <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">fotos</a></li>
<li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformações HTML</a> usando <code>foreignObject</code> do SVG</li>
<li><a href="http://lab.vodafone.com/vienna/">Arte</a> animada</li>
</ul>
<h3 id="Mapeamentos_gráficos_jogos_experimentos_3D">Mapeamentos, gráficos, jogos & experimentos 3D</h3>
<p>Embora o SVG ainda tenha de percorrer um longo caminho para prover conteúdo web avançado, aqui estão alguns exemplos de uso intensivo de SVG.</p>
<ul>
<li><a href="http://www.codedread.com/yastframe.php">Um Tetris SVG</a> & <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
<li><a href="http://files.myopera.com/orinoco/svg/USStates.svg" title="">Find the State</a></li>
<li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mapa da população dos EUA</a></li>
<li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li>
<li><a href="http://jvectormap.com/" title="http://jvectormap.com/">jVectorMap</a> (mapas interativos para visualização de dados)</li>
</ul>
</div>
</div>
<div>{{HTML5ArticleTOC}}</div>
|
