SVG Inline HTML5

HTML5 suporta SVG em linha.

O que é SVG?

  • SVG significa Gráficos Vetoriais Escaláveis (Scalable Vector Graphics)
  • SVG é usado para definir gráficos vetoriais para a web
  • SVG usa o formato XML para definir gráficos
  • As imagens SVG não perdem qualidade ao serem ampliado ou alterado de tamanho
  • SVG é um padrão da World Wide Web Consortium

Vantagens do SVG

Em comparação com outros formatos de imagem (como JPEG e GIF), as vantagens de usar SVG incluem:

  • Imagens SVG podem ser criadas e modificadas por editores de texto
  • Imagens SVG podem ser pesquisadas, indexadas, scriptadas ou comprimidas
  • SVG é escalável
  • Imagens SVG podem ser impressas em qualquer resolução com alta qualidade
  • SVG pode ser ampliado sem perda de qualidade na imagem

Suporte do Navegador

Internet Explorer 9, Firefox, Opera, Chrome e Safari suportam SVG inline.

Incorporar SVG diretamente em página HTML

No HTML5, você pode incorporar elementos SVG diretamente em páginas HTML:

Exemplo

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Experimente você mesmo

Resultados:

Tutorial SVG

Para aprender mais sobre SVG, acesse nosso Tutorial SVG.