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.