SVG - Visão geral

O que é SVG?

SVG, Scalable Vector Graphics é uma linguagem baseada em XML para definir gráficos vetoriais.
O SVG se destina a exibir imagens na web.
Por serem imagens vetoriais, as imagens SVG nunca perdem qualidade, não importa como sejam reduzidas ou redimensionadas.
As imagens SVG suportam interatividade e animação.
SVG é um padrão W3C.
Outros formatos de imagem, como imagens raster, também podem ser combinados com imagens SVG.
SVG se integra bem com XSLT e DOM de HTML.

Vantagens

Use qualquer editor de texto para criar e editar imagens SVG.
Por serem baseadas em XML, as imagens SVG são pesquisáveis, indexáveis e podem ser inseridas em script e compactadas.
As imagens SVG são altamente escalonáveis, pois nunca perdem qualidade, não importa como sejam reduzidas ou redimensionadas
Boa qualidade de impressão em qualquer resolução
SVG é um padrão aberto

Desvantagens

Sendo o tamanho do formato de texto é maior do que em comparação com imagens raster formatadas em formato binário.
O tamanho pode ser grande, mesmo para imagens pequenas.

Exemplo

O seguinte snippet XML pode ser usado para desenhar um círculo no navegador da web.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Incorpore o XML SVG diretamente em uma página HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente sem qualquer plugin. No Internet Explorer, os controles ActiveX são necessários para visualizar imagens SVG.

Como o SVG se integra ao HTML

O elemento <svg> indica o início da imagem SVG.
Os atributos de largura e altura do elemento <svg> definem a altura e a largura da imagem SVG.
No exemplo acima, usamos um elemento <circle> para desenhar um círculo.
Os atributos cx e cy representam o centro do círculo. O valor padrão é (0,0). O atributo r representa o raio do círculo.
Outros atributos traço e largura do traço controlam o contorno do círculo.
O atributo fill define a cor de preenchimento do círculo.
A tag de fechamento </svg> indica o fim da imagem SVG.