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. 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 CSS, DOM, JavaScript, e SMIL. SVG é, essencialmente para os gráficos, o que o HTML é para o texto.
SVG images and their related behaviors are defined in XML 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.
Compared to classic bitmapped image formats such as JPEG or 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.
SVG tem sido desenvolvido por World Wide Web Consortium (W3C), desde 1999.
Documentação
- SVG - referência de elemento
- Details about each SVG element.
- SVG - referência de atributo
- 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.
- Connect 4
- jVectorMap (interactive maps for data visualization)
- JointJS (JavaScript diagramming library)
- D3 ( JavaScript library for visualizing data with HTML, SVG, and CSS )
