You are on page 1of 85

Fundamentos SVG

SVG Essentials
J. David Eisenberg
Editora: O'Reilly
Primeira edio fevereiro 2002
ISBN: 0-596-00223-8, 364 pginas

Captulo 1. Introduo

SVG, que significa Scalable Vector Graphics, uma aplicao XML que torna possvel representar
informaes grficas de uma forma compacta e porttil. O interesse em SVG est crescendo
rapidamente, e ferramentas para criar e visualizar arquivos SVG j esto disponveis a partir de grandes
empresas. Este captulo comea com uma descrio dos dois principais sistemas de computador grfico,
e descreve onde o SVG se encaixa no mundo dos grficos. O captulo termina com um breve exemplo
que utiliza muitos dos conceitos que iro ser explorados em detalhes nos captulos seguintes.

1.1 Sistemas Grficos


Os dois principais sistemas para representar informao grfica em computadores so grficos raster e
grficos de vetor.

1.1.1 Grficos Raster


Em grficos de varredura, uma imagem representada como uma matriz retangular de elementos de
imagem, ou pixels. Cada pixel representado quer pelos seus valores de cor RGB ou como um ndice
em uma lista de cores. Esta srie de pixels, tambm chamada de mapa de bits, muitas vezes
armazenada num formato compactado. Como a maioria dos dispositivos de vdeo modernos so
dispositivos tambm raster, exibir uma imagem requer um programa de visualizao para fazer pouco
mais do que descompactar o bitmap e transferi-lo para a tela.

1.1.2 Grficos Vetoriais


Em um sistema grfico de vetor, uma imagem descrita matematicamente como uma srie de formas
geomtricas. Ao invs de receber um conjunto acabado de pixels, um programa de visualizao vetorial
recebe os comandos para desenhar formas em conjuntos especficos de coordenadas.
Se voc pensar em produzir uma imagem em um papel grfico, os grficos raster trabalham descrevendo
quais quadrados devem ser preenchidos com quais cores. Os grficos vetoriais trabalham descrevendo
quais pontos da grade em que as linhas ou curvas devem ser desenhadas. Algumas pessoas descrevem
vetor grfico como um conjunto de instrues para um desenho, enquanto os grficos de bitmap so
pontos de cor em lugares especficos. Os grficos vetoriais "entendem" o que so - um quadrado "sabe"
que um quadrado e um texto "sabe" que um texto porque eles so objetos em vez de uma srie de
pixels; e objetos de vetor podem mudar sua forma e cor enquanto os grficos de bitmap no podem.
Alm disso, todo o texto pesquisvel, porque realmente texto, no importa como ele se parece ou
como ele rodado ou transformado.

Uma outra maneira de pensar nos grficos raster como uma pintura sobre uma tela, enquanto grficos
vetoriais poderiam ser linhas e formas, feitas de um material elstico, que pudessem ser movidos em
torno de um fundo.

1.1.3 Utilizaes de grficos Raster


Grficos Raster so mais apropriados para uso em fotografias, que raramente so compostas de linhas e
curvas distintas. As imagens digitalizadas so muitas vezes armazenadas como bitmaps; embora at o
original possa ser "line art", ns queremos armazenar a imagem como um todo, e no nos
preocuparmos com seus componentes individuais. Uma mquina de fax, por exemplo, no se importa
com o que voc tenha desenhado; ela simplesmente transmite pixels de um lugar para outro em forma
de raster.

Ferramentas para criar imagens em formato raster so largamente utilizados e, geralmente, mais fceis de
usar do que muitas ferramentas baseadas em vetores. H muitas maneiras diferentes para compactar e
armazenar um grfico raster e a representao interna desses formatos pblico. Bibliotecas de
programa para ler e escrever imagens em formatos compactados, como JPEG, GIF e PNG so
amplamente disponveis. Estas so algumas das razes que navegadores web tm, at a chegada do SVG,
para suportar apenas imagens raster.

1.1.4 Utilizaes de grficos vetoriais


Os grficos vetoriais so usados em:
Programas de Desenho/Projeto Assistido por Computador (CAD), onde a medio precisa e a
capacidade de zoom de um desenho para ver os detalhes so essenciais;
Programas como o Adobe Illustrator, que so usados para projetar grficos que sero impressos
em impressoras de alta resoluo;
O formato de imagem e a linguagem de impresso Adobe PostScript; cada elemento que voc
imprime descrito em termos de linhas e curvas;
O sistema Macromedia Flash baseado em vetor para a concepo de animaes, apresentaes, e
web sites.

difcil para um navegador ou outro agente do usurio analisar a sada de texto incorporado, ou para
um servidor, criar dinamicamente arquivos grficos vetoriais a partir de dados externos, porque a
maioria destes arquivos so codificados em formato binrio ou fluxos de bits hermeticamente fechados.
A maior parte das representaes internas dos grficos vetoriais so proprietrias e o cdigo para exibi-
los ou cri-los no esto disponveis.
1.2 Escalabilidade
Embora eles no sejam to populares como os grficos raster, os grficos vetoriais tm uma caracterstica
que os torna valiosos em muitas aplicaes - eles podem ser dimensionados, sem perda de qualidade de
imagem.

Como um exemplo, aqui esto dois desenhos de um gato. O primeiro foi feito com quadrcula, o
segundo uma imagem vetorial. Ambos so mostrados como eles aparecem em uma tela que exibe 72
pixels por polegada.

Quando um programa de visualizao amplia o grfico de varredura, ele deve encontrar alguma maneira
de expandir cada pixel. A abordagem mais simples para ampliar por um fator de quatro fazer com que
cada pixel aumente quatro vezes. O resultado, no particularmente agradvel.

Embora seja possvel usar tcnicas tais como a deteco de borda e anti-aliasing para fazer a imagem
ampliada mais agradvel, estas tcnicas so demoradas. Alm disso, uma vez que todos os pixels em um
grfico de varredura so igualmente annimos, no h nenhuma garantia de que um algoritmo possa
detectar corretamente as bordas das formas. Os resultados da aplicao do anti-aliasing algo como a
figura abaixo:
A expanso de uma imagem de vetor por um fator de quatro, por outro lado, requer meramente ao
programa de visualizao multiplicar todas as coordenadas das formas por quatro e redesenh-las de
acordo com a resoluo do dispositivo de exibio. Assim, a imagem vetorial ampliada de 72 pontos por
polegada, mostra ntidas as bordas claras sobre as linhas com significativamente menos efeitos de
pixelao do que a imagem raster expandida.

1.3 O papel do SVG

Em 1998, o World Wide Web Consortium (W3C) formou um grupo de trabalho para desenvolver uma
representao de grficos vetoriais, como aplicao XML. Como SVG uma aplicao XML, as
informaes sobre uma imagem so armazenadas como texto simples, e traz as vantagens de
transportabilidade e interoperabilidade, alm do XML ser um sistema aberto.

Programas de CAD e design grfico, muitas vezes armazenam desenhos em um formato binrio
proprietrio. Ao adicionar a capacidade de importar e exportar desenhos em formato SVG, as aplicaes
ganham um formato comum, padro de intercmbio de informaes.

Uma vez que uma aplicao XML, o SVG coopera com outras aplicaes XML. Um livro didtico de
matemtica, por exemplo, poderia usar XSL-Formatting Objects para texto explicativo, MathML para
descrever equaes, e SVG para gerar os grficos das equaes.

O SVG uma especificao oficial do grupo de trabalho W3C (World Wide Web Consortium).
Alguns aplicativos, como o Adobe Illustrator e Jasc WebDraw, exportam desenhos em formato SVG. Na
Web, os plug-ins SVG Viewers permitem que os usurios vejam apresentaes com muitas das
capacidades de script e animao que o Flash tem. Uma vez que o SVG um arquivo XML, o texto no
visor SVG est disponvel para qualquer agente do usurio que pode analisar XML.

1.4 Criando um grfico SVG


Nesta seo, vamos gravar um arquivo SVG, que produz a imagem do gato que mostramos no incio do
captulo. Este exemplo apresenta muitos dos conceitos que vamos explicar em mais detalhes nos
captulos seguintes. Este arquivo ser um bom exemplo de como gravar um arquivo que no
necessariamente a maneira que voc deve escrever um arquivo SVG que far parte de um projeto
acabado.
1.4.1 Estrutura do Documento
Comeamos com a instruo de processamento XML padro e declarao DOCTYPE. A raiz <svg>
define a largura e a altura do grfico em pixels. O contedo do elemento <title> est disponvel para um
programa de visualizao usar em uma barra de ttulo ou como uma ferramenta de dica, e o elemento
<desc> permite fornecer uma descrio completa da imagem.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="140" height="170">
<title>Gato</title>
<desc>desenho de um gato</desc>
<!-- o desenho vai aqui ->
</svg>

1.4.2 Formas Elementares


Desenhamos o rosto do gato, adicionando um elemento <circle>. Os atributos do elemento especificam
a coordenada x e coordenada y do centro do crculo e o raio. O ponto (0,0) o canto superior esquerdo
da imagem. A coordenada x aumenta quando voc se move horizontalmente para a direita; a
coordenada y aumenta quando voc se move verticalmente para baixo.

A localizao e tamanho do crculo so parte da estrutura do desenho. A cor com a qual desenhada
parte de sua apresentao. Como habitual com aplicaes XML, queremos estrutura separada da
apresentao para a mxima flexibilidade. Apresentao de informaes contida no atributo de estilo.
O seu valor ser uma srie de propriedades e valores de apresentao. Vamos usar uma cor de trao de
preto para o contorno, e uma cor de preenchimento "none" para fazer o rosto transparente.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="140" height="170">
<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
</svg>

1.4.3 Especificando Estilos como Atributos


Agora vamos adicionar mais dois crculos para os olhos. Embora o seu preenchimento e cores de traado
sejam realmente parte da apresentao, o SVG no permite a voc especific-los como atributos
individuais. Neste exemplo, as cores de preenchimento e traado foram especificados como dois
atributos separados ao invs de dentro de um atributo de estilo. Voc provavelmente no vai usar este
mtodo muitas vezes; vamos discutir isso mais adiante no Captulo 4.

<svg width="140" height="170">


<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
</svg>
1.4.4 Agrupamento de objetos grficos
O exemplo abaixo adiciona os bigodes no lado direito do rosto do gato com dois elementos <line>.
Queremos tratar esses bigodes como uma unidade (voc ver porque em um momento), por isso, vamos
coloc-los no elemento de agrupamento<g>, e dar-lhe um "id". Uma linha especificada, com as
coordenadas x e y de seu ponto de partida (x1 e y1) e terminando no ponto (x2 e y2).
O resultado apresentado na figura.

<svg width="140" height="170">


<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="bigodes">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
</svg>

1.4.5 Transformando o Sistema de Coordenadas


Agora vamos acessar o grupo "bigodes" atravs do elemento <use>, e transform-los nos bigodes do lado
esquerdo. O exemplo a seguir primeiro inverte o sistema de coordenadas pela multiplicao da
coordenada (x) por (-1) em um transformao de escala. Isto significa que o ponto (75, 95) est agora
localizado no local que seria (-75, 95) no sistema de coordenadas original. No novo sistema escalonado,
a coordenada incrementa o quanto voc moveu para a esquerda. Isto significa que temos de traduzir
(mover) o sistema de coordenadas 140 pixels para a direita, no sentido negativo, para obt-los onde ns
os queremos, como mostrado na figura.

<svg width="140" height="170">


<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="bigodes">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use xlink:href="#bigodes" transform="scale(-1 1) translate(-140 0)" />
</svg>

O valor do atributo "transform" lista as transformaes, uma aps a outra, separadas por espaos em
branco.

1.4.6 Outras formas bsicas


O prximo exemplo constri as orelhas e boca com o elemento <polyline>, que leva pares de
coordenadas x e y como os pontos de atributo. Os nmeros podem ser separados por espaos em branco
ou vrgulas.

<svg width="140" height="170">


<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="bigodes">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use xlink:href="#bigodes" transform="scale(-1 1) translate(-140 0) />
<! orelhas -->
<polyline points="108 62, 90 10, 70 45, 50 10, 32 62" style="stroke: black; fill: none;" />
<!-- boca -->
<polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" />
</svg>

1.4.7 Caminhos (Paths)


Todas as formas bsicas so realmente atalhos para o elemento <path> mais geral, que o exemplo abaixo
usa para adicionar o nariz ao gato. Este elemento foi concebido para tornar especfico um caminho, ou
uma sequncia de linhas e curvas, o mais compacto possvel. O caminho no exemplo traduz, em
palavras, a: "Mover para coordenada (75,90). Desenhar uma linha para coordenada (65,90). Desenhar
um arco elptico com um raio-x de 5 e um raio-y de 10, terminando de volta para coordenada (75,90). "

<svg width="140" height="170">


<title>Gato</title>
<desc>desenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="bigodes">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
<!-- orelhas -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" />
<!-- boca -->
<polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" />
<!-- nariz -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" />
</svg>

1.4.8 Texto
Finalmente, uma vez que esta imagem to grosseiramente elaborada, h uma boa chance de muitas
pessoas no conseguirem perceber que um gato. Assim, acrescentaremos o texto imagem como um
rtulo. No elemento <text>, os atributos x e y que especificam a localizao do texto so parte da
estrutura. A famlia de fontes e tamanhos de fonte so parte da apresentao e, assim, parte do atributo
de estilo. Ao contrrio dos outros elementos que temos visto, <text> um elemento de continer, e seu
contedo o texto que se deseja exibir.

<svg width="140" height="170">


<title>Gato</title>
<desc>dsenho de um gato</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="bigodes">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black; " />
</g>
<use xlink:href="#bigodes" transform="scale(-1 1) translate(-140 0)" />
<!-- orelhas -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" />
<!-- boca -->
<polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" />
<!-- nariz -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" />
<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt; stroke: none; fill: black;">Cat</text>
</svg>

Isso conclui nossa breve viso geral de SVG; nos captulos seguintes vamos examinar estes conceitos em
profundidade.
Captulo 2. Coordenadas

O mundo do SVG uma tela infinita. Neste captulo, vamos discutir como voc diz a um
programa de visualizao qual parte desta tela voc est interessado, o que suas dimenses so,
e como voc faz para localizar pontos dentro dessa rea.

2.1 A Viewport

A rea da tela que o documento pretende usar chamada de "viewport" (janela de exibio). Voc
estabelece o tamanho desta janela com os atributos de largura e altura do elemento <svg>. Os valores
desses atributos podem ser simplesmente um nmero, que se presume ser em pixels; voc tambm pode
especificar a largura e altura como um nmero seguido por um identificador de unidade, o qual pode
ser um dos seguintes:

UNIDADE DESCRIO
em O tamanho de fonte da fonte padro, geralmente equivalente altura de um caractere
ex A altura da letra x
px Pixels
pt Pontos (1/72 de polegada)
pc Picas (1/6 de polegada)
cm Centmetros
m Milmetros
ni Polegadas

Exemplos:

<svg width="200" height="150">


<svg width="200px" height="150px">
Ambos especificam uma rea de 200 pixels de largura e 150 pixels de altura.

<svg width="2cm" height="3cm">


Especifica uma rea de dois centmetros de largura e trs centmetros de altura.

<svg width="2cm" height="36pt">


possvel, embora no usual, misturar unidades; este elemento especifica uma rea de dois
centmetros de largura e trinta e seis pontos de altura.

Se voc tiver um elemento <svg> aninhado em outro elemento <svg>, a tag aninhada pode tambm
especificar a sua largura e altura como uma percentagem, medida em termos do elemento dentro do
qual est localizada. Veremos elementos <svg> aninhados na seo 2.5.

2.2 Usando as Coordenadas padro do Usurio

Quando voc no usar especificadores de unidade em seu elemento <svg>, o visualizador estabelece um
sistema onde a horizontal, ou coordenada-x aumenta medida que se desloca para a direita, e a vertical,
ou coordenada-y, aumenta medida que voc se move verticalmente para baixo. O canto esquerdo
superior da janela est definido para ter uma coordenada (x, y) igual a (0, 0), tambm chamada de
origem. O sistema de coordenadas um sistema geomtrico puro; Os pontos no tm largura nem
altura, e as linhas de grade so consideradas infinitamente finas. Voltaremos a este assunto no Captulo
3.

O exemplo a seguir estabelece uma "viewport" de duzentos pixels de largura e duzentos pixels de altura,
em seguida, desenha um retngulo cujo canto superior esquerdo est na coordenada (10, 10) com uma
largura de 50 pixels e uma altura de 30 pixels.

<svg width="200" height="200">


<rect x="10" y="10" width="50" height="30" style="stroke: black; fill: none;" />
</svg>

Uso explcito de unidades:


<svg width="200" height="200">
<rect x="10mm" y="10mm" width="15mm" height="10mm" style="stroke:black; fill:none;" />
</svg>

Usando unidades no elemento <svg>


<svg width="70mm" height="70mm">
<rect x="10" y="10" width="50" height="30" style="fill: none; stroke: black;" />
</svg>

2.3 Coordenadas especificadas pelo usurio para uma Viewport

Nos exemplos at agora, as unidades foram consideradas pixels. s vezes isso no o que voc quer. Por
exemplo, voc pode querer criar um sistema onde as coordenadas do usurio representam 1/16 cm (um
dezesseis avos) de um centmetro. (Estamos usando este sistema de coordenadas para provar um ponto,
no para mostrar um modelo de bom design.) Neste sistema, uma praa que de 40 unidades por 40
unidades ser exibida com 2,5 centmetros de lado.

Para conseguir esse efeito, voc deve definir o atributo "ViewBox" no elemento <svg>. O valor deste
atributo consiste de quatro nmeros que representam a coordenada-x mnima, a coordenada-y mnima,
a largura e altura do sistema de coordenadas do usurio que voc deseja sobrepor janela de exibio.
Assim, para configurar o sistema de unidades de coordenadas de dezesseis-por-centmetros (1/16 cm),
para um desenho de quatro por cinco centmetros (4 x 5 cm), voc pode usar esta tag inicial:
<svg width="4cm" height="5cm" viewBox="0 0 64 80">

Desenho de uma casa usando o novo sistema de coordenadas:


<svg width="4cm" height="5cm" viewBox="0 0 64 80">
<rect x="10" y="35" width="40" height="40"
style="stroke: black; fill: none;" />
<!-- telhado -->
<polyline points="10 35, 30 7.68, 50 35"
style="stroke:black; fill: none;" />
<!-- porta -->
<polyline points="30 75, 30 55, 40 55, 40 75"
style="stroke:black; fill: none;" />
</svg>

Os nmeros que voc especificar para o valor do atributo "ViewBox" podem ser separados por vrgulas
ou espaos em branco. Se a largura ou altura zero, nada do seu grfico ser mostrado. um erro
especificar um valor negativo para a largura ou altura na "ViewBox".

2.4 Preservar as propores (Aspect Ratio)

No exemplo anterior, a relao de aspecto, ou a relao entre largura e altura, da janela de exibio e
o "ViewBox" eram idnticos (4/5 = 64/80). O que acontece, no entanto, se a relao de aspecto da
janela de exibio e da ViewBox no forem a mesma? como no presente exemplo, onde tem uma
ViewBox com proporo de um para um, mas o visor tem uma relao de 02:59 de aspecto?
<svg width="45px" height="135px" viewBox="0 0 90 90">

H trs coisas que SVG pode fazer nesta situao:

Dimensionar o grfico uniformemente de acordo com a menor dimenso para que o grfico caiba
inteiramente na janela de exibio. No exemplo, a imagem seria metade de sua largura e altura original.
Vamos mostrar-lhe exemplos disso na Seo 2.4.2.

Dimensionar o grfico uniformemente de acordo com a dimenso maior e cortar as peas que se
encontram fora do visor. No exemplo, o quadro se tornaria uma vez e meia a sua largura e altura
original. Vamos mostrar-lhes exemplos na Seo 2.4.3.

Esticar e esmagar o desenho para que ele se encaixe perfeitamente na nova janela. (Isto , no preservar
a proporo) Ns vamos cobrir isso na Seo 2.4.4.

No primeiro caso, uma vez que a imagem vai ser menor do que a janela de visualizao em uma
dimenso, voc deve especificar onde posicion-la. No exemplo, a imagem ser dimensionada de
maneira uniforme a uma largura e altura de 45 pixels. A largura do grfico reduzido se encaixa na
largura da "ViewPort" perfeitamente, mas voc deve agora decidir se a imagem se rene (est alinhada
com) a parte superior, mdia ou inferior da janela de exibio com a altura de 135 pixels.
No segundo caso, uma vez que a imagem vai ser maior do que a janela de visualizao em uma
dimenso, voc deve especificar qual rea deve ser cortada fora. No exemplo, a imagem ser
dimensionada de modo uniforme para uma largura e altura de 135 pixels. Agora, a altura do grfico
cabe na "ViewPort" perfeitamente, mas voc deve decidir se vai cortar fora do lado direito, do lado
esquerdo, ou em ambas as extremidades da imagem para caber na largura da janela de visualizao de 45
pixels.

2.4.1 Especificar o alinhamento para preservar o AspectRatio (relao altura x largura)

O atributo "preserveAspectRatio" permite que voc especifique o alinhamento da imagem


dimensionada no que diz respeito janela de exibio, e se voc quer atender s bordas ou cort-las.
O modelo para esse atributo :
preserveAspectRatio="alignment [meet | slice]"

em que o alinhamento do eixo especifica a localizao, e um dos xMinYMin, xMinYMid, xMinYMax,


xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid, ou xMaxYMax. Este especificador de
alinhamento formado pela concatenao de um alinhamento-X e um alinhamento-Y, conforme
mostrado. O valor padro para "preserveAspectRatio" "xMidYMid meet".

O alinhamento y comea com uma letra maiscula, uma vez que os alinhamentos (x,y)
esto concatenados em uma nica palavra.

Os valores para o alinhamento do atributo "preserveAspectRatio"


Alinhamento coord. X
Valor Ao
ni Mx Alinha a coordenada-x mnima da ViewBox com o canto esquerdo da
janela de exibio.
di Mx Alinha o ponto mdio-x da ViewBox com o valor do ponto mdio-x da
janela de exibio.
axM Alinha o ponto mximo-x da ViewBox com o canto direito da janela de
exibio.
Alinhamento coord. Y
Valor Ao
ni M Y Alinha a coordenada-y mnima da ViewBox com a borda superior da
janela de exibio.
di M Y Alinha o ponto mdio-y da ViewBox com o valor do ponto mdio-y da
janela de exibio.
xaYM Alinha a coordenada-y mxima da ViewBox com a borda inferior da janela
de exibio.

Ento, se voc quer ter a imagem com uma viewBox = "0 0 90 90" cabendo inteiramente dentro de
uma "viewport" que de 45 pixels de largura e 135 pixels de altura, alinhados na parte superior da
janela de exibio, voc escreveria:
<svg width="45px" height="135px" viewBox="0 0 90 90" preserveAspectRatio="xMinYMin meet">

Neste caso, uma vez que a largura se adapta precisamente, o alinhamento X irrelevante;
voc poderia igualmente bem usar xMidYmin ou xMaxYMin. No entanto, por uma
questo de coerncia, geralmente o melhor a fazer especificar ambos, mesmo quando
somente um eixo afetado.

Isso tudo bastante abstrato; aqui esto alguns exemplos concretos que mostram como as combinaes
de alinhamento e conhecimento das caractersticas do "slice" (fatia de imagem) interagem entre si.

Uso do especificador "meet"

<!-- viewports altas -->


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="45" height="135">
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="45" height="135">
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="45" height="135">

<!-- viewports largas -->


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="135" height="45">
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="135" height="45">
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="135" height="45">

Uso do especificador Slice

<!--viewports alta-->
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90" width="45" height="135">
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90" width="45" height="135">
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90" width="45" height="135">

<!-- viewports larga-->


<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90" width="135" height="45">
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90" width="135" height="45">
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90" width="135" height="45">
2.4.4 No usando um especificador

Finalmente, h a terceira opo para escalar um grfico quando a "viewBox" e a janela de exibio no
tm a mesma proporo. Se voc especificar preserveAspectRatio = "none", o grfico ser dimensionado
de maneira no uniforme de acordo com as coordenadas de seu utilizador, de modo a caber na janela de
exibio.

<!--viewport alta-->
<svg preserveAspectRatio="none" viewBox="0 0 90 90" width="45" height="135">

<!--viewport larga-->
<svg preserveAspectRatio="none" viewBox="0 0 90 90" width="135" height="45">

2.5 Sistemas de Coordenadas aninhadas

Voc pode estabelecer uma nova janela de exibio e novo sistema de coordenadas a qualquer momento,
colocando outro elemento <svg> em seu documento. O efeito criar uma "mini-tela" sobre a qual voc
pode desenhar. Ns usamos esta tcnica para criar ilustraes.
Em vez de desenhar os retngulos, em seguida, redimensionamos e posicionamos o gato dentro de cada
um (a abordagem de fora bruta), tomando estes passos:

Desenhe os retngulos azuis na tela principal


Para cada retngulo, defina um novo elemento <svg> com o atributo apropriado
"preserveAspectRatio"
Desenhe o gato em que a nova tela (com <use>), e deixe SVG fazer o trabalho pesado. Aqui est um
exemplo simplificado que mostra um crculo na tela principal, em seguida, dentro de um novo canvas
que delineado por um retngulo azul que tambm sobre a tela principal.

Primeiro, gere o SVG para o sistema de coordenadas principal e o crculo. Note que estabelecemos que
as coordenadas do usurio coincidiro exatamente com a janela de exibio, neste documento.
<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;" />
</svg>

Agora, desenhe o contorno da caixa mostrando onde queremos que a nova janela de exibio aparea:
<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;" />
<rect x="100" y="5" width="30" height="80" style="stroke: blue; fill: none;" />
</svg>

Agora, adicione outro elemento <svg> para a nova janela. Alm de especificar a "viewBox", largura,
altura e a especificao "preserveAspectRatio", voc tambm pode especificar os atributos x e y - em
termos da incluso do elemento <svg> - onde a nova janela de exibio deve ser estabelecida. (Se voc
no der valores para x e y, presume-se que seja zero).
<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
<rect x="100" y="5" width="30" height="80" style="stroke: blue; fill: none;" />
<svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50"
preserveAspectRatio="xMaxYMax meet">
</svg>
</svg>

Configurar as novas coordenadas com este elemento <svg> aninhado no muda a maneira de
visualizao, mas ele permite que voc adicione o crculo no novo sistema.
<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
<rect x="100" y="5" width="30" height="80" style="stroke: blue; fill: none;"/>
<svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50"
preserveAspectRatio="xMaxYMax meet">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
</svg>
</svg>
Captulo 3. Formas Bsicas

Uma vez que um sistema de coordenadas estabelecido na tag <svg>, voc est pronto para comear a
desenhar. Neste captulo, vamos mostrar as formas bsicas que voc pode usar para criar os elementos
principais da maioria dos desenhos: linhas, retngulos, polgonos, crculos e elipses.

3.1 Linhas

O SVG permite desenhar uma linha reta com o elemento <line>. Basta especificar as coordenadas (x, y)
dos pontos iniciais e finais da linha. Coordenadas podem ser especificadas sem unidades, caso em que
elas sero consideradas como coordenadas de usurio, ou com unidades, tal como EM, em, etc.
Conforme descrito no Captulo 2, na Seo 2.1.

<line x1="start-x" y1="start-y" x2="end-x" y2="end-y">

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!--linha horizontal-->
<line x1="40" y1="20" x2="80" y2="20" style="stroke: black;" />
<!--linha vertical-->
<line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;" />
<!--linha diagonal-->
<line x1="30" y1="30" x2="85" y2="85" style="stroke: black;" />
</svg>

3.2 Caractersticas do trao

As linhas so consideradas como traos de uma caneta desenhando na tela. O tamanho, cor e estilo do
trao da caneta so partes da apresentao da linha. Assim, estas caractersticas so os atributos de estilo.

3.2.1 Largura do trao

Como mencionado no Captulo 2, as linhas de grade da tela so infinitamente finas. Onde, ento, se faz
a localizao de uma linha ou trao em relao linha de grade? A resposta que a linha de grade
localiza-se no centro do trao de uma linha.
<svg width="200px" height="200px" viewBox="0 0 200 200">
<!-- linha horizontal -->
<line x1="30" y1="10" x2="80" y2="10" style="stroke-width: 10; stroke: black;" />
<!-- linha vertical -->
<line x1="10" y1="30" x2="10" y2="80" style="stroke-width: 10; stroke: black;" />
<!-- linha diagonal -->
<line x1="25" y1="25" x2="75" y2="75" style="stroke-width: 10; stroke: black;" /> </svg>

3.2.2 Cor do trao

Voc pode especificar a cor do trao em uma variedade de formas:


Um dos nomes-chave de cor: aqua, preto, azul, fcsia, cinzento, verde, cal, marrom, marinho, verde-
oliva, roxo, vermelho, prata, cerceta, branco e amarelo.
Um especificador hexadecimal de seis dgitos no formato #RRGGBB, onde rr o componente
vermelho, gg o componente verde, e bb o componente azul no intervalo 0-ff.
Um especificador hexadecimal de trs dgitos no formato #rgb, onde r o componente vermelho, g o
componente verde, e b o componente azul no intervalo de 0-f. Esta uma forma abreviada do mtodo
anterior de cor especifica. Para produzir o equivalente de seis dgitos, cada dgito da forma curta
duplicada; assim # D6E o mesmo que # dd66ee.
Um especificador rgb no formato rgb (valor de vermelho, valor de verde, valor de azul), onde cada
valor na gama de 0-255 ou uma percentagem na gama de 0% a 100%.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!-- vermelho (red) -->
<line x1="10" y1="10" x2="50" y2="10" style="stroke: red; stroke-width: 5;" />
<!-- verde claro (light green) -->
<line x1="10" y1="20" x2="50" y2="20" style="stroke: #9f9; stroke-width: 5;" />
<!-- azul claro (light blue) -->
<line x1="10" y1="30" x2="50" y2="30" style="stroke: #9999ff; stroke-width: 5;" />
<!-- laranja mdio (medium orange) -->
<line x1="10" y1="40" x2="50" y2="40" style="stroke: rgb(255, 128, 64); stroke-width: 5;" />
<!-- roxo (deep purple) -->
<line x1="10" y1="50" x2="50" y2="50" style="stroke: rgb(60%, 20%, 60%); stroke-width: 5;" />
</svg>

Tambm possvel usar uma das palavras-chave das cores listadas na seo 4.2 da especificao SVG
disponvel em http://www.w3.org/TR/SVG/types.html#ColorKeywords ou uma das cores do sistema
CSS2, com palavras-chave listadas em http://www.w3.org/TR/REC-CSS2/ui.html#system-colors .
3.2.3 Opacidade do trao

At este ponto, todas as linhas dos exemplos foram slidas, obscurecendo qualquer coisa abaixo delas.
Voc controla a opacidade (que o oposto de transparncia) de uma linha, dando ao trao um valor de
opacidade de 0.0 a 1.0, em que 0.0 completamente transparente e 1.0 completamente opaca. Um
valor menor que zero ir ser alterado para 0.0; um valor maior que um vai ser alterado para 1.0.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<line x1="10" y1="10" x2="50" y2="10" style="stroke-opacity: 0.2; stroke: black; stroke-width: 5;" />
<line x1="10" y1="20" x2="50" y2="20" style="stroke-opacity: 0.4; stroke: black; stroke-width: 5;" />
<line x1="10" y1="30" x2="50" y2="30" style="stroke-opacity: 0.6; stroke: black; stroke-width: 5;" />
<line x1="10" y1="40" x2="50" y2="40" style="stroke-opacity: 0.8; stroke: black; stroke-width: 5;" />
<line x1="10" y1="50" x2="50" y2="50" style="stroke-opacity: 1.0; stroke: black; stroke-width: 5;" />
</svg>

3.2.4 Atributo de linhas pontilhadas do trao (dasharray)

Se voc precisar de linhas pontilhadas ou tracejadas, use o atributo "stroke-dasharray", cujo valor
consiste de uma lista de nmeros, separados por vrgulas ou espao em branco, especificando trao
comprimento e lacunas. A lista deve ter um nmero par de entradas, mas se voc der um nmero de
entradas estranho, o SVG vai repetir a lista de modo que o nmero total de entradas seja o mesmo.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!-- nove-pixel dash, cinco-pixel gap -->
<line x1="10" y1="10" x2="100" y2="10" style="stroke-dasharray: 9, 5; stroke: black; stroke-width: 2;" />
<!-- cinco-pixel dash, trs-pixel gap, nove-pixel dash, dois-pixel gap -->
<line x1="10" y1="20" x2="100" y2="20" style="stroke-dasharray: 5, 3, 9, 2; stroke: black; stroke-width: 2;" />
<!-- Nmero mpar de entradas duplicada; isto equivalente a: nove-pixel dash, trs-pixel gap, cinco-pixel dash,
nove-pixel gap, trs-pixel dash, cinco-pixel gap -->
<line x1="10" y1="30" x2="100" y2="30" style="stroke-dasharray: 9, 3, 5; stroke: black; stroke-width: 2;" />
</svg>

3.3 Retngulos

O retngulo a mais simples das formas bsicas. Voc especifica as coordenadas x e y do canto esquerdo
superior do retngulo, a sua largura, e sua altura. O interior do retngulo preenchido com a cor de
preenchimento que voc especificar. Se voc no especificar uma cor de preenchimento, o interior da
forma preenchido, por padro, com preto. A cor de preenchimento pode ser especificada de qualquer
uma das maneiras descritas, ou pode levar o valor "none" para deixar o interior sem preenchimento e,
portanto, transparente. Voc tambm pode especificar "fill-opacity" no mesmo formato. Ambos, "fill" e
"fill-opacity" so propriedades de apresentao, e pertencem ao atributo "style".

Depois que o interior preenchido (se necessrio), o contorno do retngulo desenhado com traos,
cujas caractersticas voc pode especificar como com as linhas (dasharray). Se voc no especificar um
trao, o valor "none" se presume, e o retngulo desenhado sem contorno.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!-- black no preenchimento, sem trao -->
<rect x="10" y="10" width="30" height="50" />

<!-- sem preenchimento, trao black -->


<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;" />

<!-- preenchimento blue, trao fino semi-transparente e vermelho -->


<rect x="10" y="70" width="25" height="30" style="fill: #0000ff; stroke: red; stroke-width: 7; stroke-opacity:
0.5;" />

<!-- preenchimento amarelo semi-transparente, linha tracejada verde -->


<rect x="50" y="70" width="35" height="20" style="fill: yellow; fill-opacity: 0.5; stroke: green; stroke-width: 2;
stroke-dasharray: 5, 2" />
</svg>

Uma vez que os traos formam o contorno da grade de linhas abstratas "straddle", os traados sero a
metade dentro da forma e a metade do lado de fora da forma. A figura abaixo mostra um "close" do
contorno vermelho semi-transparente que demonstra isso claramente.

Se voc no especificar um valor inicial para x ou y, presume-se que seja zero. Se voc especificar uma
largura ou altura de zero, em seguida, o retngulo no ser exibido. um erro fornecer valores negativos
para largura ou altura.

3.3.1 retngulos arredondados

Se voc deseja ter retngulos com cantos arredondados, especifique o "rx" e "ry" - raio da curvatura do
canto. O nmero mximo que voc pode especificar para rx (o x-raio) metade da largura do retngulo;
o valor mximo de ry (a y-raio) a metade da altura do retngulo. Se voc especificar apenas um dos rx
ou ry, presume-se que sejam iguais.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!-- rx e ry iguais, incrementando -->
<rect x="10" y="10" width="20" height="40" rx="2" ry="2" style="stroke: black; fill: none;" />

<rect x="40" y="10" width="20" height="40" rx="5" style="stroke: black; fill: none;" />

<rect x="70" y="10" width="20" height="40" ry="10" style="stroke: black; fill: none;" />

<!-- rx e ry diferentes -->


<rect x="10" y="60" width="20" height="40" rx="10" ry="5" style="stroke: black; fill: none;" />

<rect x="40" y="60" width="20" height="40" rx="5" ry="10" style="stroke: black; fill: none;" />
</svg>

3.4 crculos e elipses

Para desenhar um crculo, use o elemento <circle> e especifique as coordenadas (x,y) do centro e o raio
do crculo com os atributos "cx", "cy", e "r" respectivamente. Tal como acontece com um retngulo, o
padro para preencher o crculo com a cor preta e desenhar sem contorno, a menos que voc
especifique alguma outra combinao de preenchimento e traado.
Uma elipse tambm precisa de um raio-X e um raio-Y para alm das coordenadas (x, y) do centro. Os
atributos para esses raios so nomeados "rx" e "ry".
Em ambos, crculos e elipses, se o "cx" ou "cy" for omitido, presume-se que seja zero. Se o raio igual a
zero, a forma no ser exibida; um erro fornecer um raio negativo.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<circle cx="30" cy="30" r="20" style="stroke: black; fill: none;" />
<circle cx="80" cy="30" r="20" style="stroke-width: 5; stroke: black; fill: none;" />
<ellipse cx="30" cy="80" rx="10" ry="20" style="stroke: black; fill: none;" />
<ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;" />
</svg>

3.5 O elemento polgono

Alm de retngulos, crculos e elipses, voc pode querer desenhar hexgonos, octgonos, estrelas, ou
formas fechadas arbitrrias. O elemento <polygon> permite que voc especifique uma srie de de pontos
que descrevem uma rea geomtrica para ser preenchida e fechada como descrito anteriormente. O
atributo "points" consiste em uma srie de pares de coordenadas X e Y separados por vrgulas ou espaos
em branco. Voc deve dar um nmero par de entradas na srie de nmeros. Voc no precisa voltar ao
ponto de partida; a forma ser automaticamente fechada.

<svg width="200px" height="200px" viewBox="0 0 200 200">

<!-- paralelograma -->


<polygon points="15,10 55, 10 45, 20 5, 20" style="fill: red; stroke: black;" />

<!-- estrela -->


<polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5
23.1,46.1 32.1,46.1" style="fill: #ccffcc; stroke: green;" />

<!-- forma estranha -->


<polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill: yellow; fill-opacity: 0.5; stroke:
black; stroke-width: 2;" />
</svg>
3.5.1 Polgonos preenchidos que tm linhas cruzadas

Para os polgonos mostrados at agora, tem sido fcil preencher o interior da forma. Uma vez que
nenhuma das linhas do polgono se cruzam umas sobre as outras, o interior facilmente distinto do
exterior da forma. No entanto, quando as linhas se cruzam umas sobre as outras, a determinao do que
est dentro do polgono no to fcil.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke: black; fill: none;" />
</svg>

O SVG tem duas regras diferentes para determinar se um ponto est dentro ou fora de um polgono. A
regra de preenchimento (que faz parte da apresentao) tem um valor de "nonzero" ou "evenodd".
Dependendo da regra que voc escolher, voc tem um efeito diferente.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;" points="48,16 16,96 96,48 0,48 80,96" />

<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;" points="148,16 116,96 196,48 100,48 180,96" />
</svg>
Explicao das regras de preenchimento

Por uma questo de exaustividade, estamos descrevendo como essas regras de preenchimento
funcionam, mas voc no precisa saber os detalhes. A regra "nonzero" determina se um ponto est
dentro ou fora de um polgono desenhando uma linha do ponto em questo para o infinito. Ele conta
quantas vezes que a linha cruza as linhas do polgono, adicionando um, se a linha do polgono est indo
da direita para a esquerda, e subtraindo um, se a linha do polgono est indo da esquerda para a direita.
Se o total for zero, o ponto est fora do polgono. Se a soma for "diferente de zero" (da o nome
"nonzero") o ponto dentro do polgono.

A regra "eevenodd" tambm desenha uma linha a partir do ponto em questo para o infinito, mas
simplesmente conta quantas vezes que a linha cruza as linhas do seu polgono. Se o nmero de passagens
total for mpar, ento o ponto est dentro; Se for par, ento o ponto do lado de fora.

3.6 O elemento polilinha

Finalmente, para completar a nossa discusso sobre formas bsicas, vamos voltar para as linhas retas. s
vezes voc quer uma srie de linhas que no fazem uma forma fechada. Voc pode usar vrios elementos
<line>, mas se houver muitas linhas pode ser mais fcil usar o elemento <Polyline>.
Ele tem os mesmos atributos que o elemento <Polygon>, exceto que as formas no so fechadas.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" style="stroke: black; stroke-
width: 3; fill: none;" />
</svg>

melhor definir a propriedade de preenchimento para "none" quando se utiliza <polyline>; Caso
contrrio, o vizualizador SVG pode tentar preencher a forma, s vezes com
resultados surpreendentes, como este.

3.7 Line Caps e Joins

Quando desenhar uma <line> ou <polyline>, voc pode especificar a forma dos pontos finais das linhas,
definindo a propriedade estilo de trao "stroke-linecap" e um dos valores "butt", "round" ou "square".

<line x1="10" y1="15" x2="50" y2="15" style="stroke-linecap: butt; stroke-width: 15;"/>


<line x1="10" y1="45" x2="50" y2="45" style="stroke-linecap: round; stroke-width: 15;"/>
<line x1="10" y1="75" x2="50" y2="75" style="stroke-linecap: square; stroke-width: 15;"/>
<!-- linhas guia -->
<line x1="10" y1="0" x2="10" y2="100" style="stroke: #999;" />
<line x1="50" y1="0" x2="50" y2="100" style="stroke: #999;" />
Voc pode especificar como as linhas se ligam aos cantos da forma com a propriedade de estilo "stroke-
linejoin", que pode ter os valores "miter" (pontas), "round" (arredondado), ou "bevel" (achatado).

<polyline style="stroke-linejoin: miter; stroke: black; stroke-width: 12; fill: none;" points="30 30, 45 15, 60 30"/>

<polyline style="stroke-linejoin: round; stroke: black; stroke-width: 12; fill: none;" points="90 30, 105 15, 120
30"/>

<polyline style="stroke-linejoin: bevel; stroke-width: 12; stroke: black; fill: none;" points="150 30, 165 15, 180
30"/>

Se as linhas se encontram em um ngulo agudo e tem a propriedade "stroke-linejoin = miter", possvel


para a parte pontiaguda se estender para alm da espessura das linhas. possvel definir a proporo da
"miter" para a espessura das linhas, com a propriedade "stroke-miterlimit"; seu valor padro 4.

3.8.2 Especificao de cores

Voc pode especificar a cor para preencher (fill) ou delinear (stroke) uma forma de uma das seguintes
maneiras:
"none", indica que nenhum esboo dever ser desenhado ou que a forma no para ser preenchida.
Um nome de cor, que um dos aqua, black, blue, fucsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, ou yellow.
Seis dgitos hexadecimais #RRGGBB, cada par descreve valores de vermelho, verde e azul.
Trs dgitos hexadecimais #rgb, descrevendo os valores de vermelho, verde e azul. Isto um atalho para
o mtodo anterior; dgitos so replicados de modo a que #rgb equivalente a #RRGGBB.
RGB (r, g, b), cada valor que varia de 0-255 ou a partir de 0% a 100%.

3.8.3 Caractersticas de Trao (stroke) e Preenchimento (fill)

A fim de ver uma linha ou o contorno de uma forma, voc deve especificar as caractersticas do traado,
utilizando os seguintes atributos. Um esboo de forma desenhado e depois seu interior preenchido.
Todas estas caractersticas, resumidas no quadro, so propriedades de apresentao, e so definidas em
um atributo de estilo.

Caractersticas de traado (stroke)


Atributo Valor
eokrts A cor do traado
htde-iwokrs Largura do traado; pode ser dada como coordenadas do utilizador ou com a
especificao de comprimento. A largura do traado centrada ao longo das
linhas de grade abstratas.
ytcipae-okrs Um nmero variando de 0,0 a 1,0; 0,0 completamente transparente, 1.0
inteiramente opaco.
yarhes-dokt Uma srie de nmeros que indicam o comprimento dos traos e as lacunas com a
qual uma linha desenhada. Estes nmeros esto em coordenadas do usurio
somente.
epca-nliokrts Forma das extremidades de uma linha; valores "butt" (o padro), "round", ou
"square".
noiej-lkrts A forma dos cantos de um polgono ou uma srie de linhas; tem um dos valores
"miter" (apontado; o padro), "round" ou "bevel" (chanfrado).
tilmer-oks Relao mxima de comprimento do "niter" em relao a largura da linha a ser
desenhada; o valor padro 4.

possvel controlar a maneira na qual o interior de uma forma deve ser preenchida usando um dos
atributos de preenchimento mostrados. Uma forma preenchida antes de seu contorno ser desenhado.

Caractersticas de preenchimento
Atributo Valor
l if A cor de preenchimento.
ytcipal-of Um nmero variando de 0,0 a 1,0; 0,0 completamente transparente, 1.0
inteiramente opaco.
le-urif Este atributo pode ter os valores "nonzero" ou "evenodd", aos quais se aplicam regras
diferentes para determinar se um ponto est dentro ou fora de uma forma. Estas regras
geram efeitos diferentes apenas quando tem uma forma de interseco de linhas ou
"furos" na mesma.
Captulo 4. Estrutura de Documento

Ns casualmente mencionamos que o SVG permite separar a estrutura de um documento a partir da


sua apresentao. Neste captulo, vamos comparar e contrastar os dois, discutir os aspectos de
apresentao de um documento em mais pormenores, e em seguida mostrar alguns dos elementos SVG
que voc pode usar para tornar a estrutura do seu documento mais clara, mais legvel, e mais fcil de
manter.

4.1 Estrutura e Apresentao

Como mencionamos no Captulo 1, na Seo 1.4.2, um dos objetivos da XML fornecer uma maneira
de estrutura de dados e separar esta estrutura de sua apresentao visual. Considere o desenho do gato
desse captulo; voc reconhece-o como um gato devido sua estrutura - a posio e o tamanho das
formas geomtricas que compem o desenho. Se fssemos fazer mudanas estruturais, tais como
encurtar os bigodes, arredondar o nariz, e fazer as orelhas maiores e arredondadas, o desenho se tornaria
o de um coelho, no importa o que a apresentao da superfcie sugerisse. A estrutura, portanto, diz o
que um grfico .

Isso no quer dizer que a informao sobre o estilo visual no importante; se tivssemos desenhado o
gato com linhas grossas roxas e um interior cinzento, ainda teria sido reconhecido como um gato, mas
sua aparncia teria sido muito menos agradvel. XML encoraja a estrutura separada da apresentao;
Infelizmente, muitas discusses de XML enfatizam estrutura a custo da apresentao. Vamos corrigir
este erro entrando em detalhes sobre como voc especifica apresentao em SVG.

4.2 Usando estilos com SVG

O SVG permite especificar aspectos de apresentao de um grfico de quatro maneiras; com estilos
inline, folhas de estilo internas, folhas de estilo externas, e atributos de apresentao. Vamos examinar
cada um deles.

4.2.1 estilos inline

Esta exatamente a forma como temos utilizados as informaes de apresentao at agora; vamos
definir o valor do atributo de estilo a uma srie de propriedades visuais e os seus valores.

<circle cx="20" cy="20" r="10" style="stroke: black; stroke-width: 1.5; fill: blue; fill-opacity: 0.6" />
4.2.2 Folhas de Estilo Interna

Voc no precisa colocar seus estilos dentro de cada elemento SVG; voc pode criar uma folha de estilo
interna para coletar estilos comumente usados que podem ser aplicados a todas as ocorrncias de um
determinado elemento, ou a utilizao como classes nomeadas para aplicar a elementos individuais. O
exemplo abaixo configura uma folha de estilo interna que vai desenhar todos os crculos com um
traado de linha pontilhada, de espessura dupla, na cor azul e preenchido internamente com amarelo
claro. Ns colocamos a folha de estilo dentro de um elemento <defs>, que discutiremos mais adiante
neste captulo.
O exemplo, em seguida, desenha vrios crculos. Os crculos na segunda fila da figura a seguir tem
estilos embutidos que substituem a especificao na folha de estilo interna.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<defs>
<style type="text/css"><![CDATA[
circle {
fill: #ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]></style>
</defs>
<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>
<circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;"/>
</svg>

4.2.3 Folhas de Estilo Externas

Se voc deseja aplicar um conjunto de estilos para vrios documentos SVG, voc pode copiar e colar
a folha de estilo interna em cada um deles. Isto, claro, impraticvel para um volume grande de
documentos, se voc precisar fazer uma mudana global para todos os documentos.

Em vez disso, voc deve tomar todas as informaes entre o incio e o fim <style> (Excluindo o <!
[CDATA [e]]>) e salv-lo em um arquivo externo, que se torna uma folha de estilo externa. O exemplo
abaixo mostra uma folha de estilo externa que foi salvo em um arquivo chamado ext_style.css. Este
estilo usa uma variedade de seletores, incluindo *, que define um padro para todos os elementos que
no tm qualquer outro estilo.
* { fill:none; stroke: black; } /* padro para todos os elementos */
rect { stroke-dasharray: 7 3; }
circle.yellow { fill: yellow; }
.thick { stroke-width: 5; }
.semiblue { fill:blue; fill-opacity: 0.5; }

<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet">
<line x1="10" y1="10" x2="40" y2="10"/>
<rect x="10" y="20" width="40" height="30"/>
<circle class="yellow" cx="70" cy="20" r="10"/>
<polygon class="thick" points="60 50, 60 80, 90 80"/>
<polygon class="thick semiblue" points="100 30, 150 30, 150 50, 130 50"/>
</svg>

Folhas de Estilos Inline quase sempre so executadas mais rapidamente do que os estilos em uma folha
de estilo interna ou externa; folhas de estilo e classes adicionam tempo de renderizao devido a anlise e
antecipao do evento.

4.2.4 Atributos de apresentao

Embora a esmagadora maioria dos seus documentos SVG utilize estilos para informaes de
apresentao, o SVG permite que voc especifique essa informao na forma de atributos de
apresentao. Ao invs de escrever:
<circle cx="10" cy="10" r="5" style="fill: red; stroke:black; stroke-width: 2;"/>
Voc pode escrever cada propriedade como um atributo:
<circle cx="10" cy="10" r="5" fill="red" stroke="black" stroke-width="2"/>

Se voc est pensando que esta uma mistura de estrutura e apresentao, voc est certo. Atributos de
apresentao vm a calhar, no entanto, quando voc est criando documentos SVG atravs da converso
de uma fonte de dados XML para SVG, como voc ver no Captulo 12.

Nestes casos, pode ser mais fcil para criar atributos individuais para cada propriedade de apresentao
do que criar o contedo de um nico atributo de estilo. Voc tambm pode precisar usar atributos de
apresentao se o ambiente em que voc estar colocando o seu SVG no suportar folhas de estilo.

Atributos de apresentao esto na parte inferior da lista de prioridades. Qualquer especificao de estilo
que vem das folhas de estilo inline, interna ou externa vai substituir um atributo de apresentao. No
documento SVG seguinte, o crculo ser preenchido em vermelho, no em verde.
<svg width="200" height="200">
<defs>
<style type="text/css"><![CDATA[
circle { fill: red; } <!--tem prioridade--->
]]></style>
</defs>
<circle cx="20" cy="20" r="15" fill="green"/>
</svg>

Novamente, enfatizamos que o uso de atributos de estilo ou folhas de estilo deve ser sempre a sua
primeira escolha. Folhas de estilo permitem que voc aplique uma srie complexa de preenchimentos e
traados caractersticas de todas as ocorrncias de certos elementos dentro de um documento sem ter
que duplicar a informao em cada elemento, como os atributos de apresentao exigiriam. O poder e a
flexibilidade das folhas de estilo permitem que voc faa alteraes significativas na aparncia de vrios
documentos com um mnimo de esforo.

4.3 Estrutura do Documento - Agrupamento referncia a objetos

Embora seja certamente possvel definir qualquer desenho como uma lista no diferenciada de formas e
linhas, a maioria da arte no-abstrata consiste em grupos de formas e linhas que formam objetos com
forma e nome reconhecveis. O SVG tem elementos que permitem fazer este tipo de agrupamento para
fazer seus documentos mais estruturados e compreensveis.

4.3.1 O Elemento <g>

O elemento <g> rene todos os seus elementos filho como um grupo, e muitas vezes tem um atributo
"id" para dar a esse grupo um nome nico. Alm disso, cada grupo pode ter sua prpria <title> e <desc>
para identific-lo para aplicaes XML baseado em texto ou para ajudar na acessibilidade para
usurios com deficincia visual.

Alm da clareza conceitual que vem da capacidade para agrupar documento e objetos, o elemento <g>
tambm fornece convenincia de notao. Todos os estilos especificados na tag inicial <g> sero
aplicados a todos os elementos filhos no grupo.

No Exemplo a seguir, isto nos poupa de ter que duplicar o style = "fill:none; stroke:black;" em cada
elemento mostrado. tambm possvel aninhar grupos um dentro do outro, embora no vamos mostrar
alguns exemplos deste at o Captulo 5.

Voc pode pensar do elemento <g> como anlogo funo "Agrupar Objetos" em programas como o
Adobe Illustrator. Serve tambm como uma funo semelhante ao conceito de camadas; uma camada
tambm um agrupamento de objetos relacionados.

<svg width="240px" height="240px" viewBox="0 0 240 240">


<title>Grouped Drawing</title>
<desc>Stick-figure drawings of a house and people</desc>
<g id="house" style="fill: none; stroke: black;">
<desc>House with door</desc>
<rect x="6" y="50" width="60" height="60"/>
<polyline points="6 50, 36 9, 66 50"/>
<polyline points="36 110, 36 80, 50 80, 50 110"/>
</g>
<g id="man" style="fill: none; stroke: black;">
<desc>Male human</desc>
<circle cx="85" cy="56" r="10"/>
<line x1="85" y1="66" x2="85" y2="80"/>
<polyline points="76 104, 85 80, 94 104" />
<polyline points="76 70, 85 76, 94 70" />
</g>
<g id="woman" style="fill: none; stroke: black;">
<desc>Female human</desc>
<circle cx="110" cy="56" r="10"/>
<polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/>
<line x1="104" y1="104" x2="108" y2="90"/>
<line x1="112" y1="90" x2="116" y2="104"/>
<polyline points="101 70, 110 76, 119 70" />
</g>
</svg>

4.3.2 O elemento <use>

Grficos complexos, muitas vezes tm elementos repetidos. Por exemplo, um folheto do produto pode
ter o logotipo da empresa na parte superior direita e inferior esquerda de cada pgina. Se voc fosse
desenhar brochuras com um programa de design grfico, voc desenharia o logotipo uma vez, agruparia
todo seus elementos juntos, em seguida, copiaria e colaria para outro local. O elemento SVG <use> d
uma capacidade anloga de copiar-e-colar com um grupo que voc definiu com o elemento <g>.
Depois de ter definido um grupo de objetos grficos, voc pode exibi-los novamente com a tag <use>.
Para especificar o grupo que deseja reutilizar, d o seu URI em um atributo "xlink:href", e especifique o
local x e y, para onde o ponto (0,0) do grupo deve ser movido. (Veremos outra maneira de conseguir
este efeito no Captulo 5, no ponto 5.1.) Assim, para criar outra casa e conjunto de pessoas, conforme
mostrado na Figura acima, voc iria apenas colocar essas linhas antes da tag de fechamento </svg>:

<use xlink:href="#house" x="70" y="100"/>


<use xlink:href="#woman" x="-80" y="100"/>
<use xlink:href="#man" x="-30" y="100"/>
4.3.3 O Elemento <defs>

Voc deve ter notado alguns inconvenientes com o exemplo anterior:

A matemtica para decidir onde colocar o homem e a mulher, reutilizados, exige que voc conhea as
posies dos originais e use isso como sua base, em vez de usar um nmero simples como zero.
A cor de preenchimento e traado para a casa foram estabelecidos pelo original, e no podem ser
substitudos pelo elemento <use>. Isto significa que voc no pode fazer uma linha de casas multi-
coloridas.
O documento chama a todos os trs grupos: a mulher, o homem, e a casa. Vocs no podem
"armazen-los em separado" e desenhar apenas um conjunto de casas ou apenas um conjunto de
pessoas.

O elemento <defs> resolve estes problemas. Ao colocar os objetos agrupados entre as marcas
<defs></defs>, voc instrui o SVG para defini-los sem exibi-los. A especificao SVG, de fato,
recomenda que voc coloque todos os objetos que voc deseja para re-uso dentro de um elemento
<defs> para que os visualizadores SVG trabalhando em um ambiente de fluxo contnuo, possam
processar os dados de forma mais eficiente.

No Exemplo abaixo, a casa, o homem e a mulher so definidos de modo que o seu canto superior
esquerdo est em (0, 0), e casa no dada qualquer cor de preenchimento. Uma vez que os grupos
sero dentro de elementos <defs>, eles no sero atrados na tela imediatamente, e serviro como um
"modelo" para uso futuro. Ns tambm construmos um outro grupo chamado "couple", que, por sua
vez, faz o grupo do homem e da mulher. (Note-se que na metade inferior da figura no possvel
utilizar pares, uma vez que a mulher a do lado esquerdo do homem.)

<svg width="240px" height="240px" viewBox="0 0 240 240">


<title>Desenhos agrupados</title>
<desc> desenho de uma casa e pessoas</desc>
<defs>
<g id="house" style="stroke: black;">
<desc>Casa com porta</desc>
<rect x="0" y="41" width="60" height="60" />
<polyline points="0 41, 30 0, 60 41" />
<polyline points="30 101, 30 71, 44 71, 44 101" />
</g>
<g id="man" style="fill: none; stroke: black;">
<desc>Homem</desc>
<circle cx="10" cy="10" r="10"/>
<line x1="10" y1="20" x2="10" y2="44" />
<polyline points="1 58, 10 44, 19 58" />
<polyline points="1 24, 10 30, 19 24" />
</g>
<g id="woman" style="fill: none; stroke: black;">
<desc>Mulher</desc>
<circle cx="10" cy="10" r="10" />
<polyline points="10 20, 10 34, 0 44, 20 44, 10 34" />
<line x1="4" y1="58" x2="8" y2="44" />
<line x1="12" y1="44" x2="16" y2="58" />
<polyline points="1 24, 10 30, 19 24" />
</g>
<g id="couple">
<desc>Homem e mulher</desc>
<use xlink:href="#man" x="0" y="0" />
<use xlink:href="#woman" x="25" y="0" />
</g>
</defs>
<!-- Usa os grupos definidos -->
<use xlink:href="#house" x="0" y="0" style="fill: #cfc;" />
<use xlink:href="#couple" x="70" y="40" />
<use xlink:href="#house" x="120" y="0" style="fill: #99f;" />
<use xlink:href="#couple" x="190" y="40" />
<use xlink:href="#woman" x="0" y="145" />
<use xlink:href="#man" x="25" y="145" />
<use xlink:href="#house" x="65" y="105" style="fill: #c00;" />
</svg>

O elemento <use> no est restrito ao uso de objetos do mesmo arquivo em que ocorre; o atributo
"xlink:href" pode especificar qualquer arquivo vlido ou URI. Isto faz com que seja possvel recolher um
conjunto de elementos comuns em um arquivo SVG e us-los seletivamente de outros arquivos. Por
exemplo, voc pode criar um arquivo chamado "identity.svg" que contm toda a identidade grfica que
sua organizao usa:

<g id="company_mascot">
<!-- desenhando o mascote da empresa -->
</g>
<g id="company_logo" style="stroke: none;">
<polygon points="0 20, 20 0, 40 20, 20 40" style="fill: #696;" />
<rect x="7" y="7" width="26" height="26" style="fill: #c9c;" />
</g>
<g id="partner_logo">
<!-- desenhando o logo da empresa -->
</g>

e ento se referir a ele com:

<use xlink:href="identity.svg#company_logo" x="200" y="200" />

4.3.4 O smbolo do elemento

O elemento <symbol> fornece uma outra maneira de agrupar elementos. Ao contrrio do elemento <g>,
um <symbol> nunca exibido, por isso voc no precisa coloc-lo em uma especificao <defs>. No
entanto, habitual faz-lo, desde que um smbolo realmente algo que voc est definindo para uso
posterior. Alm disso, os smbolos podem especificar "viewbox" e atributos "preserveAspectRatio", de
modo que um smbolo pode caber na janela de exibio estabelecida pelo elemento de utilizao.

O exemplo abaixo mostra que a largura e altura so ignorados por um simples grupo (os dois primeiros
octgonos), mas so usados ao exibir um smbolo. As bordas do octgono inferior direita na figura so
cortadas porque o "preserveAspectRatio" foi definido para cortar.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<title>Smbolos versus Grupos</title>
<desc>Use</desc>
<defs>
<g id="octagon" style="stroke: black;">
<desc>Octagon como grupo</desc>
<polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/>
</g>
<symbol id="sym-octagon" style="stroke: black;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40">
<desc>Octagon como symbol</desc>
<polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/>
</symbol>
</defs>
<use xlink:href="#octagon" x="40" y="40" width="30" height="30" style="fill: #c00;"/>
<use xlink:href="#octagon" x="80" y="40" width="40" height="60" style="fill: #cc0;"/>
<use xlink:href="#sym-octagon" x="40" y="80" width="30" height="30" style="fill: #cfc;"/>
<use xlink:href="#sym-octagon" x="80" y="80" width="40" height="60" style="fill: #699;"/>
</svg>

4.3.5 O Elemento <image>

Enquanto <use> permite reutilizar uma parte de um arquivo SVG, o elemento <image> inclui um
arquivo SVG ou raster inteiro. Se voc estiver incluindo um arquivo SVG, os atributos x, y, largura e
altura estabelecero a janela de exibio em que o arquivo referenciado ser desenhado; se voc est
incluindo um arquivo de imagem, ela ser redimensionada para caber no retngulo que os atributos
especificarem. Voc atualmente pode incluir tanto os arquivos raster JPEG ou PNG. O exemplo abaixo
mostra como incluir uma imagem JPEG com SVG:

<svg width="310px" height="310px" viewBox="0 0 310 310">


<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/> [1]
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/> [2]
<image xlink:href="kwanghwamun.jpg" [3] x="72" y="92" [4] width="160" height="120"/> [5]
</svg>
Captulo 5. Transformo do Sistema de Coordenadas

At este ponto, todos os grficos foram exibidos "tal como esto". Haver momentos em que voc ter
um grfico que voc gostaria de mudar para um novo local, girar ou escalar. Para realizar essas tarefas,
voc deve adicionar o atributo de transformao para os elementos SVG apropriados. Este captulo
examina os detalhes dessas transformaes.

5.1 A transformao "Translation"

No Captulo 4, voc viu que voc pode usar os atributos x e y com o elemento <uso> para colocar um
grupo de objetos grficos em um lugar especfico. Olhe para o SVG no Exemplo abaixo, o que define
um quadrado desenh-lo no canto superior esquerdo da grelha, em seguida, re-extrai-la com o canto
superior esquerdo nas coordenadas (50, 50). As linhas a tracejado na figura no so parte do SVG, mas
servem para mostrar a parte da tela que os objetos ocupam.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<g id="square">
<rect x="0" y="0" width="20" height="20" style="fill: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>

Como se constata, os valores X e Y so realmente um atalho para uma forma do mais geral e mais
poderoso atributo "transform". Especificamente, os valores de x e y so convertidos em um atributo
como "transform = translate (x-value, y-value)", em que "translate" um termo tcnico para "mover".
O valor de x e y de valor so medidos no atual sistema de coordenadas do usurio. Vamos usar
"transform" para obter o mesmo efeito de fazer um segundo quadrado com seu canto superior esquerdo
em (50, 50).

<svg width="200px" height="200px" viewBox="0 0 200 200">


<g id="square">
<rect x="0" y="0" width="20" height="20"style="fill: none; stroke:black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" transform="translate(50,50)"/>
</svg>

A exibio resultante ser exatamente como a da figura abaixo. Voc pode pensar que isso seria realizado
movendo o quadrado para um lugar diferente na grade, como mostrado conceitualmente na figura
abaixo, mas voc teria errado.
O que realmente est acontecendo nos bastidores uma histria completamente diferente. Ao invs de
mover o quadrado, a especificao "translate" pega toda a grade e move-a para um novo local na tela.
Quanto ao quadrado, ainda est sendo desenhado com o seu canto superior esquerdo nas coordenadas
(0, 0), conforme representado na Figura.

A transformao "translate" nunca muda as coordenadas na grade de um objeto grfico; em vez disso,
ela muda a posio da grade na tela.

primeira vista, usar o "translate" parece to ridculo e ineficiente como mover o sof para mais longe a
partir da parede externa da casa movendo toda a sala de estar, e todas as paredes, para uma nova posio.
Com efeito, se "translate" fosse a nica transformao disponvel, mover todo o sistema de coordenadas
seria um desperdcio. No entanto, vamos ver em breve outras transformaes, e combinaes de uma
sequncia de transformaes, que so mais matematica e conceitualmente convenientes que se aplicam a
todo o sistema de coordenadas.

5.2 A transformao "scale"

possvel fazer um objeto parecer maior ou menor do que o tamanho em que foi definido pelo
dimensionamento do sistema de coordenadas. Essa transformao especificada como:
transform="scale( value)" - Multiplica todas as coordenadas x e y pelo valor dado.
transform="scale( x-value, y-value)" - Multiplica todas as coordenadas x por um valor x dado e todas as
coordenadas y pelo valor y dado.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<g id="square">
<rect x="10" y="10" width="20" height="20" style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>
</svg>

Voc pode estar pensando: "Espere um minuto - Eu posso entender porque o quadrado ficou maior.
Mas eu no pedi uma "translate", ento por que o quadrado est em um lugar diferente? "Tudo se
torna claro quando voc olhar para a Figura abaixo para ver o que realmente ocorreu. A grade no se
moveu; o ponto do sistema de coordenadas (0, 0) ainda est no mesmo lugar, mas cada coordenada de
usurio agora duas vezes maior do que costumava ser.

Voc pode ver a partir das linhas de grade que o canto superior esquerdo do retngulo ainda est em
(10, 10) sob a nova grade, maior, uma vez que o objeto no se moveu. Isso tambm explica por que o
contorno do quadrado maior mais espesso. A largura do traado (stroke) ainda uma unidade do
usurio, mas agora se tornou duas vezes maior, por isso o traado engrossou.

A transformao de escala nunca muda as coordenadas da grade de um objeto grfico ou a sua largura
do traado; Pelo contrrio, ela altera o tamanho do sistema (grade) de coordenadas em relao tela.

possvel especificar um fator de escala diferente para o eixo y e o eixo x do sistema de coordenadas
utilizando uma segunda forma da transformao "scale". O exemplo a seguir chama o quadrado com o
eixo x escalonado por um fator de 3 e o eixo y escalonado por um fator de 1/2. Como voc pode ver na
figura, a largura do traado de uma unidade tambm dimensionada de maneira no uniforme.
At este ponto, ns s aplicamos o atributo de transformao para o elemento <use>. Voc pode aplicar
uma transformao para uma srie de elementos, agrupando-os, e transformar todo o grupo:

<g id="group1" transform="translate(3, 5)">


<line x1="10" y1="10" x1="30" y2="30"/>
<circle cx="20" cy="20" r="10"/>
</g>

Voc tambm pode aplicar uma transformao para um nico objeto ou forma bsica. Por exemplo,
aqui um retngulo cujo sistema de coordenadas escalonado por um fator de 3:

<rect x="15" y="20" width="10" height="5" transform="scale(3)" style="fill: none; stroke: black;"/>

bastante claro que a largura e altura do retngulo escalonado deve ser trs vezes maior que o retngulo
no escalonado. No entanto, voc pode se perguntar se as coordenadas x e y so avaliadas antes ou
depois do retngulo ser dimensionado. A resposta que SVG aplica transformaes para o sistema de
coordenadas antes de avaliar qualquer uma das formas de coordenadas. O exemplo a seguir o SVG
para o retngulo em escala, mostrado na figura, com linhas de grade que so desenhadas no sistema de
coordenadas fora de escala.

<!-- diretrizes de grade em sistema de coordenadas no-dimensionado -->


<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>
<line x1="45" y1="0" x2="45" y2="100" style="stroke: gray;"/>
<line x1="0" y1="60" x2="100" y2="60" style="stroke: gray;"/>
<!-- retngulo a ser transformado -->
<rect x="15" y="20" width="10" height="5" transform="scale(3)" style="fill: none; stroke: black;"/>

O efeito da aplicao de uma transformao para uma forma o mesmo que se a forma fosse colocada
entre um grupo e transformada. No exemplo anterior, o retngulo em escala equivalente a este SVG:

<g transform="scale(3)">
<rect x="15" y="20" width="10" height="5" style="fill: none; stroke: black;"/>
</g>

5.3 As sequncias de transformaes

possvel fazer mais do que uma transformao em um objeto grfico. s colocar as transformaes
separadas por espaos em branco, no valor do atributo <transform>. Aqui est um retngulo que passa
por duas transformaes, uma "translate" seguida de uma "scale". (Os eixos so desenhados para
mostrar que o retngulo de fato, mudou.)
<!-- eixo de desenho -->
<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>
<rect x="10" y="10" height="20" width="15" transform="translate(30, 20) scale(2)" style="fill: gray;"/>

Isto o equivalente da seguinte sequncia de grupos aninhados, e ambas produziro o que se v na


figura abaixo.

<g transform="translate(30, 20)">


<g transform="scale(2)">
<rect x="10" y="10" height="20" width="15" style="fill: gray;"/>
</g>
</g>

O que acontece em cada estgio da transformao:

A ordem em que voc fizer uma seqncia de transformaes afetar o resultado. Em geral, a
transformao A seguido pela transformao B no dar o mesmo resultado que a transformao B
seguido pela transformao A.

O exemplo abaixo produz o mesmo retngulo do exemplo anterior, apenas em uma cor cinzento claro.
Em seguida, ele desenha o retngulo de novo, mas faz a "scale" antes da "translate". Como voc pode
ver o resultado na figura abaixo, os retngulos acabam em lugares muito diferentes na tela.

<rect x="10" y="10" width="20" height="15" transform="translate(30, 20) scale(2)" style="fill: #ccc;"/>
<rect x="10" y="10" width="20" height="15" transform="scale(2) translate(30, 20)" style="fill: black;"/>
A razo porque o retngulo preto acaba mais longe da origem que a transformao "scale" aplicada
em primeiro lugar, de modo que a transformao "translate" de 20 unidades na direo x e 10 unidades
na direco y feita com unidades que so agora duas vezes maior.

5.4 Tcnica: Converso de coordenadas cartesianas

Se voc estiver transferindo dados de outros sistemas para SVG, voc pode ter que lidar com desenhos
vetoriais, que usam coordenadas cartesianas (as que voc aprendeu em lgebra na escola) para
representar dados. Neste sistema, o ponto (0, 0) no canto inferior esquerdo da tela, e as coordenadas y
aumentam medida que se move para cima.

Uma vez que o eixo y "invertido" relativamente ao padro SVG, as coordenadas tem que ser
recalculadas. Em vez de faz-lo manualmente, voc pode usar uma sequncia de transformaes para
que o SVG faa todo o trabalho para voc. Em primeiro lugar, traduzir a imagem SVG, com as
coordenadas exatamente como se mostra no exemplo. (Tambm vamos incluir os eixos como um guia.)
Sem nenhuma surpresa, a imagem vai sair de cabea para baixo. Note-se que a imagem na figura no
invertida da esquerda para a direita, uma vez que os pontos do eixo x vo na mesma direo em ambos
os eixos de coordenadas cartesianas e o padro SVG do sistema de coordenadas.

<svg width="200px" height="200px" viewBox="0 0 200 200">


<!-- eixos -->
<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>
<!-- trapezide -->
<polygon points="40 40, 100 40, 70 70, 40 70" style="fill: gray; stroke: black;"/>
</svg>

Para terminar a converso, siga estes passos:


1. Encontre a coordenada y mxima no desenho original. Neste caso, verifica-se ser de 100, o ponto de
extremidade do eixo y no original.
2. Coloque o desenho inteiro em um elemento <g>.
3. Insira um "translate" que move o sistema de coordenadas para baixo pelo valor mximo da
coordenada y.
4. transform = "translate (0, max-y)"
5. O prximo passo ser transformar a escala do eixo Y por um fator de -1, para vir-lo de cabea para
baixo.
6. transform = "translate (0, max-y) scale (1, -1)"

<svg width="200px" height="200px" viewBox="0 0 200 200">


<g transform="translate(0,100) scale(1,-1)">
<!-- eixos -->
<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>
<!-- trapezide -->
<polygon points="40 40, 100 40, 70 70, 40 70" style="fill: gray; stroke: black;"/>
</g>
</svg>
5.5 A transformao de rotao

tambm possvel rodar o sistema de coordenadas por um ngulo especificado. No sistema de


coordenadas padro, a medida do ngulo aumenta medida que voc girar no sentido horrio, com a
linha na horizontal fazendo um ngulo de zero grau.

A menos que voc especifique o contrrio, o centro de rotao (um termo extravagante para o "ponto
pivot") presumido em (0, 0). O exemplo a seguir mostra um quadrado desenhado em cinza, em
seguida, desenhado novamente em preto aps o sistema de coordenadas ser girado em 45 graus. Os
eixos so tambm mostrados como um guia. A Figura mostra o resultado. Se voc se surpreendeu pelo
quadrado ter se movido, voc no deveria. Lembre-se, todo o sistema de coordenadas foi rodado. [1]
[1] Todas as figuras deste captulo so imagens estticas. Este mostra dois quadrados; um girado e um
sem rotao. Para mostrar uma animao de uma rotao, use <AnimateTransform>, que discutiremos
no Captulo 11, na Seo 11.6.

<!-- eixos -->


<polyline points="100 0, 0 0, 0 100" style="stroke: black; fill: none;"/>
<!-- quadrado normal e rodado -->
<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<rect x="70" y="30" width="20" height="20" transform="rotate(45)" style="fill: black;"/>

Na maioria das vezes, voc no vai querer rodar todo o sistema de coordenadas ao redor da origem; voc
vai querer rodar um nico objeto em torno de um ponto diferente da origem. Voc pode fazer isso
atravs desta srie de transformaes: translate (centerX, centerY); rotate (angle); translate (-centerX,
-centerY).
O SVG fornece outra verso de rotate para fazer esta tarefa comum mais fcil. Nesta segunda forma de
transformao rotate, voc especifica o ngulo e o ponto central em torno do qual voc deseja girar:

rotate(angle, centerX, centerY)


Isto tem o efeito de estabelecer temporariamente um novo sistema de coordenadas com a origem nos
pontos x e y especificados, fazendo a rotao, e ento re-estabelecendo as coordenadas originais. O
exemplo abaixo mostra esta forma de rotao para criar mltiplas cpias de uma seta, mostrado na
figura.
<!-- centro da rotao -->
<circle cx="50" cy="50" r="3" style="fill: black;" />
<!-- seta no rodada -->
<g id="arrow" style="stroke: black;">
<line x1="60" y1="50" x2="90" y2="50" />
<polygon points="90 50, 85 45, 85 55" />
</g>
<!-- rodando ao redor do ponto central -->
<use xlink:href="#arrow" transform="rotate(60, 50, 50)" />
<use xlink:href="#arrow" transform="rotate(-90, 50, 50)" />
<use xlink:href="#arrow" transform="rotate(-150, 50 50)" />

5.6 Tcnica: "Scaling" em torno de um ponto central

Embora seja possvel girar em torno de um ponto que no seja a origem, no h correspondente
capacidade de escalonar em torno de um ponto. Voc pode, no entanto, fazer smbolos concntricos
com uma simples srie de transformaes. Para dimensionar um objeto por um determinado fator em
torno de um ponto central, faa o seguinte:

translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)

Voc tambm pode querer dividir o "stroke-width" pelo fator de escala de modo que o contorno
permanea da mesma largura enquanto o objeto torna-se maior. O exemplo a seguir chama o conjunto
de retngulos concntricos mostrado na figura.
Esta tambm uma imagem esttica, um "alvo quadrado." Se voc quiser mostrar uma animao de
um quadrado em expanso, voc vai usar <animateTransform>, que discutiremos no Captulo 11, na
Seo 11.6.

<!-- centro de escalonamento -->


<circle cx="50" cy="50" r="2" style="fill: black;" />
<!-- retngulo no escalonado -->
<g id="box" style="stroke: black; fill: none;">
<rect x="35" y="40" width="30" height="20" />
</g>
<use xlink:href="#box" transform="translate(-50,-50) scale(2)" style="stroke-width: 0.5;" />
<use xlink:href="#box" transform="translate(-75,-75) scale(2.5)" style="stroke-width: 0.4;" />
<use xlink:href="#box" transform="translate(-100,-100) scale(3)" style="stroke-width: 0.33;" />
5.7 Transformaes de inclinao - "SkewX" e "SkewY"

O SVG tambm tem duas outras transformaes: "skewX" e "skewY", que permitem inclinar um dos
eixos. A forma geral skewX (angle) e skewY (angle). A transformao skewX "empurra" todas as
coordenadas x por o ngulo especificado, deixando as coordenadas y inalteradas. SkewY distorce as
coordenadas y, deixando inalterada as coordenadas x, como mostrado no exemplo:

.oidcrhafesnmt qul,orsdapencmtihojrsnalE/
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>
<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>
<g transform="translate(20, 0)"> .oajdeslc rpin"tovmrsI/
<g transform="skewX(30)"> adinueq,mgro ltsf aE.u rg0e3xm-sdnoacliI/
.saendorcmtiv)0,(es
<polyline points="50 0, 0 0, 0 50" style="fill: none; stroke: black; stroke-width: 2;"/>omsav,icrltf P/
e.migaonrtbjhsd
<text x="0" y="60">skewX</text> lo.8uptahCnesdimbr otx T/
</g>
</g>
<g transform="translate(120, 0)"> e-qsudaynorct,xiemazsdgnrotlE/
ort.sae
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50" style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>
Captulo 6. Path

Todas as formas bsicas descritas no Captulo 3 so, na verdade, atalhos para o mais geral dos elementos,
o <path>. extremamente aconselhvel usar esses atalhos; eles ajudam a tornar o SVG mais legvel e
mais estruturado. O elemento <path> mais geral; ele desenha o contorno de qualquer forma arbitrria,
especificando uma srie de linhas conectadas, arcos, e curvas. Este esquema pode ser preenchido e
desenhado com um traado, assim como as formas bsicas so.

Alm disso, esses caminhos (bem como as formas bsicas de estenografia) podem ser utilizados para
definir o contorno de uma rea de recorte ou uma mscara de transparncia, como voc ver no
Captulo 9.

Todos os dados que descrevem um esboo esto no atributo "d" do elemento <path> ("d" significa
dados). Os dados do <path> consiste em comandos de uma letra, tais como M para "moveto" ou L para
"lineto", seguido da informao de coordenadas para esse comando especfico.

6.1 Os comandos (M) moveto, (L) lineto e (Z) closepath

Todo caminho tem de comear com um comando "moveto" (M). A letra de comando um M
maisculo seguido pelas coordenadas (x,y), separados por vrgulas ou espaos em branco. Este comando
define o local atual da "caneta" que est desenhando o contorno.

Isto seguido por um ou mais comandos "LineTo" (L), denotada por um L maisculo, tambm seguido
pelas coordenadas (x,y), separadas por vrgulas ou espaos em branco. O exemplo a seguir tem trs
caminhos. O primeiro chama uma nica linha, o segundo desenha um ngulo direito, e o terceiro
desenha dois ngulos de trinta graus. Quando voc "pegar" a caneta com outro "moveto", voc estar
iniciando um novo subpath. Note-se que o uso de vrgulas e espaos em branco so como separadores
diferentes, mas perfeitamente legal, em todos os trs caminhos.

<g style="stroke: black; fill: none;">


<!-- linha simples -->
<path d="M 10 10 L 100 10" />
<!-- ngulo direita -->
<path d="M 10, 20 L 100, 20 L 100,50" />
<!-- Dois ngulos de 30-->
<path d="M 40 60, L 10 60, L 40 42.68, M 60 60, L 90 60, L 60 42.68" />
</g>

Examinando o ltimo caminho mais de perto:


Valor Ao
M 40 60 Move a caneta para as coordenadas (40, 60)
L 10 60 Desenha uma linha at as coordenadas (10, 60)
L 40 42.68 Desenha uma linha at as coordenadas (40, 42.68)
M 60 60 Move a caneta para as coordenadas (60, 60)
L 90 60 Desenha uma linha at as coordenadas (90, 60)
L 60 42.68 Desenha uma linha at as coordenadas (60, 42.68)
Voc pode ter notado que os dados do <path> no parecem muito os valores tpicos para atributos
XML. Porque todos os dados so contidos em um atributo em vez de um elemento individual para cada
ponto ou segmento de linha, um caminho ocupa menos memria quando lido em uma estrutura DOM
(Document Object Model) por um parser XML. Alm disso, a notao compacta de um caminho
permite que um grfico complexo possa ser transmitido sem a necessidade de uma grande quantidade
de largura de banda.

Se voc quiser usar um <path> para desenhar um retngulo, voc pode desenhar todas as quatro linhas,
ou voc pode desenhar as trs primeiras linhas e, em seguida, utilizar o comando "closepath", indicado
por um Z maisculo, para desenhar uma linha reta de volta ao ponto de incio do subpath atual.

Usando o comando closepath (Z)

<g style="stroke: black; fill: none;">


<!-- retngulo; todas as quatro linhas -->
<path d="M 10 10, L 40 10, L 40 30, L 10 30, L 10 10" />
<!-- retngulo com closepath -->
<path d="M 60 10, L 90 10, L 90 30, L 60 30, Z" />
<!-- dois tringulos de 30 -->
<path d="M 40 60, L 10 60, L 40 42.68, Z M 60 60, L 90 60, L 60 42.68, Z" />
</g>

Examinando o ltimo caminho mais de perto:

Valor Ao
M 40 60 Move a caneta para as coordenadas (40, 60)
L 10 60 Desenha uma linha at as coordenadas (10, 60)
L 40 42.68 Desenha uma linha at as coordenadas (40, 42.68)
Z Fecha o caminho desenhando uma linha reta para as coordenadas (40, 60)
M 60 60 Move a caneta para as coordenadas (60, 60)
L 90 60 Desenha uma linha at as coordenadas (90, 60)
L 60 42.68 Desenha uma linha at as coordenadas (60, 42.68)
Z Fecha o caminho desenhando uma linha reta para as coordenadas (60, 60)
6.2 "moveto" e "lineto" relativos

Os comandos anteriores so todos representados por letras maisculas, e as coordenadas so, presume-
se, as coordenadas absolutas. Se voc usar uma letra de comando em minscula, as coordenadas sero
interpretadas como sendo relativas posio atual da caneta. Assim, os dois caminhos seguintes so
equivalentes:

<path d="M 10 10 L 20 10 L 20 30 M 40 40 L 55 35" style="stroke: black;" />


<path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5" style="stroke: black;" />

Se voc iniciar um caminho com um "m" minsculo (moveto), as suas coordenadas sero interpretadas
como uma posio absoluta, pois no h posio de caneta anterior a partir da qual se possa calcular
uma posio relativa. Todos os outros comandos neste captulo tambm tm a mesma distino de letras
maisculas e minsculas. As coordenadas de um comando em maisculas so absolutas e os comandos
com coordenadas em minsculo so relativos. Para comandos "closepath", que no tem coordenadas,
tanto faz ser escrito em maisculas ou em minsculas.

6.3 Atalhos de caminho <path>

Se o contedo rei e o design a rainha, ento a eficincia da largura de banda o corteso real que
mantm o palcio funcionando sem problemas. Desde que qualquer desenho no-trivial ter caminhos
com muitas dezenas de pares de coordenadas, o elemento <path> tem atalhos que permitem que voc
represente um caminho em to poucos bytes quanto possvel.

6.3.1 Os comandos "lineto" horizontal e vertical

Desde que as linhas horizontais e verticais so to comuns, um caminho <path> pode especificar uma
linha horizontal com um comando "H" seguido de uma "coordenada x" absoluta ou um comando "h"
seguido por uma "coordenada x" relativa. Do mesmo modo, uma linha vertical especificada com um
comando "V" seguido de uma "coordenada y" absoluta ou um comando "v" seguido por uma
"coordenada y" relativa.

Atalho Equivalente a Efeito


H 20 L 20 atual_y Desenha uma linha locao absoluta (20, atual_y)
h 20 l 20 0 Desenha uma linha at (atual_x + 20, atual_y)
V 20 L atual_x 20 Desenha uma linha locao absoluta (atual_x, 20)
v 20 l atual_x 20 Desenha uma linha at (atual_x, atual_y + 20)
Assim, o caminho a seguir desenha um retngulo de 15 unidades de largura e 25 unidades de altura,
com o canto superior esquerdo nas coordenadas (12, 24).

<path d="M 12 24 h 15 v 25 h -15 z"/>

6.3.2 Notao de atalhos para um caminho <path>

Caminhos tambm podem ser feitos mais curtos atravs da aplicao das duas regras seguintes:

1. Voc pode colocar vrios conjuntos de coordenadas depois de um "L" ou "l", assim como voc faz no
elemento<Polyline>. Os seis caminhos seguintes todos desenham o mesmo diamante que mostrado na
figura; os trs primeiros so em coordenadas absolutas e os trs ltimos em coordenadas relativas. O
terceiro e sexto caminhos tm uma caracterstica interessante - se voc colocar vrios pares de
coordenadas depois de um "moveto", todos os pares aps os primeiros presume-se que sejam precedidos
por um "lineto".
Voc tambm pode colocar mltiplas coordenadas individuais aps uma "lineto" horizontal ou "lineto"
vertical, embora seja intil faz-lo, pois H 25 35 45 o mesmo que H 45; e v 11 13 15 o mesmo que
v 39.

<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z" />


<path d="M 30 30 L 55 5 80 30 55 55 Z" />
<path d="M 30 30 55 5 80 30 55 55 Z" />
<path d="m 30 30 l 25 -25 l 25 25 l -25 25 z" />
<path d="m 30 30 l 25 -25 25 25 -25 25 z" />
<path d="m 30 30 25 -25 25 25 -25 25 z" />

Qualquer espao em branco que no necessrio, pode ser eliminado. Voc no precisa de um espao
em branco aps um caractere de comando j que todos os comandos so apenas letras. Voc no precisa
de um espao em branco entre um nmero e um comando porque a letra do comando no pode ser
parte de um nmero. Voc no precisa de um espao em branco entre um positivo e um nmero
negativo, uma vez que o sinal de menos que conduz ao nmero negativo no pode ser uma parte do
nmero positivo. Isto permite-lhe reduzir os terceiro e sexto caminhos na listagem anterior ainda mais
longe:

<path d="M30 30 55 5 80 30 55 55Z" />


<path d="m30 30 25-25 25 25-25 25z" />

Outro exemplo da regra de eliminao do espao em branco em ao, mostrado pelo exemplo que
desenha um retngulo de 15 unidades de largura e 25 unidades de altura, com o canto superior
esquerdo nas coordenadas (12, 24):

<path d="M 12 24 h 15 v 25 h -15 z" /> <!-- original -->


<path d="M12 24h15v25h-15z" /> <!-- compactado-->
6.4 Arco elptico

As linhas so simples; dois pontos em um caminho determinam exclusivamente um segmento de linha


entre eles. Uma vez que um nmero infinito de curvas podem ser estabelecidas entre dois pontos, voc
deve dar informaes adicionais para desenhar um caminho curvo entre eles. A mais simples das curvas
que vamos examinar o arco elptico - ou seja, puxando uma seo de uma elipse que liga dois pontos.

Embora arcos sejam visualmente as curvas mais simples, a especificao de um nico arco requer mais
informaes. As primeiras peas de informao que voc precisa especificar so os raios "x" e "y" da
elipse em que os pontos se encontram. Isso restringe-os a duas elipses possveis, como voc pode ver na
seo (a) da figura abaixo. Os dois pontos dividem as duas elipses em quatro arcos. Dois deles, (b) e (c),
so arcos que medem menos de 180 graus. Os outros dois, (d) e (e) so maiores do que 180 graus. Se
voc olhar para (b) e (c), voc vai notar que eles so diferenciados por sua direo; (B) desenhado no
sentido de um ngulo negativo, e (c) no sentido de um ngulo positivo. A mesma relao mantm
verdadeiro entre (d) e (e).

Mas espere - ainda no foi especificado exclusivamente os arcos potenciais! No h nenhuma lei que
diga que a elipse tem que ter o seu raio-x paralelo ao eixo x. A parte (f ) da figura mostra os dois pontos
com as suas elipses candidatos rodado trinta graus em relao ao eixo-x.

Assim, um comando "arc" comea com a abreviatura "A" para coordenadas absolutas ou um "a"para
coordenadas relativas, e seguido por sete parmetros:

Os raios (x,y) da elipse em que os pontos se encontram.


O eixo-x de rotao da elipse.
O grande arco de bandeira, que zero, se a medida do arco inferior a 180 graus, ou um, se a medida
de arco maior ou igual a 180 graus.
A varredura-bandeira, que zero se o arco deve ser desenhado em ngulo negativo direo, ou um, se
o arco deve ser desenhado em ngulo positivo.
As coordenadas X e Y do ponto final. (O ponto de partida determinado pelo ltimo ponto
desenhado ou o ltimo comando "moveto".)

Aqui esto os caminhos <path> usados para desenhar os arcos elpticos nas sees (b) a (e)

<path d="M 125,75 A100,50 0 0,0 225,125" /> <!-- b -->


<path d="M 125,75 A100,50 0 0,1 225,125" /> <!-- c -->
<path d="M 125,75 A100,50 0 1,0 225,125" /> <!-- d -->
<path d="M 125,75 A100,50 0 1,1 225,125" /> <!-- e -->

Como mais um exemplo, vamos a fundo para completar o smbolo "yin / yang" que parte da bandeira
da Coreia.
<!-- sombra cinza -->
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;" />
<!-- elipse azul clara -->
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;" />
<!--grande semicrculo vermelho na metade superior, seguido por um pequeno semicrculo vermelho na
metade inferior esquerda do smbolo -->
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152 A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;" />
<!-- semi-crculo azul da metade superior direita do smbolo -->
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;" />

6.5 Tcnica: convertendo de outros formatos Arc

Alguns sistemas grficos vetoriais permitem que voc especifique um arco definindo um ponto central
para a elipse, a coordenada X e Y do raio, o ngulo de partida, e a extenso do ngulo do arco . Isto
um mtodo simples da especificao, e excelente para desenho de arcos como nico objeto.
Paradoxalmente, exatamente por isso que o SVG escolhe um mtodo excntrico, aparentemente, para
especificar arcos. Em SVG, um arco no se presume sozinho; ele destinado a fazer parte de um
caminho de conexo com linhas e curvas. (Por exemplo, um retngulo arredondado precisamente isso
- uma srie de linhas e arcos elpticos.) Assim, faz sentido especificar um arco por seus pontos finais
(endpoints). s vezes, porm, voc quer um semicrculo isolado (ou, mais precisamente, uma semi-
elipse). Presumindo que voc tem uma elipse especificada como:

<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/>

Aqui esto os caminhos para desenhar os quatro possveis semi-elipses:

<!-- Hemisfrio norte -->


<path d="M cx-rx cy A rx ry 0 1 1 cx+rx cy"/>
<!-- Hemisfrio sul -->
<path d="M cx-rx cy A rx ry 0 1 0 cx+rx cy"/>
<!-- Hemisfrio leste -->
<path d="M cx cy-ry A rx ry 0 1 1 cx cy+ry"/>
<!-- Hemisfrio oeste -->
<path d="M cx cy-ry A rx ry 0 1 0 cx cy+ry"/>

Para o caso mais geral, quando se deseja desenhar um arco arbitrrio que foi especificado na notao de
"centro-e-ngulos" e gostaria de convert-lo em "pontosfinais-e-varrer" do formato SVG, use o seguinte
script Perl. Ele pede-lhe coordenadas do centro, raios, comeando pelo ngulo e medida do ngulo. A
sada uma tag <path> que voc pode inserir em seus arquivos SVG.

#!/usr/bin/perl
#
# Convert an elliptical arc based around a central point
# to an elliptical arc parameterized for SVG.
#
# Input is a list containing:
# center x coordinate
# center y coordinate
# x-radius of ellipse
# y-radius of ellipse
# beginning angle of arc in degrees
# arc extent in degrees
# x-axis rotation angle in degrees
#
# Output is a list containing:
#
# x-coordinate of beginning of arc
# y-coordinate of beginning of arc
# x-radius of ellipse
# y-radius of ellipse
# large-arc-flag as defined in SVG specification
# sweep-flag as defined in SVG specification
# x-coordinate of endpoint of arc
# y-coordinate of endpoint of arc
#
sub convert_to_svg
{
my ($cx, $cy, $rx, $ry, $theta1, $delta, $phi) = @_;
my ($theta2, $pi);
my ($x0, $y0, $x1, $y1, $large_arc, $sweep);
#
# Convert angles to radians
#
$pi = atan2(1,1) * 4; # approximation of pi
$theta2 = $delta + $theta1;
$theta1 = $theta1 * $pi / 180.0;
$theta2 = $theta2 * $pi / 180.0;
$phi_r = $phi * $pi / 180.0;
#
# Figure out the coordinates of the beginning and
# ending points
#
$x0 = $cx + cos($phi_r) * $rx * cos($theta1) +
sin(-$phi_r) * $ry * sin($theta1);
$y0 = $cy + sin($phi_r) * $rx * cos($theta1) +
cos($phi_r) * $ry * sin($theta1);
$x1 = $cx + cos($phi_r) * $rx * cos($theta2) +
sin(-$phi_r) * $ry * sin($theta2);
$y1 = $cy + sin($phi_r) * $rx * cos($theta2) +
cos($phi_r) * $ry * sin($theta2);
$large_arc = ($delta > 180) ? 1 : 0;
$sweep = ($delta > 0) ? 1 : 0;
return ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x1,
$y1);
}
#
# Request input
#
print "Enter center x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($cx, $cy) = split /\s+/, $data;
print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;
print "Enter starting angle in degrees > ";
$theta = <>;
chomp $theta;
print "Enter angle extent in degrees > ";
$delta = <>;
chomp $delta;
print "Enter angle of rotation in degrees > ";
$phi = <>;
chomp $phi;
#
# Echo original data
#
print "(cx,cy)=($cx,$cy) rx=$rx ry=$ry ",
"start angle=$theta extent=$delta rotate=$phi\n";
($x0, $y0, $rx, $ry, $phi, $large_arc_flag, $sweep_flag, $x1,
$y1) =
convert_to_svg($cx, $cy, $rx, $ry, $theta, $delta, $phi);
#
# Produce a <path> element that fits the
# specifications
#
print "<path d=\"M $x0 $y0 ", # Moveto initial point
"A $rx $ry ", # Arc command and radii,
"$phi ", # angle of rotation,
"$large_arc_flag ", # the "large-arc" flag,
"$sweep_flag ", # the "sweep" flag,
"$x1 $y1\"/>\n"; # and the endpoint

Se voc deseja converter a partir do formato SVG para um formato de "centro-e-ngulos", a matemtica
consideravelmente mais complexa. Voc pode ver as frmulas em detalhe na especificao SVG. Este
script Perl foi adaptado do cdigo no projeto Apache XML Batik.

#!/usr/bin/perl
sub acos
{
atan2(sqrt(1 - $_[0] * $_[0]), $_[0]);
}
#
# Convert an elliptical arc based around a central point
# to an elliptical arc parameterized for SVG.
#
# Input is a list containing:
#
# x-coordinate of beginning of arc
# y-coordinate of beginning of arc
# x-radius of ellipse
# y-radius of ellipse
# large-arc-flag as defined in SVG specification
# sweep-flag as defined in SVG specification
# x-coordinate of endpoint of arc
# y-coordinate of endpoint of arc
#
# Output is a list containing:
# center x coordinate
# center y coordinate
# x-radius of ellipse
# y-radius of ellipse
# beginning angle of arc in degrees
# arc extent in degrees
# x-axis rotation angle in degrees
#
sub convert_from_svg
{
my ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y)
= @_;
my ($cx, $cy, $theta, $delta, $phi);
# a plethora of temporary variables
my (
$dx2, $dy2, $phi_r, $x1, $y1,
$rx_sq, $ry_sq,
$x1_sq, $y1_sq,
$sign, $sq, $coef,
$cx1, $cy1, $sx2, $sy2,
$p, $n,
$ux, $uy, $vx, $vy
);
# Compute 1/2 distance between current and final point
$dx2 = ($x0 - $x) / 2.0;
$dy2 = ($y0 - $y) / 2.0;
# Convert from degrees to radians
$pi = atan2(1, 1) * 4.0;
$phi %= 360;
$phi_r = $phi * $pi / 180.0;
# Compute (x1, y1)
$x1 = cos($phi_r) * $dx2 + sin($phi_r) * $dy2;
$y1 = -sin($phi_r) * $dx2 + cos($phi_r) * $dy2;
# Make sure radii are large enough
$rx = abs($rx); $ry = abs($ry);
$rx_sq = $rx * $rx;
$ry_sq = $ry * $ry;
$x1_sq = $x1 * $x1;
$y1_sq = $y1 * $y1;
$radius_check = ($x1_sq / $rx_sq) + ($y1_sq / $ry_sq);
if ($radius_check > 1)
{
$rx *= sqrt($radius_check);
$ry *= sqrt($adius_check);
$rx_sq = $rx * $rx;
$ry_sq = $ry * $ry;
}
# Step 2: Compute (cx1, cy1)
$sign = ($large_arc == $sweep) ? -1 : 1;
$sq = (($rx_sq * $ry_sq) - ($rx_sq * $y1_sq) - ($ry_sq *
$x1_sq)) /
(($rx_sq * $y1_sq) + ($ry_sq * $x1_sq));
$sq = ($sq < 0) ? 0 : $sq;
$coef = ($sign * sqrt($sq));
$cx1 = $coef * (($rx * $y1) / $ry);
$cy1 = $coef * -(($ry * $x1) / $rx);
# Step 3: Compute (cx, cy) from (cx1, cy1)
$sx2 = ($x0 + $x) / 2.0;
$sy2 = ($y0 + $y) / 2.0;
$cx = $sx2 + (cos($phi_r) * $cx1 - sin($phi_r) * $cy1);
$cy = $sy2 + (sin($phi_r) * $cx1 + cos($phi_r) * $cy1);
# Step 4: Compute angle start and angle extent
$ux = ($x1 - $cx1) / $rx;
$uy = ($y1 - $cy1) / $ry;
$vx = (-$x1 - $cx1) / $rx;
$vy = (-$y1 - $cy1) / $ry;
$n = sqrt(($ux * $ux) + ($uy * $uy));
$p = $ux; # 1 * ux + 0 * uy
$sign = ($uy < 0) ? -1 : 1;
$theta = $sign * acos($p / $n);
$theta = $theta * 180 / $pi;
$n = sqrt(($ux * $ux + $uy * $uy) * ($vx * $vx + $vy * $vy));
$p = $ux * $vx + $uy * $vy;
$sign = (($ux * $vy - $uy * $vx) < 0) ? -1 : 1;
$delta = $sign * acos($p / $n);
$delta = $delta * 180 / $pi;
if ($sweep == 0 && $delta > 0)
{
$delta -= 360;
}
elsif ($sweep == 1 && $delta < 0)
{
$delta += 360;
}
$delta %= 360;
$theta %= 360;
return ($cx, $cy, $rx, $ry, $theta, $delta, $phi);
}
#
# Request input
#
print "Enter starting x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x0, $y0) = split /\s+/, $data;
print "Enter ending x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x, $y) = split /\s+/, $data;
print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;
print "Enter rotation angle in degrees ";
$phi = <>;
chomp $phi;
print "Large arc flag (0=no, 1=yes) > ";
$large_arc = <>;
chomp $large_arc;
print "Sweep flag (0=negative, 1=positive) > ";
$sweep = <>;
chomp $sweep;
print "From ($x0,$y0) to ($x,$y) rotate $phi",
" large arc=$large_arc sweep=$sweep\n";
($cx, $cy, $rx, $ry, $theta, $delta, $phi) =
convert_from_svg($x0, $y0, $rx, $ry, $phi, $large_arc,
$sweep,
$x, $y);
print "Ellipse center = ($cx, $cy)\n";
print "Start angle = $theta\n";
print "Angle extent = $delta\n";

6.6 Curvas de Bzier

Arcos podem ser caracterizados como limpos e funcionais, mas raramente seria usado a palavra
"Gracioso" para descrev-los. Se voc quiser graciosidade, voc precisa usar as curvas que so produzidas
por grficos de equaes quadrticas e cbicas. Os matemticos tm conhecimento destas curvas por
literalmente centenas de anos, mas desenh-las sempre foi uma tarefa exigente computacionalmente.

Isso mudou quando Pierre Bzier, trabalhando para a fabricante de automveis Renault e Paul de
Casteljau, um engenheiro da Citron, independentemente, descobriu uma maneira
computacionalmente conveniente para gerar estas curvas. Se voc j usou programas grficos como o
Adobe Illustrator, voc desenhou as curvas de Bzier especificando dois pontos e, em seguida, movendo
uma "ala", como mostrado no diagrama a seguir. Este identificador chamado de "ponto de controle",
porque ele controla a forma da curva. Quando voc move a ala, a curva muda de uma forma que, para
os no iniciados, completamente incompreensvel. Mike Woodburn, um designer grfico em Key
Point Software, sugere na figura a seguir uma maneira de visualizar como o ponto de controle interage
na curva:
imagine que a linha feita de metal flexvel. O ponto de controle possui um m em seu interior;
quanto mais perto o ponto de controle de um ponto, mais forte a atrao da linha.

6.6.1 Curvas de Bzier quadrtica

A mais simples das curvas Bzier a curva quadrtica. Voc especifica um ponto de incio, um ponto de
chegada e um ponto de controle. Imagine dois postes de tenda colocados nas extremidades da linha.
Estes postes da barraca se encontram no ponto de controle. Esticada entre os centros da tenda uma faixa
de borracha. O local onde as curvas da curva esto ligadas o centro exato do elstico de borracha.

Programas como o Adobe Illustrator mostram-lhe apenas um dos "postes da tenda." A prxima vez que
voc usar um programa desse tipo, mentalmente adicione no segundo poste e o resultado da curva ser
muito menos misterioso.

Este o conceito; agora vamos para a questo prtica de realmente produzir uma curva em SVG.
Voc especifica uma curva quadrtica em um <path> com o comando Q ou q. O comando seguido
por dois conjuntos de coordenadas que especificam um ponto de controle e um ponto final. O
comando em maisculas implica coordenadas absolutas; em minsculas implica coordenadas relativas. A
curva na figura abaixo foi desenhada a partir de (30, 75) a (300, 120) com o ponto de controle no (240,
30), e foi especificada em SVG como segue:

<path d="M30 75 Q 240 30, 300 120" style="stroke: black; fill: none;"/>

Voc pode especificar vrios conjuntos de coordenadas depois de um comando de curva quadrtica. Isso
vai gerar uma curva "PolyBzier". Supondo que voc queira um <path> que desenhe uma curva a partir
de (30, 100) at (100, 100) com um ponto de controle no (80, 30) e, em seguida, continue com uma
curva (200, 80) com um ponto de controle no (130, 65). Aqui est o SVG para este <path>, com as
coordenadas dos pontos de controle em itlico. O resultado mostrado na metade esquerda da figura ;
os pontos de controle e linhas so mostradas na metade direita da figura.

<path d="M30 100 Q 038 , 100 100, 56031 , 200 80" />
Voc provavelmente est se perguntando, "O que aconteceu com a 'graciosidade?' Essa curva apenas
irregular. " Esta uma avaliao precisa. S porque as curvas esto ligadas no significa que elas ficaro
bem juntas. por isso que o SVG fornece o comando curva quadrtica suave, que representado pela
letra "T" (ou "t", se voc quiser usar coordenadas relativas). O comando seguido pela prxima
extremidade da curva; o ponto de controle calculado automaticamente, como a especificao diz, por
"reflexo do ponto de controle no comando anterior, em relao ao ponto atual".

Para as curvas oblquas, o novo ponto de controle (x2, y2) calculado a partir do ponto de partida da
curva (x, y) e o ponto de controle anterior (x1, y1) com estas frmulas:
x2 = 2 * x - x1
y2 = 2 * y y1

Aqui uma curva Bzier quadrtica elaborado a partir de (30, 100) a (100, 100) com um ponto de
controle em (80, 30) e, em seguida, continua suavemente (200, 80). A metade esquerda mostra a curva;
a metade direita mostra os pontos de controle. O ponto de controle refletido mostrado com uma linha
tracejada. A graciosidade voltou!

<path d="M30 100 Q 80 30, 100 100 T 200 80" />

6.6.2 Curvas de Bzier cbicas

Uma nica curva Bzier quadrtica tem exatamente um ponto de inflexo (o ponto onde a curva muda
de direo). Enquanto estas curvas so mais versteis do que os arcos simples, podemos fazer ainda
melhor usando curvas de Bzier cbicas, que podem ter um ou dois pontos de inflexo. A diferena
entre as curvas quadrticas e cbicas que a curva cbica tem dois pontos de controle, um para cada
terminal.
A tcnica para gerar a curva cbica semelhante a usada para gerar a curva quadrtica. Voc desenha
trs linhas que ligam a terminais e pontos de controle (a), e conecta seus pontos mdios. Isto produz
duas linhas (b). Ligando os pontos mdios, produz uma linha (C), cujo ponto central determina um dos
pontos da curva final.
Para especificar uma curva cbica, use o comando "C" ou "c". O comando seguido por trs conjuntos
de coordenadas que especificam o ponto de controle para o ponto de incio, o ponto de controle para o
ponto final, e o ponto final. Tal como acontece com todos os outros comandos de <path>, um comando
com letra maiscula implica coordenadas absolutas; minsculas implica coordenadas relativas.
A curva, no diagrama anterior, foi desenhada a partir de (20, 80) at (200, 120) com pontos de controle
em (50, 20) e (150, 60).

<path d="M20 80 C 50 20, 150 60, 200 120" style="stroke: black; fill: none;"/>

H muitas curvas interessantes que voc pode desenhar, dependendo da relao dos pontos de controle.
Para fazer o grfico do limpador, ns mostramos apenas as linhas a partir de cada ponto final para o seu
ponto de controle:

Tal como acontece com as curvas quadrticas, voc pode construir uma "PolyBzier" cbica
especificando vrios conjuntos de coordenadas depois de um comando de curva cbica. O ltimo ponto
da primeira curva torna-se o primeiro ponto da curva seguinte, e assim por diante. Aqui, <path> que
desenha uma curva cbica de (30, 100) at (100, 100) com pontos de controle em (50, 50) e (70, 20);
imediatamente seguido por uma curva que funciona de volta para (65, 100) com pontos de controle em
(110, 130) e (45, 150). Aqui est o SVG para este <path>, com as coordenadas do ponto de controle em
itlico. O resultado mostrado na metade esquerda da figura; os pontos de controle e linhas so
mostrados na metade direita do diagrama.

<path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100" />
Se voc quiser garantir a boa juno entre as curvas, voc pode usar o comando "S" (ou "s" para
coordenadas relativas). De um modo anlogo ao comando "T" para curvas quadrticas, a nova curva
tomar os pontos finais das curvas anteriores como ponto de partida, e o primeiro ponto de controle
ser o reflexo do ponto de controle final anterior.

Tudo que voc precisa fornecer o ponto de controle para o prximo ponto final na curva, seguido do
prximo ponto de extremidade. Aqui, uma curva cbica de Bzier elaborada a partir de (30, 100) a
(100, 100) com pontos de controle em (50, 30) e (70, 50). Continua sem problemas para (200, 80),
usando (150, 40), como seu ponto de controle final. A metade superior mostra a curva; a metade
inferior mostra os pontos de controle. O ponto de controle refletido mostrado com uma linha
tracejada.

<path d="M30 100 C 50 30, 70 50, 100 100 S 150 40, 200 80" />

6.7 Sumrio de referncias <path>

Comandos <path>
Comandos Argumentos Efeitos
M, m x, y Move-se para a coordenada dada.
L, l x, y Desenha uma linha at as coordenadas dadas. Voc pode fornecer
mltiplos
conjuntos de coordenadas para desenhar um polgono.
H, h x Desenha uma linha horizontal para a coordenada-x dada.
V, v y Desenha uma linha vertical para a coordenada-y dada.
A, a rx, ry Desenha um arco elptico do ponto atual (x, y). Os pontos esto em uma
x-axis-rotation elipse com "rx" (raio-x) e "ry" (raio-y). A elipse rodada em graus no
large-arc sweep eixo de rotao x (x-axis-rotation). Se o arco inferior a 180 graus,
x, y "large-arc" igual a zero(0); se for maior que 180 graus, "large-arc"
igual a um(1). Se o arco deve ser desenhado em direo positiva, "sweep"
igual a um (1); caso contrrio, igual a zero(0).
Q, q x, y, x1, y1 Desenha uma curva Bzier quadrtica do ponto atual at (x, y)
usando o ponto de controle (x1, y1).
T, t x, y Desenha uma curva Bzier quadrtica do ponto atual at (x, y). O ponto
de controle ser o reflexo do ponto de controle do comando"Q"
anterior. Se no houver nenhuma curva anterior, o ponto atual vai ser
utilizada como o ponto de controle.
C, c x, y, x1, y1, x2, Desenha uma curva Bzier cbica do ponto atual at (x, y) usando o
y2 ponto de controle (x1, y1) como o ponto de controle para o incio da
curva e (x2, y2), como o ponto de controle para o ponto final da curva.
S, s x, y, x2, y2 Desenha uma curva Bzier cbica do ponto atual at (x, y), usando
(x2, y2) como o ponto de controle para este novo ponto final. O
primeiro ponto de controle ser o reflexo dos pontos de controle final
dos comandos "C" anteriores. Se no houver nenhuma curva anterior, o
ponto atual ser utilizado como o primeiro ponto de controle.

6.8 Caminhos (path) e preenchimento (filling)

As informaes descritas no Captulo 3 na Seo 3.5.1 tambm se aplicam a caminhos, que no podem
ter apenas linhas que se intersectam, mas tambm podem ter "buracos" neles. Considere os caminhos
no exemplo abaixo, ambos desenham quadrados aninhados. No primeiro caminho, que ambos so
desenhados no sentido horrio; no segundo caminho, o quadrado externo desenhado no sentido
horrio e o quadrado interno desenhado no sentido anti-horrio.

<!-- Ambos no sentido horrio -->


<path d="M 0 0, 60 0, 60 60, 0 60 Z M 15 15, 45 15, 45 45, 15 45Z"/>
<!-- caminho externo, no sentido horrio, o interno no sentido anti-horrio -->
<path d="M 0 0, 60 0, 60 60, 0 60 Z M 15 15, 15 45, 45 45, 45 15Z"/>

A figura desenhada mostra que h uma diferena quando voc usa um "fill-rule" de "nonzero", que leva
em conta o sentido das linhas para determinar se um ponto est dentro ou fora de um caminho. Usar
um "fill-rule" de "evenodd" produz o mesmo resultado para ambos os caminhos; ele usa o nmero total
de linhas cruzadas e ignora sua direo.
6.9 O elemento marcador <marker>

Vamos supor o seguinte caminho, que utiliza uma linha, um arco elptico, e outra linha para
desenhar o canto arredondado:
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" style="fill: none; stroke: black;"/>

Ns gostaramos de marcar a direo do caminho, colocando um crculo no incio, um slido tringulo,


no final, e pontas de seta para os outros vrtices, como mostrado na figura. Para conseguir este efeito,
vamos construir trs elementos <marker> e dizer ao <path> para referenci-los.

Vamos comear com um exemplo que aumenta o marcador circular. Um marcador um grfico"auto-
suficiente" com seu prprio conjunto particular de coordenadas, ento voc tem que especificar a
largura (markerWidth) e altura (markerHeight) no comeo da tag <marker>. Isto seguido pelos
elementos SVG necessrios para redigir o marcador, e termina com um fechamento </marker>. Um
elemento <marker> no se apresenta, por si s, mas estamos colocando-o em um elemento <defs>
porque onde os elementos reutilizveis pertencem.

Desde que ns queremos o crculo para estar no incio do caminho, ns adicionamos um marcador de
incio ao estilo no <path>. O valor desta propriedade uma referncia URL para o elemento <marker>
que acabou de ser criado.

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</defs>
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="marker-start: url(#mCircle); fill: none; stroke: black;"/>
O motivo do crculo aparecer no lugar errado que, por padro, o marcador de incio, ponto (0, 0)
alinhado com o incio das coordenadas do caminho. O exemplo a seguir acrescenta os atributos "refX" e
"refY" que dizem que coordenadas (no sistema do marcador) so para alinhar com as coordenadas de
incio. Uma vez que estes so adicionados, o marcador circular aparece exatamente onde ele desejado.

<marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">


<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>

Perante esta informao, podemos agora escrever o prximo exemplo, que aumenta o marcador
triangular e referencia-o como o marcador de ponta para o caminho. Ento, podemos adicionar o
marcador de ponta de seta e referenci-lo como o marcador mdio. O marcador mdio ser anexado a
cada vrtice, exceto no incio e no final do caminho. Observe que os atributos refX e ref Y foram
definidos de forma que no final a grande ponta da flecha se alinhe com os vrtices intermedirios,
enquanto a ponta do tringulo slido se alinha com o vrtice final.
<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
<marker id="mArrow" markerWidth="6" markerHeight="10" refX="0" refY="4">
<path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/>
</marker>
<marker id="mTriangle" markerWidth="5" markerHeight="10" refX="5" refY="5">
<path d="M 0 0 5 5 0 10 Z" style="fill: black;"/>
</marker>
</defs>
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" style="marker-start: url(#mCircle); marker-mid:
url(#mArrow); marker-end: url(#mTriangle); fill: none; stroke: black;"/>
Para obter o efeito que voc quer, voc deve definir explicitamente um atributo marcador "orient" para
"auto". Isto o faz rodar automaticamente para coincidir com a direo do percurso (poder igualmente
especificar um nmero de graus, caso em que o marcador ter sempre que ser rodado por quantidade.)

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
<marker id="mArrow" markerWidth="6" markerHeight="10" refX="0" refY="4" orient="auto">
<path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/>
</marker>
<marker id="mTriangle" markerWidth="5" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M 0 0 5 5 0 10 Z" style="fill: black;"/>
</marker>
</defs>
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" style="marker-start: url(#mCircle);
marker-mid: url(#mArrow); marker-end: url(#mTriangle); fill: none; stroke: black;"/>

Outro atributo til o atributo "markerUnits". Se definido como "strokeWidth", o marcador do


sistema de coordenadas definido para que uma unidade seja igual a largura do traado. Isso faz com
que o seu marcador cresa na proporo da largura do trao; o comportamento padro e
normalmente o que se quer. Se voc definir o atributo para "userSpaceOnUse", as coordenadas do
marcador sero presumidas as mesmas do sistema de coordenadas do objeto que faz referncia ao
marcador. O marcador permanecer o mesmo independentemente do tamanho da largura do traado.

6.10 Miscelnea de marcadores

Se quiser o mesmo marcador no incio, meio e fim de um caminho, voc no precisa especificar todas as
propriedades para marcador de incio, marcador de meio, e marcador de ponta. Basta usar a propriedade
marcador e referenciar o marcador que voc deseja. Assim, se quisssemos que todos os vrtices de um
marcador sejam circulares, escreveramos assim:
<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</defs>
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" style="marker: url(#mCircle); fill: none; stroke:
black;"/>

Tambm possvel definir o "viewBox" e atributos "preserveAspectRatio" num elemento <marker> para
ganhar ainda mais controle sobre a sua exibio. Estes funcionam exatamente como descrito no
Captulo 2, na Seo 2.3 e na Seo 2.4.
Voc pode fazer referncia a um elemento<marker> em um elemento<polygon>, <polyline> ou <line>
bem como em um <path>.
O pensamento seguinte pode ter ocorrido a voc: "Se um marcador pode ter um caminho nele, pode
esse caminho tm um marcador ligado a ele tambm? "A resposta sim, ele pode, mas o segundo
marcador deve caber no retngulo estabelecido pelos atributos "markerWidth" e "markerHeight" do
primeiro marcador . Por favor, lembre-se que s porque uma coisa pode ser feita no significa que deva
ser feito. Se voc precisa de um tal efeito, provavelmente melhor desenhar o marcador secundrio
como parte do marcador primrio, em vez de tentar aninhar os marcadores.
Captulo 7. Padres e gradientes

At este ponto, temos usado apenas cores slidas para preencher e delinear objetos grficos. No h
restries em utilizar apenas cores slidas; voc tambm pode usar um padro ou um gradiente para
preencher ou traar um grfico. Isso o que vamos examinar neste captulo.

7.1 Padres

Para usar um padro, voc define um objeto grfico que replicado horizontalmente e/ou verticalmente
para preencher outro objeto (ou borda). Este objeto grfico chamado de ladrilho (tile), porque o ato
de preencher um objeto com um padro (pattern) muito parecido com cobrir uma rea com ladrilhos
(ou azulejos). Nesta seo, vamos usar a curva quadrtica desenhada via SVG no exemplo abaixo como
nosso ladrilho (tile). desenhado em um quadro cinza para mostrar sua rea (20 por 20 unidades do
usurio) com clareza.
<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none;"/>
<path d="M 0 0 h20 v20 h-20 z" style="stroke: gray; fill: none;"/>

7.1.1 Unidades de Padro (patternsUnits)

Para criar um padro (pattern) em ladrilho (tiles), voc deve colocar os elementos <path> que descrevem
seu ladrilho em um elemento <pattern> e, em seguida, tomar algumas decises. A primeira deciso
como voc deseja espaar os ladrilhos, e isto reflete-se no atributo "patternUnits".

Voc quer que os ladrilhos sejam espaados para preencher uma certa porcentagem de cada objeto eles
so aplicados a, ou voc os quer afastados com intervalos iguais, no importa qual o tamanho do objeto
que est preenchendo?

Se voc quer dimensionar o ladrilho em uma base objeto a objeto, voc deve especificar as coordenadas
X e Y do canto superior esquerdo, sua largura e altura, como porcentagens ou decimais em uma faixa de
zero a um, e definir as "patternUnits" atribuindo um "objectBoundingBox". A caixa delimitadora do
objeto o menor retngulo que inclui completamente um determinado objeto grfico.

<defs>
<pattern id="tile" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z" style="stroke: gray; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100" style="fill: url(#tile); stroke: black;"/>


<rect x="135" y="20" width="70" height="80" style="fill: url(#tile); stroke: black;"/>
<rect x="220" y="20" width="150" height="130" style="fill: url(#tile); stroke: black;"/>
Na Figura, o retngulo mais esquerda, que de 100 unidades do usurio de largura e e altura, oferece
um ajuste exato para cinco peas que so, cada uma, 20 unidades do usurio de largura e altura.
No retngulo do meio, a largura e altura no so grandes o suficiente para mostrar, em qualquer pea, o
padro completamente, ento eles so truncados.
No retngulo mais direita, o espao extra adicionado desde a largura do retngulo e altura superior a
cinco vezes o espao necessrio para um nico ladrilho. Em todos os casos, uma vez definida as
coordenadas X e Y, o canto superior esquerdo do bloco coincide com o canto superior esquerdo da
retngulo.

Se voc est acostumado maioria dos programas grficos, este comportamento um pouco chocante.
Programas de edio de grficos tpicos colocam ladrilhos diretamente um ao lado do outro para
preencher a rea, no importa o seu tamanho. Se este o comportamento que voc quer, voc deve
definir as "patternUnits" com o atributo "userSpaceOnUse", e especificar as coordenadas X e Y, e
a largura e altura do azulejo em unidades do usurio.

<defs>
<pattern id="tile" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z" style="stroke: gray; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100" style="fill: url(#tile); stroke: black;"/>


<rect x="135" y="20" width="70" height="80" style="fill: url(#tile); stroke: black;"/>
<rect x="220" y="20" width="150" height="130" style="fill: url(#tile); stroke: black;"/>

Na figura abaixo, as telhas tm tamanho constante em todos os trs retngulos. Seu alinhamento , no
entanto, dependente do sistema de coordenadas subjacente. O retngulo mdio, por exemplo, tem uma
coordenada x, que no um mltiplo de vinte, de modo que o canto superior esquerdo do retngulo
no coincide com o canto superior esquerdo do ladrilho. (As extremidades superiores esto alinhadas,
porque a coordenada superior Y de todos os trs retngulos so cuidadosamente escolhidas para ser um
mltiplo de vinte.)
Se voc no especificar um valor para "patternUnits", o padro "objectBoundingBox".

7.1.2 Unidades padro de contedo

Voc deve decidir, a seguir, quais as unidades devem ser usadas para expressar os dados do padro
propriamente ditos. Por padro, os "patternContentUnits" so definidos com o atributo
"userSpaceOnUse". Se voc definir o atributo para "objectBoundingBox", o caminho dos pontos de
dados expresso em termos do objeto a ser preenchido.

Se voc usar o "objectBoundingBox" para seus "patternContentUnits", voc deve tirar quaisquer objetos
a serem preenchidos com o canto superior esquerdo de suas caixas delimitadoras na origem (0, 0). Alm
disso, voc ter que reduzir o derrame de largura dos dados do padro para 0,01, uma vez que estas
unidades so percentagens, e no unidades do usurio.
<defs>
<pattern id="tile" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"
x="0" y="0" width=".2" height=".2">
<path d="M 0 0 Q .05 .20 .10 .10 T .20 .20" style="stroke: black; fill: none; stroke-width: 0.01;"/>
<path d="M 0 0 h 0.2 v 0.2 h-0.2z" style="stroke: black; fill: none; stroke-width: 0.01;"/>
</pattern>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="100" height="100" style="fill: url(#tile); stroke: black;"/>
</g>
<g transform="translate(135,20)">
<rect x="0" y="0" width="70" height="80" style="fill: url(#tile); stroke: black;"/>
</g>
<g transform="translate(220,20)">
<rect x="0" y="0" width="150" height="130" style="fill: url(#tile); stroke: black;"/>
</g>

Se voc quiser reduzir um objeto grfico existente para uso como um ladrilho, mais fcil usar o
atributo "ViewBox" e escal-lo. Especificando "ViewBox", ir substituir qualquer informao de
"patternContentUnits". Outra opo possvel usar o atributo "preserveAspectRatio", conforme
descrito no Captulo 2, na Seo 2.4.

<defs>
<pattern id="tile" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 150 150">
<path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100" style="stroke: black; stroke-width: 5; fill:
none;"/>
</pattern>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#tile); stroke: black;"/>
7.1.3 Padres aninhados

Novamente, isso pode ter ocorrido com voc: "Se um objeto pode ser preenchido com um padro,
ento um padro pode ser preenchido com um padro? "A resposta sim. Ao contrrio de marcadores
aninhados, que raramente so necessrios, existem alguns efeitos que voc no pode alcanar facilmente
sem padres aninhados. O exemplo abaixo cria um retngulo preenchido com crculos, todos cheios de
listras horizontais. Isso produz o efeito incomum, mas vlido, de bolinhas, mostrado na figura.

<defs>
<pattern id="stripe" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
<path d="M 0 0 6 0" style="stroke: black; fill: none;"/>
</pattern>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
<circle cx="12" cy="12" r="12" style="fill: url(#stripe); stroke: black;"/>
</pattern>
</defs>
<rect x="36" y="36" width="100" height="100" style="fill: url(#polkadot); stroke: black;"/>

7.2 Os gradientes

Em vez de preencher um objeto com uma cor slida, voc pode preench-lo com um gradiente, uma
transio suave de uma cor para outra. Gradientes podem ser: linear, onde a transio de cor ocorre ao
longo de uma linha reta, ou radial, onde a transio ocorre ao longo de uma trajetria circular.

<defs>
<linearGradient id="two_hues">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="100%" style="stop-color: #0099cc;"/>
</linearGradient>
</defs>
<rect x="20" y="20" width="200" height="100" style="fill: url(#two_hues); stroke: black;"/>
7.2.1.1 O elemento de paragem

Vamos examinar o elemento <stop> mais de perto. Ele tem dois atributos necessrios; o "offset" diz o
ponto ao longo da linha na qual a cor deve ser igual ao "stop-color". O deslocamento expresso como
uma porcentagem de 0 a 100% ou como um decimal no valor de 0 a 1,0.

<defs>
<linearGradient id="three_stops">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
</defs>
<rect x="20" y="20" width="200" height="100" style="fill: url(#three_stops); stroke: black;"/>

7.2.1.2 Estabelecer uma linha de transio para um gradiente linear

O comportamento padro de um gradiente linear fazer a transio ao longo de uma linha horizontal a
partir do lado esquerdo de um objeto para o lado direito. Se voc quer a transio de cores para ocorrer
atravs de uma linha vertical ou uma linha em um ngulo, voc deve especificar o ponto inicial com os
atributos X1 e Y1 e seus pontos terminais com os atributos X2 e Y2. Por padro, estes so tambm
expressos como porcentagens de 0% a 100% ou decimais de 0 a 1. No Exemplo abaixo, vamos usar os
mesmos limites de cor em um gradiente horizontal, vertical e diagonal. Ao invs de duplicar os "stops"
em cada elemento <linearGradient>, usaremos o atributo "xlink: href" para se referir ao gradiente inicial
da esquerda para a direita. As paradas sero herdadas, mas as coordenadas X e Y sero anuladas por cada
gradiente individual.

<defs>
<linearGradient id="three_stops">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
<linearGradient id="right_to_left" xlink:href="#three_stops" x1="100%" y1="0%" x2="0%" y2="0%"/>
<linearGradient id="down" xlink:href="#three_stops" x1="0%" y1="0%" x2="0%" y2="100%"/>
<linearGradient id="up" xlink:href="#three_stops" x1="0%" y1="100%" x2="0%" y2="0%"/>
<linearGradient id="diagonal" xlink:href="#three_stops" x1="0%" y1="0%" x2="100%" y2="100%"/>
</defs>
<rect x="40" y="20" width="200" height="40" style="fill: url(#three_stops); stroke: black;"/>
<rect x="40" y="70" width="200" height="40" style="fill: url(#right_to_left); stroke: black;"/>
<rect x="250" y="20" width="40" height="200" style="fill: url(#down); stroke: black;"/>
<rect x="300" y="20" width="40" height="200" style="fill: url(#up); stroke: black;"/>
<rect x="40" y="120" width="200" height="100" style="fill: url(#diagonal); stroke: black;"/>

Se voc deseja estabelecer a linha de transio usando as unidades de usurio, em vez de porcentagens,
defina as "gradientUnits" para "userSpaceOnUse" em vez do valor padro, que "objectBoundingBox".

7.2.1.3 O atributo "spreadMethod"

A linha de transio no tem que ir de um canto a outro do objeto. O que acontece se for dito que a
linha de transio vai de (20%, 30%) de (40%, 80%)? O que acontece com a parte do objeto de fora da
linha? Voc pode definir o "spreadMethod" e atribuir a um dos seguintes valores:
"pad" - O incio e trmino de "stop-color" ser estendido para as bordas do objeto.
"repeat" - O gradiente ser repetido do incio ao fim, at atingir as extremidades do objeto.
"reflect" - O gradiente ser refletido do fim para o incio, do incio para o fim at atingir as bordas do
objeto.

<defs>
<linearGradient id="partial" x1="20%" y1="30%" x2="40%" y2="80%">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
<linearGradient id="padded" xlink:href="#partial" spreadMethod="pad"/>
<linearGradient id="repeated" xlink:href="#partial" spreadMethod="repeat"/>
<linearGradient id="reflected" xlink:href="#partial" spreadMethod="reflect"/>
<line id="show-line" x1="20" y1="30" x2="40" y2="80" style="stroke: white;"/>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#padded); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (20,20)"/>
<rect x="130" y="20" width="100" height="100" style="fill: url(#repeated); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (130,20)"/>
<rect x="240" y="20" width="100" height="100" style="fill: url(#reflected); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (240,20)"/>
7.2.2 gradiente radial

O outro tipo de gradiente que voc pode usar o gradiente radial, onde a transio de cor ocorre ao
longo de um percurso circular. configurado, em muito, da mesma maneira que um gradiente linear.

<defs>
<radialGradient id="three_stops">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#three_stops); stroke: black;"/>

7.2.2.1 Estabelecendo limites de transio para um gradiente radial

Em vez de usar uma linha para determinar onde os pontos de paragem de 0% e 100% devem ser, os
limites de um gradiente radial so determinados por um crculo; o centro o ponto de parada 0%, e a
circunferncia externa define o ponto de paragem 100%. Voc define o crculo externo com os atributos
cx (Centro x), cy (centro y) e r(raio). Todos estes so, em termos de porcentagens do
"objectBoundingBox". Os valores padro para todos esses atributos de 50%.

<defs>
<radialGradient id="center_origin" cx="0" cy="0" r="100%">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#center_origin); stroke: black;"/>
O ponto de parada 0%, tambm chamado de ponto focal, , por padro, colocado no centro do crculo
que define o ponto de paragem 100%. Se voc deseja ter o ponto de parada 0% em algum ponto
diferente do centro do crculo limite, voc deve alterar os atributos "fx" e "fy".
O ponto focal deve estar dentro do crculo estabelecido para o ponto de paragem 100%. Se no for,
o programa visualizador SVG ir mover automaticamente o ponto focal para o exterior da
circunferncia do crculo final.

<defs>
<radialGradient id="focal_set" cx="0" cy="0" fx="30%" fy="30%" r="100%">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#focal_set); stroke: black;"/>

Os valores padro para os atributos de definio de limite de um <radialGradient> so as seguintes:

Atributo Valor Padro


cx 50% (centro horizontal da caixa delimitadora do objeto)
cy 50% (centro vertical da caixa delimitadora do objeto)
r 50% (metade da largura / altura da caixa delimitadora do objeto)
fx O mesmo que cx
fy O mesmo que cy

Se voc deseja estabelecer os limites do crculo usando coordenadas de espao do usurio, em vez de
porcentagens, defina as "gradientUnits" para "userSpaceOnUse" em vez do valor padro, que
"objectBoundingBox".
7.2.2.2 O atributo spreadMethod para gradientes radiais

No caso em que os limites que voc descreveu no chegam s bordas do objeto, voc pode definir o
atributo "spreadMethod" a um dos valores "pad", "repeat", ou "reflect" como descrito anteriormente na
Seo 7.2.1.3 para preencher o espao restante como voc deseja.

<defs>
<radialGradient id="three_stops" cx="0%" cy="0%" r="70%">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
<radialGradient id="padded" xlink:href="#three_stops" spreadMethod="pad"/>
<radialGradient id="repeated" xlink:href="#three_stops" spreadMethod="repeat"/>
<radialGradient id="reflected" xlink:href="#three_stops" spreadMethod="reflect"/>
</defs>
<rect x="20" y="20" width="100" height="100" style="fill: url(#padded); stroke: black;"/>
<rect x="130" y="20" width="100" height="100" style="fill: url(#repeated); stroke: black;"/>
<rect x="240" y="20" width="100" height="100" style="fill: url(#reflected); stroke: black;"/>

7.3 Transformando gradientes e Padres

s vezes voc pode querer inclinar, esticar, ou rodar um padro ou gradiente. Voc no transforma o
objeto que est sendo preenchido; voc transforma o padro ou o espectro de cores utilizado para
preencher o objeto. Os atributos "gradientTransform" e "patternTransform" permitem fazer isso.

<defs>
<linearGradient id="plain">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
<linearGradient id="skewed-gradient" gradientTransform="skewX(10)" xlink:href="#plain"/>
<pattern id="tile" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z" style="stroke: gray; fill: none;"/>
</pattern>
<pattern id="skewed-tile" patternTransform="skewY(15)" xlink:href="#tile"/>
</defs>
<rect x="20" y="10" width="100" height="100" style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="10" width="100" height="100" style="fill: url(#skewed-tile); stroke: black;"/>
<rect x="20" y="120" width="200" height="50" style="fill: url(#plain); stroke: black;"/>
<rect x="20" y="190" width="200" height="50" style="fill: url(#skewed-gradient); stroke: black;"/>
Uma nota final sobre gradientes e padres - embora tenham sido aplicados apenas em uma rea de uma
forma preenchida, voc tambm pode aplic-los em bordas (stroke). Isso permite que voc produza um
esboo colorido ou com mltiplas estampas para um objeto. Normalmente voc vai definir a largura da
borda com um nmero maior do que um, para que o efeito seja mais claramente visvel.
Captulo 8. Texto

Embora possa ser verdade que cada imagem conta uma histria, melhor ainda usar as palavras para
ajudar a contar a histria. Assim, SVG tem vrios elementos que permitem adicionar texto para seus
grficos.

8.1 Terminologia

Antes de investigar o principal mtodo de adicionar o texto, o elemento <text>, devemos definir alguns
termos que voc ver se ler a especificao SVG ou se trabalhar com texto em qualquer ambiente
grfico:

Caractere
Um caractere, em termos de XML, um byte ou bytes com um valor numrico de acordo com o padro
Unicode. Por exemplo, o que chamamos de letra "g" o caractere com o valor Unicode 103.

Glyph
Um glifo a representao visvel de um caractere ou caracteres. Um nico caractere pode ter muitos
glifos diferentes para represent-lo. A figura abaixo mostra a palavra "glyphs" escrito com dois conjuntos
diferentes de glifos - uma especial ateno inicial "g" - o mesmo caractere, mas os glifos so
marcadamente diferentes.

Vrios caracteres podem reduzir-se a um nico glifo; algumas fontes tm glifos separados para as
combinaes de letras "fl" e "ff" para fazer o seu espaamento parecer melhor (estes so chamados
ligaduras). Outras vezes, um nico caractere pode ser composto por mltiplos glifos; um programa de
impresso pode criar o caractere "E" (que tem valor Unicode 233), combinando o glifo "e" com uma
marca de acento sem espaamento "".

A linha tracejada, na parte superior da figura utilizada para determinar a "cap-height", que
a altura de uma letra maiscula acima da linha de base. A linha inferior pontilhada usada para
determinar a sada da altura, que, logicamente, a distncia entre a linha de base para o topo de uma
letra minscula "x".

8.2 Atributos simples e propriedades do elemento de texto

A forma mais simples do elemento <text> requer apenas dois atributos, X e Y, que definem o ponto em
que a linha de base do primeiro caractere do contedo do elemento colocado.
O estilo padro para o texto, como acontece com todos os objetos, ter uma cor de preenchimento de
preto e sem contorno.
Isto, como se v, precisamente o que voc quer para o texto. Se voc definir o contorno, bem como
o preenchimento, o texto parece desconfortvel de espessura. Se voc definir apenas o contorno, voc
pode obter um conjunto agradvel de glifos descritos, especialmente se voc diminuir a largura do
traado.

<path d="M 20 10, 20 120 M 10 30 100 30 M 10 70 100 70 M 10 110 100 110" style="stroke: gray;"/>
<text x="20" y="30">Simplest Text</text>
<text x="20" y="70" style="stroke: black;">Outlined/filled</text>
<text x="20" y="110" style="stroke: black; stroke-width: 0.5; fill: none;">Outlined only</text>

Muitas das outras propriedades que se aplicam ao texto so as mesmas em que eles esto no CSS
padro . A seguir est uma lista das propriedades CSS e valores que so implementados no Apache Batik
visualizador verso 1.0:

font-family - O valor uma lista separada por espaos de nomes de famlias de fontes ou nomes de
famlia genricos. Os nomes de famlia genricos so "serif", "sans-serif", e "monospace". Fontes Serif
tm pequenos "ganchos" nas extremidades dos cursos; fontes sans-serif no. Na figura abaixo, a palavra
esquerda est em uma fonte serif e a palavra direita est em uma fonte sans-serif. Ambas as fontes com
serifa e sem serifa so proporcionais; a largura de um M maisculo no a mesma largura de um I
maisculo. Uma fonte de espaamento fixo, que pode ou no pode ter serifas, aquela em que todos os
"glifos" tm a mesma largura, como as letras de uma mquina de escrever.

font-size - O valor a distncia da linha de base-a-base dos glifos se tiver mais de uma linha de texto.
Em SVG, voc no pode ter contedo <text> multi-linha, de modo que o conceito um pouco
abstrato.) Se voc usar unidades nesse atributo, como em style = "font-size: 18pt", o tamanho de dezoito
pontos ser convertido para unidade de usurio antes de serem renderizados, para que ele possa ser
afetado por transformaes.

font-weight - Os dois valores mais comumente usados desta propriedade so "negrito"(bold) e


"normal" (normal). Voc precisa do valor "normal" apenas no caso de voc querer colocar um texto
"no negrito" em um grupo cujo estilo foi definido para = "font-weight: bold".

font-style - Os dois valores mais comumente usados dessa propriedade so "itlico" (italic) e "normal"
(Normal).

text-decoration - Os valores possveis dessa propriedade so "nenhum" (none), "sublinhado"


(underline), "overline" e "line-through".

word-spacing - O valor desta propriedade uma extenso, quer em unidades explcitas, como "pt" ou
em unidades do usurio. Um nmero positivo aumenta o espao entre as palavras, configur-lo para
"normal" mantm o espao normal, e torn-lo negativo diminui o espao entre palavras. O
comprimento especificado adicionado ao espaamento normal.

letter-spacing - O valor desta propriedade uma extenso, quer em unidades explcitas, como "pt" ou
em unidades do usurio. Um nmero positivo aumenta o espao entre as letras individuais, configur-lo
para"normal" para manter o espao normal, e torn-lo negativo diminui o espao entre as letras. O
comprimento especificado adicionado ao espaamento normal.

<g style="font-size: 18pt">


<text x="20" y="20" style="font-weight:bold;">bold</text>
<text x="120" y="20" style="font-style:italic;">italic</text>
<text x="20" y="60" style="text-decoration:underline;">under</text>
<text x="120" y="60" style="text-decoration:overline;">over</text>
<text x="200" y="60" style="text-decoration:line-through;">through</text>
<text x="20" y="90" style="word-spacing: 10pt;">more word space</text>
<text x="20" y="120" style="word-spacing: -3pt;">less word space</text>
<text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>
<text x="20" y="180" style="letter-spacing: -2pt;">narrow letter space</text>
</g>

8.3 Alinhamento de Texto

O elemento <text> permite especificar o ponto de partida, mas voc no sabe, a priori, o seu ponto
final. Isso tornaria mais difcil o alinhamento do texto para o centro ou direita, se no fosse a
propriedade "text-anchor". Voc pode configur-la para um valor de comeo, meio ou fim. Para fontes
que so desenhadas da esquerda para a direita, estes so equivalentes aos alinhamentos esquerda,
centro, e direita. Para fontes que so desenhadas em outras direes (ver Seo 8.7) estes tm um efeito
diferente.

<g style="font-size: 14pt;">


<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
<text x="100" y="30" style="text-anchor: start">Start</text>
<text x="100" y="60" style="text-anchor: middle">Middle</text>
<text x="100" y="90" style="text-anchor: end">End</text>
8.4 O elemento <tspan>

Outra consequncia de no saber comprimento do texto com antecedncia, que difcil construir
uma cadeia com diferentes atributos de texto, como esta frase, que alterna entre texto em itlico,
normal, e em negrito. Se voc tivesse apenas o elemento <text>, voc precisa experimentar para
descobrir onde cada segmento de estilo diferente do texto terminou, a fim de espa-los
adequadamente. Para resolver este problema, o SVG fornece a <tspan> ou elemento "span-texto".
Anlogo ao XHTML elemento <span>, <tspan> uma tbula rasa que pode ser embutida no contedo
de texto, e sobre a qual voc pode impor mudanas de estilo. O <tspan> memoriza a posio de texto,
para que voc no precise memoriz-la.

<text x="10" y="30" style="font-size:12pt;"> Switch among<tspan style="font-style:italic">italic</tspan>, normal,


and <tspan style="font-weight:bold">bold</tspan> text.
</text>

Alm de alterar as propriedades de apresentao como tamanho de fonte, cor, peso, etc., voc tambm
pode usar atributos com <tspan> para alterar o posicionamento das letras ou conjuntos individuais de
letras. Se, por exemplo, voc quer sobrescritos ou subscritos, voc pode usar o atributo "dy" para
compensar caracteres dentro de um intervalo. O valor que voc atribui a este atributo adicionado para
a posio vertical dos caracteres, e continua a afetar texto mesmo fora do vo.
Os valores negativos so permitidos. Um atributo semelhante, "dx", compensa caracteres na horizontal.

<text x="10" y="30" style="font-size:12pt;">F <tspan dy="4">a</tspan><tspan dy="8">l</tspan><tspan


dy="12">l</tspan>
</text>

Se voc deseja expressar os deslocamentos em termos absolutos, em vez de termos relativos, use os
atributos x e y. Isso til para fazer corridas com vrias linhas de texto. Na verdade, voc deve faz-lo
desta forma, uma vez que, como voc ver na Seo 8.9, o SVG no exibe caracteres de nova linha em
texto. (A falta de uma nova linha ser remediado em SVG 1.1.). Se o seu visualizador de SVG permite
seleo de texto, colocando vrias linhas em um nico elemento <text>, permitir a seleo para incluir
todas as linhas. Voc deve sempre usar <tspan> dentro de um elemento <text> para relacionar linhas de
um mesmo grupo, no s para permitir que elas sejam selecionadas como uma unidade, mas tambm
porque acrescentam estrutura para o seu documento.

<text x="10" y="30" style="font-size:12pt;">They dined on mince, and slices of quince,<tspan x="20"
y="50">Which they ate with a runcible spoon;</tspan><tspan x="10" y="70">And hand in hand, on the edge of the
sand,</tspan><tspan x="20" y="90">They danced by the light of the moon.</tspan>
</text>
Voc tambm pode girar uma letra ou srie de letras dentro de um <span> usando o atributo "rotao",
cujo valor um ngulo em graus. Se voc tem que modificar as posies de vrios caracteres, voc pode
faz-lo facilmente especificando uma srie de nmeros para qualquer um dos x, y, dx, dy, e rodar os
atributos. Os nmeros que voc especificou sero aplicados, um aps o outro, com os caracteres dentro
do <tspan>.
<text x="30" y="30" style="font-size:14pt">
<tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8">Shaken</tspan>
</text>
Embora a figura no mostre, os efeitos de dx e dy persistem aps o <tspan> terminar. Se mais texto
fosse colocado aps o fechamento do </ tspan>, seria nos mesmos deslocamentos que a letra "n". Ele
no iria voltar linha de base estabelecida pela primeira letra: "S".

Se voc tiver elementos <tspan> aninhados, os x, y, dx, dy, e valores de atributos girados no so
herdadas pelos elementos internos.

Embora voc possa usar o atributo dy para produzir sobrescrito e subscrito, mais fcil usar o estilo
"baseline-shift", como fizemos no prximo exemplo. Esta propriedade do estilo tem valores de "super" e
"sub". Voc tambm pode especificar um comprimento, como 0.5em, ou uma porcentagem, a qual
calculada em relao ao tamanho da fonte. Efeitos de deslocamento de linha de base restringem-se ao
perodo em que ocorrem.

<text x="20" y="25" style="font-size: 12pt;">


C<tspan style="baseline-shift: sub;">12</tspan>
H<tspan style="baseline-shift: sub;">22</tspan>
O<tspan style="baseline-shift: sub;">11</tspan> (accar)
</text>
<text x="20" y="70" style="font-size: 12pt;">
6.02 x 10<tspan baseline-shift="super">23</tspan>
(Nmero de Avogrado)
</text>

8.5 Definir textLength

Embora dissssemos que no h uma maneira priori para determinar o ponto final de um segmento de
texto, voc pode especificar explicitamente o comprimento do texto como o valor do atributo
"textLength". O SVG, ento, ajusta o texto para o espao dado. Ele ajustar o espao entre glifos,
deixando os glifos intocados, ou ele pode ajustar tanto o espaamento como o tamanho glifo. Se voc
quer ajustar um nico espao, defina o valor do "lengthAdjust" para "spacing" (este o padro). Se voc
quiser que o SVG ajuste as palavras para caber em um determinado comprimento, ajustando tanto o
tamanho do espaamento quanto do glifo, defina "lengthAdjust" para "spacingAndGlyphs".

<g style="font-size: 14pt;">


<path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"/>
<text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
<text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
<text x="20" y="90">Two words<tspan style="font-size: 10pt;">(normal length)</tspan></text>
<path d="M 20 100 20 170 M 100 100 100 170" style="stroke: gray;"/>
<text x="20" y="120" textLength="80" lengthAdjust="spacing">Two words</text>
<text x="20" y="160" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>
</g>

8.6 Texto Vertical

Quando voc usa SVG para criar grficos ou tabelas, muitas vezes voc vai querer rtulos escritos em
eixos verticais. Uma maneira de conseguir texto orientado verticalmente a utilizao de uma
transformao para rodar o texto 90 graus. Outra forma de conseguir o mesmo efeito alterando o valor
da propriedade de estilo "writing-mode" para o valor "tb" (ou seja, "top/bottom", de cima para baixo).

s vezes, porm, voc quer que as letras apaream em uma coluna vertical sem rotao. O exemplo
abaixo faz isso definindo a propriedade "glyph-orientation-vertical" com um valor de zero. (Seu valor
padro 90, que o que gira o texto 90 graus de cima para baixo.). Esta definio tende a exibir o
espaamento entre letras como anormalmente grande. A definio de um pequeno valor negativo para
"letter-spacing" resolve este problema.

<text x="10" y="20" transform="rotate(90,10,20)">Rotated 90</text>


<text x="50" y="20" style="writing-mode: tb;">Writing Mode tb</text>
<text x="90" y="20" style="writing-mode: tb; glyph-orientation-vertical: 0;">Vertical zero</text>
8.7 Internacionalizao e texto

8.7.1 Unicode e Bidirecionalidade

XML baseado no padro Unicode (devidamente documentados no website do Consrcio Unicode,


http://www.unicode.org). Isso permite exibio de texto em qualquer idioma que o software de
visualizao subjacente possa exibir. Alguns idiomas como rabe e hebraico so escritos da direita para a
esquerda, de modo que quando o texto nestas lnguas so misturados com texto escrito da esquerda para
a direita, como o Ingls, o texto bidirecional, ou bidi. O software do sistema sabe quais caracteres vo
em qual direo e trabalha as suas posies em conformidade. O exemplo abaixo substitui a implcita
direcionalidade de um segmento de texto, definindo sua propriedade de estilo "direction" como "RTL",
que significa (right to left) da direita para a esquerda. Se voc deseja mudar a direo do hebraico ou
texto em rabe, defina a "direction" como LTR, que (left to right)da esquerda para a direita. Voc
tambm deve substituir explicitamente o algoritmo de bidireccionalidade, definindo o estilo de
propriedade "unicode-bidi" para "bidi-override".

<g style="font-size: 14pt;">


<text x="10" y="30">Greek: </text>
<text x="100" y="30">&#x3b1;&#x3b2;&#x3b3;&#x3b4;&#x3b5;</text>
<text x="10" y="50">Russian:</text>
<text x="100" y="50">&#x430;&#x431;&#x432;&#x433;&#x434;</text>
<text x="10" y="70">Hebrew:</text>
<text x="100" y="70">&#x5d0;&#x5d1;&#x5d2;&#x5d3;&#x5d4; (written right to left)</text>
<text x="10" y="90">Arabic:</text>
<text x="100" y="90">&#x627;&#x628;&#x629;&#x62a; (written right to left)</text>
<text x="10" y="130">This is<tspan style="direction: rtl; unicode-bidi: bidi-override;font-weight:bold;">right-to-
left</tspan>text.</text>
</g>

8.7.2 O Elemento interruptor

A capacidade de exibir vrios idiomas em um nico documento til para coisas como um folheto para
um evento que recebe visitantes internacionais. s vezes, porm, voc gostaria de criar um documento
com contedo em dois idiomas, digamos, espanhol e Russo. As pessoas que vissem o documento com
software no sistema espanhol veriam o texto em espanhol, e os russos veriam o texto em russo.
O SVG oferece esse recurso com o elemento <switch>. Este elemento procura atravs de todos os seus
filhos at encontrar uma cujo atributo "systemLanguage" tem um valor que corresponda ao idioma que
o usurio tenha escolhido nas preferncias do software de visualizao.
O valor de "systemLanguage" um valor nico ou uma lista separada por vrgulas de nomes de idiomas.
Um nome de idioma ou um cdigo de duas letras do idioma, como "ru" para Russo, ou uma
linguagem de cdigo seguido de um cdigo de pas, que especifica uma sublinguagem. Por exemplo, fr-
CA denota franco-canadense, enquanto fr-CH denota franco-suo.
Uma vez que um elemento filho correspondente for encontrado, todos os seus filhos sero exibidos.
Todos os outros filhos do <switch> sero ignorados. O prximo exemplo mostra o texto em ingls
britnico, ingls americano, espanhol e russo. Uma vez que um jogo de cdigo de linguagem por si s
considerado um jogo, e cdigos de pases, so usados apenas para "quebrar um empate", o texto para o
ingls britnico deve vir primeiro.

<circle cx="40" cy="60" r="20" style="fill: none; stroke: black;"/>


<g font-size="12pt">
<switch>
<g systemLanguage="en-UK">
<text x="10" y="30">A circle</text>
<text x="10" y="100">without colour.</text>
</g>
<g systemLanguage="en">
<text x="10" y="30">A circle</text>
<text x="10" y="100">without color.</text>
</g>
<g systemLanguage="es">
<text x="10" y="30">Un c&#xed;rculo</text>
<text x="10" y="100">sin color.</text>
</g>
<g systemLanguage="ru">
<text x="10" y="30">
&#x41a;&#x440;&#x443;&#x433;
</text>
<text x="10" y="100">&#x431;&#x435;&#x437;
&#x441;&#x432;&#x435;&#x442;&#x430;.</text>
</g>
</switch>
</g>

8.7.3 Usando uma fonte personalizada

s vezes voc precisa de smbolos especiais que no so representados no Unicode, ou voc quer um
subconjunto de caracteres Unicode sem ter que instalar uma fonte inteira. Um exemplo a figura
abaixo, que precisa apenas de algumas das mais de 2.000 slabas coreanas. Voc pode criar uma fonte
personalizada, conforme descrito no Apndice E e dar a sua partida <font> marcando uma identificao
nica.
Aqui est a parte relevante de um arquivo que contm seis das slabas coreanas exportadas da fonte
TrueType Batang. O arquivo chamado kfont.svg:
<font id="kfont-defn" horiz-adv-x="989" vert-adv-y="1200" vert-origin-y="0">
<font-face font-family="bakbatn" units-per-em="1000" panose-1="2 3 6 0 0 1 1 1 1 1" ascent="800" descent="-
200" baseline="0" />
<missing-glyph horiz-adv-x="500" />
<!-- glyph definitions go here -->
</font-face>
</font>

Uma vez feito isto, voc pode fazer referncia a uma fonte em um arquivo externo. Por uma questo de
coerncia, o valor do "font-family" que voc usar neste arquivo SVG deve corresponder ao valor no
arquivo externo.

<defs>
<font-face font-family="bakbatn">
<font-face-src>
<font-face-uri xlink:href="kfont.svg#kfont-defn"/>
</font-face-src>
</font-face>
</defs>
<text font-size="28" x="20" y="40" style="font-family: bakbatn;">&#xc11c;&#xc6b8; -
&#xb300;&#xd55c;&#xbbfc;&#xad6d;</text>

8.8 texto em um caminho

O texto no tem que ir em uma linha horizontal ou vertical em linha reta. Pode seguir qualquer
caminho arbitrrio; simplesmente coloque o texto em um elemento <textPath> que usa um atributo
"xlink: href" para se referir a um elemento <path> anteriormente definido.
Os caracteres sero girados para ficarem "Perpendicular" a curva (isto , a linha de base das letras ser
tangente curva).
Texto ao longo de um caminho suavemente curvo e contnuo mais fcil de ler do que o texto que
segue um caminho acentuadamente inclinado ou descontnuo.

O caminho referenciado no elemento <textPath> no ser exibido. por isso que os caminhos so
desenhados com o elemento <use>.

<defs>
<path id="curvepath" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40" style="stroke: gray; fill: none;"/>
<path id="round-corner" d="M250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" style="stroke: gray; fill: none;"/>
<path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke: gray; fill: none;"/>
<path id="discontinuous" d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" style="stroke: gray; fill:
none;"/>
</defs>
<use xlink:href="#curvepath"/>
<text style="font-size: 12;">
<textPath xlink:href="#curvepath">Following a cubic Bzier curve.</textPath>
</text>
<use xlink:href="#round-corner"/>
<text style="font-size: 12;">
<textPath xlink:href="#round-corner">Going 'round the bend</textPath>
</text>
<use xlink:href="#sharp-corner"/>
<text style="font-size: 12;">
<textPath xlink:href="#sharp-corner">Making a quick turn</textPath>
</text>
<use xlink:href="#discontinuous"/>
<text style="font-size: 12;">
<textPath xlink:href="#discontinuous">Text along a broken path</textPath>
</text>

Voc pode ajustar o ponto de incio do texto ao longo de seu caminho, definindo para o atributo
"startOffset" uma porcentagem ou um comprimento. Por exemplo, startOffset = "25%" ir iniciar o
texto a um quarto da distncia do caminho, e startOffset = "30" vai comear o texto a uma distncia de
trinta unidades de utilizador a partir do incio do caminho. Se voc deseja centralizar o texto em um
caminho, defina o "text-anchor" como "middle" no elemento <text> e "startOffset" como "50%" no
elemento <textPath>. O texto que cai para alm das extremidades do caminho no ser exibido.

<defs>
<path id="short-corner" transform="translate(40,40)" d="M0 0 L 30 0 A 30 30 0 0 1 60 30 L 60 60" style="stroke:
gray; fill: none;"/>
<path id="long-corner" transform="translate(140,40)" d="M0 0 L 50 0 A 30 30 0 0 1 80 30 L 80 80" style="stroke:
gray; fill: none;"/>
</defs>
<use xlink:href="#short-corner"/>
<text style="font-size: 12;">
<textPath xlink:href="#short-corner">This text is too long for the path.</textPath>
</text>
<use xlink:href="#long-corner"/>
<text style="font-size: 12; text-anchor: middle;">
<textPath xlink:href="#long-corner" startOffset="50%">centered</textPath>
</text>
8.9 Espaos em branco e texto

Voc pode mudar a maneira que o SVG lida com espaos em branco (espaos em branco, tabulaes, e
de nova linha, so caracteres) dentro do texto, alterando o valor do atributo "xml: space". Se voc
especificar um valor "default" (que, coincidentemente, o valor padro), o SVG ir lidar com os espaos
em branco como se segue:
Remove todos os caracteres de nova linha
Altera todas as guias para espaos em branco
Remove todos os espaos em branco esquerda e direita
Altera qualquer execuo de espaos em branco intermedirios a um nico espao em branco. Assim,
esta cadeia, onde "\t" representa uma guia e "\n" representa uma nova linha, e um sublinhado representa
um "blank", este texto:
\n\n___abc_\t\t_def_\n\n__ghi
Ser renderizado como:
abc_def_ghi

A outra configurao de "xml: space" "preserve". Com esta definio, o SVG vai simplesmente
converter todos as novas linhas e caracteres de tabulao para espaos em branco, e, em seguida, exibir o
resultado, incluindo o lder e espaos em branco. O mesmo texto:
\n\n___abc_\t\t_def_\n\n__ghi
Ser renderizado como:
_____abc____def_____ghi

A manipulao SVG de espaos em branco no como o de HTML. O tratamento padro SVG


elimina todas as novas linhas; O HTML muda novas linhas internas para espao. O mtodo "preserve"
do SVG converte novas linhas em espaos em branco; No elemento HTML <pre> no h nenhuma
nova linha em SVG 1,0; isso incomoda as pessoas at que elas percebam que o texto SVG orientado
para a exibio grfica, e no para o contedo textual (como no XHTML).

8.10 Estudo de Caso - Adicionando texto a um grfico

A figura abaixo acrescenta texto coreano e ingls para o smbolo nacional da Coria. O texto centrado
ao longo de uma trajetria elptica. A SVG adicional mostrada em negrito.

<defs>
<font-face font-family="bakbatn">
<font-face-src>
<font-face-uri xlink:href="kfont.svg#kfont-defn" />
</font-face-src>
</font-face>
<path id="upper-curve" d="M -8 154 A 162 130 0 1 1 316 154" />
<path id="lower-curve" d="M -21 154 A 175 140 0 1 0 329 154" />
</defs>
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/>
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/>
<!-- O grande semicrculo de luz vermelha enche a metade superior, seguido de pequeno semicrculo de luz vermelha
que mergulha na metade inferior esquerda do smbolo -->
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152 A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/>
<!-- a luz semi-crculo azul sobe para a metade superior direita do smbolo-->
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>
<text font-family="bakbatn" style="font-size: 28; text-anchor: middle;">
<textPath xlink:href="#upper-curve" startOffset="50%">&#xc11c;&#xc6b8; -
&#xb300;&#xd55c;&#xbbfc;&#xad6d;</textPath>
</text>
<text style="font-size: 14pt; text-anchor: middle;">
<textPath xlink:href="#lower-curve" startOffset="50%">Seoul - Republic of Korea</textPath>
</text>

You might also like