20. Introdução ao SVG

O SVG (Scalable Vector Graphics) destina-se a representações gráficas a 2 dimensões.

Este tipo de representações podem ser significativamente enriquecidos usando, por exemplo, aplicações em javascript.

Em HTML5 pode ainda usar-se para representações gráficas a criação de bitmaps usando "canvas". No entanto, a sua implementação está ligada a scripts de javascript pelo que não será analisada aqui.

A título de exemplo inicial mostram-se a seguir algumas formas geoméricas:

ellipse

Constrói uma elipse com centro em "cx" e "cy" e raio horizontal "rx" e vertical "ry". Exemplo:

<ellipse cx="350" cy="40" rx="60" ry="30" />

Outros atributos: fill, stroke

line

Constrói uma linha que parte do ponto "x1", "y1" e termina no ponto "x2", "y2"

<line x1="280" y1="120" x2="460" y2="180" />

Outros atributos: fill, stroke

polygon

Constrói a partir de pelo menos três pontos uma linha fechada que os use pela sequência indicada. Os pontos são indicados pelos respectivos pares "x,y" no atributo "points". Exemplo:

<polygon points="450,60 480,120 420,120" />

Outros atributos: fill, stroke

rect

Constrói um rectângulo com a ponta superior esquerda em "x" e "y", de comprimento "width" e altura "height". Exemplo:

<rect x="10" y="130" width="60" height="50" />

O atributos "rx" e "ry" permitem definir o arredondado dos cantos do rectângulo.
Outros atributos: fill, stroke, rx, ry

text

Permite escrever texto no ambiente SVG. A posição inicial do texto é dada pelo ponto "x" e "y". Exemplo:

<text x="500" y="20" />Exemplos de SVG</text>

Outros atributos: fill, stroke, rx, ry

Principais atributos usados por diversas marcas SVG

fill

Enche os espaço delimitado pela objecto.

stroke

Pode ser:

• stroke: define cor de uma linha, texto ou parte exterior de um elemento.
• stroke-width: define a largura.
• stroke-linecap: define o modo como termina um elemento.
• stroke-dasharray: define o tipo de tracejado.
• stroke-opacity: Transparência. Toma valores no intervalo [0,1].

rx, ry

permitem definir o arredondado dos cantos, por exemplo, de um rectângulo.

Definições

A marca "<defs> ... </defs>" permite definir características que podem depois ser usados em objectos. Como exemplo, pode ver-se "linearGradiente" com "id" "grad1":

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" >
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>

que foi usado no atrituto fill da elipse:

<ellipse cx="600" cy="80" rx="60" ry="30" fill="url(#grad1)" />

Ver exemplos de SVG no início.

Nota: Exemplo tirado de: https://www.w3schools.com/html/html5_svg.asp