SVG - Guia rápido

O que é SVG?

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

Vantagens

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

Desvantagens

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

Exemplo

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

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

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

testSVG.htm

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

Resultado

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

Como o SVG se integra ao HTML

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

O SVG fornece várias formas que podem ser usadas para desenhar imagens. A seguir estão as formas comuns.

Sr. Não.	Tipo e descrição da forma
1	rect Usado para desenhar um retângulo.
2	círculo Usado para desenhar um círculo.
3	elipse Usado para desenhar uma elipse.
4	linha Usado para traçar uma linha.
5	polígono Usado para desenhar uma forma fechada que consiste em linhas retas conectadas.
6	polilinha Usado para desenhar uma forma aberta que consiste em linhas retas conectadas.
7	caminho Usado para desenhar qualquer caminho.

O elemento <text> é usado para desenhar texto.

Declaração

A seguir está a declaração de sintaxe de <text>elemento. Mostramos apenas os atributos principais.

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Atributos

Sr. Não.	Atributo e descrição
1	x - coordenadas do eixo x de glifos.
2	y - coordenadas do eixo y dos glifos.
3	dx - deslocar junto com o eixo x.
4	dy - deslocar junto com o eixo y.
5	rotate - rotação aplicada a todos os glifos.
6	textlength - comprimento de renderização do texto.
7	lengthAdjust - tipo de ajuste com o comprimento renderizado do texto.

Exemplo

testSVG.htm

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente sem qualquer plugin. O Internet Explorer 9 e superior também oferece suporte à renderização de imagens SVG.

Texto com rotação

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Resultado

Texto Multilinha

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

Resultado

Texto do hiperlink

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Resultado

SVG oferece suporte a várias propriedades de traços.

A seguir estão as principais propriedades do traço usadas.

Sr. Não.	Tipo e descrição do curso
1	stroke - define a cor do texto, linha ou contorno de qualquer elemento.
2	stroke-width - define a espessura do texto, linha ou contorno de qualquer elemento.
3	stroke-linecap - define diferentes tipos de finalização de uma linha ou contorno de qualquer caminho.
4	stroke-dasharray - usado para criar linhas tracejadas.

Exemplo

testSVG.htm

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Resultado

Largura do traçado

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Resultado

capa de linha de traço

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Resultado

traço-dasharray

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Resultado

SVG usa o elemento <filter> para definir filtros. O elemento <filter> usa um atributo id para identificá-lo exclusivamente. Os filtros são definidos dentro dos elementos <def> e, a seguir, são referenciados por elementos gráficos por seus ids.

O SVG fornece um rico conjunto de filtros. A seguir está a lista dos filtros comumente usados.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filtro para sombras projetadas
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Declaração

A seguir está a declaração de sintaxe de <filter>elemento. Mostramos apenas os atributos principais.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Atributos

Sr. Não.	Nome e Descrição
1	filterUnits- unidades para definir a região do efeito do filtro. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do filtro e para os atributos que definem a sub-região do filtro. Se filterUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual em vigor no momento em que o elemento 'filtro' é usado. Se filterUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'filtro' é usado. O padrão é userSpaceOnUse.
2	primitiveUnits- unidades para definir a região do efeito do filtro. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do filtro e para os atributos que definem a sub-região do filtro. Se filterUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual em vigor no momento em que o elemento 'filtro' é usado. Se filterUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'filtro' é usado. O padrão é userSpaceOnUse.
3	x- coordenada do eixo x da caixa delimitadora do filtro. Defeault é 0.
4	y- coordenada do eixo y da caixa delimitadora do filtro. O padrão é 0.
5	width- largura da caixa delimitadora do filtro. O padrão é 0.
6	height- altura da caixa delimitadora do filtro. O padrão é 0.
7	filterRes - números que representam regiões de filtro.
8	xlink:href - usado para se referir a outro filtro.

Exemplo

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Dois elementos <filter> definidos como filter1 e filter2.
O efeito de filtro feGaussianBlur define o efeito de desfoque com a quantidade de desfoque usando stdDeviation.
in = "SourceGraphic" define que o efeito é aplicável a todo o elemento.
O efeito de filtro feOffset é usado para criar o efeito de sombra. in = "SourceAlpha" define que o efeito é aplicável para a parte alfa dos gráficos RGBA.
Os elementos <rect> vinculam os filtros usando o atributo filter.

Resultado

Filtro com efeito de sombra

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Resultado

SVG usa o elemento <pattern> para definir padrões. Os padrões são definidos usando o elemento <pattern> e são usados para preencher os elementos gráficos de forma ladrilhada.

Declaração

A seguir está a declaração de sintaxe de <pattern>elemento. Mostramos apenas os atributos principais.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Atributos

Sr. Não.	Nome e Descrição
1	patternUnits- unidades para definir a região do efeito dos padrões. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do padrão e para os atributos que definem a sub-região do padrão. Se patternUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento 'padrão' é usado. Se patternUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'padrão' é usado. O padrão é userSpaceOnUse.
2	patternContentUnits- unidades para definir a região de conteúdo do padrão. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do padrão e para os atributos que definem a sub-região do padrão. Se patternContentUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento 'padrão' é usado. Se patternContentUnits = "objectBoundingBox", os valores representam valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'padrão' é usado. O padrão é userSpaceOnUse.
3	x- coordenada do eixo x da caixa delimitadora do padrão. Defeault é 0.
4	y- coordenada do eixo y da caixa delimitadora do padrão. O padrão é 0.
5	width- largura da caixa delimitadora do padrão. O padrão é 0.
6	height- altura da caixa delimitadora do padrão. O padrão é 0.
7	preserveAspectRatio - para preservar a proporção largura / altura do conteúdo original.
8	xlink:href - usado para se referir a outro padrão.

Exemplo

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Um elemento <pattern> definido como pattern1.
No padrão, uma caixa de visualização é definida e um caminho que deve ser usado como padrão é definido.
no elemento ret, no atributo de preenchimento, o url do padrão é especificado para preencher o retângulo com o padrão criado anteriormente.

Resultado

O gradiente se refere à transição suave de uma cor para outra dentro de uma forma. O SVG oferece dois tipos de gradientes.

Linear Gradients - Representa a transição linear de uma cor para outra de uma direção para outra.
Radial Gradients - Representa a transição circular de uma cor para outra de uma direção para outra.

Gradientes Lineares

Declaração

A seguir está a declaração de sintaxe de <linearGradient>elemento. Mostramos apenas os atributos principais.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Atributos

Sr. Não.	Nome e Descrição
1	gradientUnits- unidades para definir o sistema de coordenadas para os vários valores de comprimento dentro do gradiente. Se gradienteUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento gradiente é usado. Se patternContentUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no lugar no momento em que o elemento gradiente é usado. O padrão é userSpaceOnUse.
2	x1- coordenada do eixo x do vetor gradiente. Defeault é 0.
3	y1- coordenada do eixo y do vetor gradiente. O padrão é 0.
4	x2- coordenada do eixo x do vetor gradiente. Defeault é 0.
5	y2- coordenada do eixo y do vetor gradiente. O padrão é 0.
6	spreadMethod- indica o método de espalhar o gradiente no elemento gráfico. O padrão é 'pad'.
7	xlink:href - usado para se referir a outro gradiente.

Exemplo

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

Um elemento <linearGradient> definido como sampleGradient.
Em linearGradient, dois deslocamentos são definidos com duas cores.
no elemento ret, no atributo de preenchimento, a url do gradiente é especificada para preencher o retângulo com o gradiente criado anteriormente.

Resultado

Gradientes Radiais

Declaração

A seguir está a declaração de sintaxe de <radialGradient>elemento. Mostramos apenas os atributos principais.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Atributos

Sr. Não.	Nome e Descrição
1	gradientUnits- unidades para definir o sistema de coordenadas para os vários valores de comprimento dentro do gradiente. Se gradienteUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento gradiente é usado. Se patternContentUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no lugar no momento em que o elemento gradiente é usado. O padrão é userSpaceOnUse.
2	cx- coordenada do eixo x do centro do maior círculo do vetor gradiente. Defeault é 0.
3	cy- coordenada do eixo y do centro do maior círculo do vetor gradiente. O padrão é 0.
4	r- raio do centro do maior círculo do vetor gradiente. Defeault é 0.
5	fx- ponto focal do gradiente radial. O padrão é 0.
6	fy- ponto focal do gradiente radial. O padrão é 0.
7	spreadMethod- indica o método de espalhar o gradiente no elemento gráfico. O padrão é 'pad'.
8	xlink:href - usado para se referir a outro gradiente.

Exemplo

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

Um elemento <radialGradient> definido como sampleGradient.
Em radialGradient, dois deslocamentos são definidos com duas cores.
no elemento ret, no atributo de preenchimento, a url do gradiente é especificada para preencher o retângulo com o gradiente criado anteriormente.

Resultado

As imagens SVG podem ser responsivas às ações do usuário. SVG oferece suporte a eventos de ponteiro, eventos de teclado e eventos de documento. Considere o seguinte exemplo.

Exemplo

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Explicação

SVG suporta funções JavaScript / ECMAScript. O bloco de script deve estar no bloco CDATA, considere o suporte de dados de caracteres em XML.
Os elementos SVG suportam eventos de mouse, eventos de teclado. Usamos o evento onClick para chamar funções javascript.
Em funções javascript, document representa o documento SVG e pode ser usado para obter os elementos SVG.
Em funções javascript, evento representa o evento atual e pode ser usado para obter o elemento de destino no qual o evento foi gerado.

Resultado

O elemento <a> é usado para criar um hiperlink. O atributo "xlink: href" é usado para passar os IRI (Identificadores de Recursos Internacionalizados) que são complementares aos URI (Identificadores Uniformes de Recursos).

Declaração

A seguir está a declaração de sintaxe de <a>elemento. Mostramos apenas os atributos principais.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Atributos

Sr. Não.	Nome e Descrição
1	xlink:show- para fins de documentação para processadores compatíveis com XLink. O padrão é novo.
2	xlink:actuate - para fins de documentação para processadores compatíveis com XLink.
3	xlink:href - localização do objeto referenciado.
4	target - usado quando alvos para o recurso final são possíveis.

Exemplo

testSVG.htm

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Resultado