Tutorial SVG
SVG significa Scalable Vector Graphics.
O SVG define gráficos baseados em vetor em formato XML.
Exemplos em cada capítulo
Com nosso editor "Experimente você mesmo", você pode editar o SVG e clicar em um botão para visualizar o resultado.
Exemplo SVG
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
O que você já deve saber
Antes de continuar, você deve ter alguns conhecimentos básicos do seguinte:
- HTML
- XML básico
Se você quiser estudar esses assuntos primeiro, encontre os tutoriais em nossa página inicial .
O que é SVG?
- SVG significa Scalable Vector Graphics
- SVG é usado para definir gráficos baseados em vetor para a Web
- SVG define os gráficos em formato XML
- Cada elemento e cada atributo em arquivos SVG podem ser animados
- SVG é uma recomendação do W3C
- O SVG se integra a outros padrões W3C, como DOM e XSL
SVG é uma recomendação do W3C
O SVG 1.0 tornou-se uma Recomendação do W3C em 4 de setembro de 2001.
O SVG 1.1 tornou-se uma Recomendação do W3C em 14 de janeiro de 2003.
O SVG 1.1 (Segunda Edição) tornou-se uma Recomendação do W3C em 16 de agosto de 2011.
Vantagens SVG
As vantagens de usar SVG sobre outros formatos de imagem (como JPEG e GIF) são:
- Imagens SVG podem ser criadas e editadas com qualquer editor de texto
- As imagens SVG podem ser pesquisadas, indexadas, roteirizadas e compactadas
- As imagens SVG são escaláveis
- As imagens SVG podem ser impressas com alta qualidade em qualquer resolução
- As imagens SVG podem ser ampliadas
- Gráficos SVG NÃO perdem qualidade se forem ampliados ou redimensionados
- SVG é um padrão aberto
- Os arquivos SVG são XML puro
Criando imagens SVG
As imagens SVG podem ser criadas com qualquer editor de texto, mas geralmente é mais conveniente criar imagens SVG com um programa de desenho, como o Inkscape .