SVG - Guía rápida

¿Qué es SVG?

SVG, Scalable Vector Graphics es un lenguaje basado en XML para definir gráficos basados en vectores.
SVG está diseñado para mostrar imágenes en la web.
Al ser imágenes vectoriales, la imagen SVG nunca pierde calidad, sin importar cómo se reduzcan o redimensionen.
Las imágenes SVG admiten interactividad y animación.
SVG es un estándar W3C.
Otros formatos de imagen, como las imágenes rasterizadas, también se pueden combinar con imágenes SVG.
SVG se integra bien con XSLT y DOM de HTML.

Ventajas

Utilice cualquier editor de texto para crear y editar imágenes SVG.
Al estar basadas en XML, las imágenes SVG se pueden buscar, indexar y se pueden escribir y comprimir.
Las imágenes SVG son altamente escalables, ya que nunca pierden calidad, sin importar cómo se reduzcan o redimensionen
Buena calidad de impresión en cualquier resolución
SVG es un estándar abierto

Desventajas

El tamaño del formato de texto es mayor que el de las imágenes ráster con formato binario.
El tamaño puede ser grande incluso para imágenes pequeñas.

Ejemplo

El siguiente fragmento XML se puede utilizar para dibujar un círculo en el navegador web.

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

Incruste el XML SVG directamente en una 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>

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. En Internet Explorer, se requieren controles ActiveX para ver imágenes SVG.

Cómo se integra SVG con HTML

El elemento <svg> indica el inicio de la imagen SVG.
Los atributos de ancho y alto del elemento <svg> definen el alto y el ancho de la imagen SVG.
En el ejemplo anterior, usamos un elemento <circle> para dibujar un círculo.
El atributo cx y cy representa el centro del círculo. El valor predeterminado es (0,0). El atributo r representa el radio del círculo.
Otros atributos de trazo y ancho de trazo controlan el contorno del círculo.
El atributo de relleno define el color de relleno del círculo.
Cerrar la etiqueta </svg> indica el final de la imagen SVG.

SVG proporciona varias formas que se pueden utilizar para dibujar imágenes. A continuación se muestran las formas comunes.

No Señor.	Tipo de forma y descripción
1	rect Se usa para dibujar un rectángulo.
2	circulo Se usa para dibujar un círculo.
3	elipse Se usa para dibujar una elipse.
4	línea Se usa para trazar una línea.
5	polígono Se utiliza para dibujar una forma cerrada que consta de líneas rectas conectadas.
6	polilínea Se utiliza para dibujar una forma abierta que consta de líneas rectas conectadas.
7	camino Se usa para trazar cualquier camino.

El elemento <text> se usa para dibujar texto.

Declaración

A continuación se muestra la declaración de sintaxis de <text>elemento. Solo mostramos los atributos principales.

<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

No Señor.	Atributo y descripción
1	x - coordenadas del eje x de los glifos.
2	y - coordenadas del eje y de los glifos.
3	dx - desplazamiento junto con el eje x.
4	dy - desplazarse junto con el eje y.
5	rotate - rotación aplicada a todos los glifos.
6	textlength - longitud de la representación del texto.
7	lengthAdjust - tipo de ajuste con la longitud renderizada del texto.

Ejemplo

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>

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.

Texto con rotar

<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>

Salida

Texto de varias líneas

<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>

Salida

Texto de hipervínculo

<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>

Salida

SVG admite múltiples propiedades de trazo.

A continuación se muestran las principales propiedades de trazo utilizadas.

No Señor.	Tipo de carrera y descripción
1	stroke - define el color del texto, línea o contorno de cualquier elemento.
2	stroke-width - define el grosor del texto, la línea o el contorno de cualquier elemento.
3	stroke-linecap - define diferentes tipos de finalización de una línea o contorno de cualquier camino.
4	stroke-dasharray - utilizado para crear líneas discontinuas.

Ejemplo

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>

Salida

Anchura del trazo

<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>

Salida

trazo-linecap

<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>

Salida

trazo-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>

Salida

SVG usa el elemento <filter> para definir filtros. El elemento <filter> utiliza un atributo id para identificarlo de forma única. Los filtros se definen dentro de los elementos <def> y luego los elementos gráficos hacen referencia a ellos mediante sus ID.

SVG proporciona un amplio conjunto de filtros. A continuación se muestra la lista de los filtros más utilizados.

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

Declaración

A continuación se muestra la declaración de sintaxis de <filter>elemento. Solo mostramos los atributos principales.

<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

No Señor.	Nombre y descripción
1	filterUnits- unidades para definir la región del efecto de filtro. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del filtro y para los atributos que definen la subregión del filtro. Si filterUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'filtro'. Si filterUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'filtro'. El valor predeterminado es userSpaceOnUse.
2	primitiveUnits- unidades para definir la región del efecto de filtro. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del filtro y para los atributos que definen la subregión del filtro. Si filterUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'filtro'. Si filterUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'filtro'. El valor predeterminado es userSpaceOnUse.
3	x- Coordenada del eje x del cuadro delimitador del filtro. Defeault es 0.
4	y- Coordenada del eje Y del cuadro delimitador del filtro. El valor predeterminado es 0.
5	width- ancho del cuadro delimitador del filtro. El valor predeterminado es 0.
6	height- altura del cuadro delimitador del filtro. El valor predeterminado es 0.
7	filterRes - números que representan las regiones de filtro.
8	xlink:href - utilizado para referirse a otro filtro.

Ejemplo

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>

Dos elementos <filter> definidos como filter1 y filter2.
El efecto de filtro feGaussianBlur define el efecto de desenfoque con la cantidad de desenfoque usando stdDeviation.
in = "SourceGraphic" define que el efecto es aplicable para todo el elemento.
El efecto de filtro feOffset se utiliza para crear un efecto de sombra. in = "SourceAlpha" define que el efecto es aplicable para la parte alfa de los gráficos RGBA.
Los elementos <rect> vincularon los filtros usando el atributo de filtro.

Salida

Filtro con efecto 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>

Salida

SVG usa el elemento <pattern> para definir patrones. Los patrones se definen utilizando el elemento <pattern> y se utilizan para rellenar elementos gráficos en mosaico.

Declaración

A continuación se muestra la declaración de sintaxis de <pattern>elemento. Solo mostramos los atributos principales.

<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

No Señor.	Nombre y descripción
1	patternUnits- unidades para definir patrones de efecto región. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del patrón y para los atributos que definen la subregión del patrón. Si patternUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'patrón'. Si patternUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'patrón'. El valor predeterminado es userSpaceOnUse.
2	patternContentUnits- unidades para definir la región de contenido del patrón. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del patrón y para los atributos que definen la subregión del patrón. Si patternContentUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se utiliza el elemento 'patrón'. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'patrón'. El valor predeterminado es userSpaceOnUse.
3	x- Coordenada del eje x del cuadro delimitador del patrón. Defeault es 0.
4	y- Coordenada del eje Y del cuadro delimitador del patrón. El valor predeterminado es 0.
5	width- ancho del cuadro delimitador del patrón. El valor predeterminado es 0.
6	height- altura del cuadro delimitador del patrón. El valor predeterminado es 0.
7	preserveAspectRatio - para preservar la relación ancho / alto del contenido original.
8	xlink:href - utilizado para referirse a otro patrón.

Ejemplo

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>

Un elemento <pattern> definido como pattern1.
En el patrón, se define un cuadro de visualización y se define una ruta que se utilizará como patrón.
en el elemento rect, en el atributo de relleno, se especifica la URL del patrón para llenar el rectángulo con el patrón creado anteriormente.

Salida

El degradado se refiere a la transición suave de un color a otro dentro de una forma. SVG proporciona dos tipos de degradados.

Linear Gradients - Representa la transición lineal de un color a otro de una dirección a otra.
Radial Gradients - Representa la transición circular de un color a otro de una dirección a otra.

Degradados lineales

Declaración

A continuación se muestra la declaración de sintaxis de <linearGradient>elemento. Solo mostramos los atributos principales.

<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

No Señor.	Nombre y descripción
1	gradientUnits- unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del gradiente. Si gradientUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se utiliza el elemento de degradado. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento de degradado. El valor predeterminado es userSpaceOnUse.
2	x1- Coordenada del eje x del vector de gradiente. Defeault es 0.
3	y1- Coordenada del eje y del vector de gradiente. El valor predeterminado es 0.
4	x2- Coordenada del eje x del vector de gradiente. Defeault es 0.
5	y2- Coordenada del eje y del vector de gradiente. El valor predeterminado es 0.
6	spreadMethod- indica el método de dispersión del degradado dentro del elemento gráfico. El valor predeterminado es 'pad'.
7	xlink:href - usado para referirse a otro gradiente.

Ejemplo

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>

Un elemento <linearGradient> definido como sampleGradient.
En linearGradient, se definen dos desplazamientos con dos colores.
en el elemento rect, en el atributo de relleno, la URL del degradado se especifica para rellenar el rectángulo con el degradado creado anteriormente.

Salida

Gradientes radiales

Declaración

A continuación se muestra la declaración de sintaxis de <radialGradient>elemento. Solo mostramos los atributos principales.

<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

No Señor.	Nombre y descripción
1	gradientUnits- unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del gradiente. Si gradientUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se utiliza el elemento de degradado. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento de degradado. El valor predeterminado es userSpaceOnUse.
2	cx- Coordenada del eje x del centro del círculo más grande del vector de gradiente. Defeault es 0.
3	cy- Coordenada del eje y del centro del círculo más grande del vector de gradiente. El valor predeterminado es 0.
4	r- radio del centro del círculo más grande del vector de gradiente. Defeault es 0.
5	fx- punto focal de gradiente radial. El valor predeterminado es 0.
6	fy- punto focal de gradiente radial. El valor predeterminado es 0.
7	spreadMethod- indica el método de dispersión del degradado dentro del elemento gráfico. El valor predeterminado es 'pad'.
8	xlink:href - usado para referirse a otro gradiente.

Ejemplo

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>

Un elemento <radialGradient> definido como sampleGradient.
En radialGradient, se definen dos desplazamientos con dos colores.
en el elemento rect, en el atributo de relleno, la URL del degradado se especifica para rellenar el rectángulo con el degradado creado anteriormente.

Salida

Las imágenes SVG pueden adaptarse a las acciones del usuario. SVG admite eventos de puntero, eventos de teclado y eventos de documentos. Considere el siguiente ejemplo.

Ejemplo

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>

Explicacion

SVG admite funciones JavaScript / ECMAScript. El bloque de secuencia de comandos debe estar en el bloque CDATA, considere el soporte de datos de caracteres en XML.
Los elementos SVG admiten eventos de mouse, eventos de teclado. Hemos utilizado el evento onClick para llamar a funciones de JavaScript.
En las funciones de JavaScript, el documento representa un documento SVG y se puede utilizar para obtener los elementos SVG.
En las funciones de JavaScript, el evento representa el evento actual y se puede usar para obtener el elemento de destino en el que se generó el evento.

Salida

El elemento <a> se utiliza para crear un hipervínculo. El atributo "xlink: href" se utiliza para pasar el IRI (identificadores de recursos internacionalizados) que es complementario a URI (identificadores uniformes de recursos).

Declaración

A continuación se muestra la declaración de sintaxis de <a>elemento. Solo mostramos los atributos principales.

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

Atributos

No Señor.	Nombre y descripción
1	xlink:show- con fines de documentación para procesadores compatibles con XLink. El valor predeterminado es nuevo.
2	xlink:actuate - con fines de documentación para procesadores compatibles con XLink.
3	xlink:href - ubicación del objeto referenciado.
4	target - se utiliza cuando son posibles los objetivos para el recurso final.

Ejemplo

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>

Salida

↰ Previous page