Inicação
Este tutorial irá ajudá-lo a começar a utilizar SVG.
Este tutorial irá ajudá-lo a começar a utilizar SVG.
Scalable Vector Graphics (SVG) é uma linguagem de marcação com base em XML para descrever dois gráficos vetoriais dimensionais. SVG é essencialmente para os gráficos o que o HTML é para o texto.
SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.
Documentação
- SVG element reference
- Details about each SVG element.
- SVG attribute reference
- Details about each SVG attribute.
- SVG DOM interface reference
- Details about the SVG DOM API, for interaction with JavaScript.
- Applying SVG effects to HTML content
- SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.
Comunidade
- Consulte os fóruns da Mozilla...
Ferramentas
- SVG Test Suite
- Validador de SVG (Descontinuado)
- Mais Ferramentas...
- Outros recursos: XML, CSS, DOM, Canvas
Exemplos
- Google Maps (route overlay) & Docs (spreadsheet charting)
- SVG bubble menus
- SVG authoring guidelines
- An overview of the Mozilla SVG Project
- Frequently asked questions regarding SVG and Mozilla
- SVG as an image
- SVG animation with SMIL
- SVG art gallery
Animação e interações
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.
- Some real eye-candy SVG at svg-wow.org
- Firefox extension (Grafox) to add a subset of SMIL animation support
- Interactive photos manipulation
- HTML transformations using SVG's
foreignObject
Mapeamento, gráficos, jogos e experiências em 3D
While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.
- Tetris
- Connect 4
- US population map
- jVectorMap (interactive maps for data visualization)
- JointJS (JavaScript diagramming library)
