Scalable Vector Graphic
Antes de continuar, você deve ter um conhecimento básico do seguinte:
- HTML
- XML básico
Scalable Vector Graphics (Gráficos vetoriais escaláveis), SVG, é uma linguagem W3C XML para marcação de gráficos. Ela é parcialmente implementada no Firefox, Opera, Navegadores com WebKit , Internet Explorer e outros navegadores.
SVG significa gráficos vetoriais escaláveis SVG é usado para definir gráficos baseados em vetores para a Web SVG define gráficos em formato XML Cada elemento e atributo em arquivos SVG pode ser animado SVG é uma recomendação do W3C SVG integra-se com outros padrões, como CSS, DOM, XSL e JavaScript
- SVG 1.0 tornou-se uma recomendação do W3C em 4 de setembro de 2001.
- SVG 1.1 tornou-se uma recomendação do W3C em 14 de janeiro de 2003.
- SVG 1.1 (segunda edição) tornou-se uma recomendação do W3C em 16 de agosto de 2011.
As vantagens de usar SVG em relação a outros formatos de imagem (como JPEG e GIF) são:
Imagens SVG podem ser criadas e editadas com qualquer editor de texto Imagens SVG podem ser pesquisadas, indexadas, com script e compactadas Imagens SVG são escaláveis Imagens SVG podem ser impressas com alta qualidade em qualquer resolução Imagens SVG podem ser ampliadas Os gráficos SVG NÃO perdem qualidade se forem ampliados ou redimensionados SVG é um padrão aberto Arquivos SVG são XML puro
SVG possui elementos e atributos para retângulos, círculos, elipses, linhas, polígonos, curvas e muito mais.
SVG também oferece suporte a efeitos de filtro e desfoque, gradientes, rotações, animações, interatividade com JavaScript e muito mais.
Um documento SVG simples consiste no elemento raiz e em vários elementos de forma básicos que construirão um gráfico juntos.
Imagens SVG podem ser criadas com qualquer editor de texto ou com um programa de desenho, como o Inkscape .
Para você aprender o conceito e os fundamentos do SVG, este tutorial usará apenas texto simples para ensinar SVG.
A próxima página mostra como incorporar uma imagem SVG diretamente em uma página HTML!