Enlaces SVG - Enlaces que Google Bot No Sigue

Al igual que (X) HTML, SVG admite la vinculación a contenido dentro del documento de recursos externos, por ejemplo, otros documentos SVG, documentos HTML o XML, imágenes, videos o cualquier otro tipo de recurso típico al que desee enlazar. Este tutorial le guiará a través de cómo crear enlaces en SVG usando XLink -la especificación W3C para vincular en XML- y cubrir cualquier preocupación específica relacionada con SVG que usted necesita saber.

Si no está familiarizado con el elemento a o el atributo href en HTML, recomiendo leer los enlaces HTML de Christian Heilmann, ¡construyamos una web! Artículo antes de comenzar. También se recomienda que lea mi artículo para familiarizarse con los conceptos básicos de SVG, si no está familiarizado.

Nota: XML no admite la vinculación de forma predeterminada, por lo que la situación es un poco más compleja que los enlaces HTML. Pero no se desespere – XLink todavía no es tan complicado para conseguir la caída de; Después de leer este artículo debe presentarle sin problemas.

Introducción a los enlaces SVG

En HTML simplemente puedo configurar un enlace de un documento a otro usando un elemento a y un atributo href así:

<Code> <a href=”https://example.com/link/”> Un enlace de ejemplo </a> </ code>
El elemento a está contenido en el documento de enlace (el recurso local) y el atributo href apunta al documento o recurso al que deseo enlazar (el recurso remoto). Todo muy sencillo.

En XML y por lo tanto SVG, no hay ningún atributo href mágico que pueda crear enlaces. En su lugar, tiene que utilizar una tecnología llamada XLink para proporcionar esta funcionalidad. XLink es una tecnología muy potente que proporciona una gran cantidad de funcionalidades complejas, como enlaces uno a muchos, pero para SVG sólo tenemos que preocuparnos por enlaces sencillos uno a uno, ya que es todo lo que se admite en SVG especificación.

Configuración del espacio de nombres XLink
Ya has cumplido los espacios de nombres XML al definir una plantilla SVG. Por lo general, un documento SVG utiliza el espacio de nombres predeterminado de la siguiente manera:

<Code> <svg ” ‘xmlns = “https://www.w3.org/2000/svg”‘ ” version = “1.1”>
… el contenido va aquí …
</ Svg> </ code>

Debido a que el espacio de nombres por defecto es ocupado por SVG, si quieres definir el espacio de nombres XLink en el elemento SVG, debes darle un prefijo, que por convención general es xlink (aunque puede ser cualquier cosa que quieras). Permite agregar el espacio de nombres XLink a nuestro elemento svg:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” ” ‘xmlns: xlink = “https://www.w3.org/1999/xlink”‘ ” version = ” 1,1 “>
… el contenido va aquí …
</ Svg> </ code>
Como se puede ver, el prefijo xlink se define utilizando el atributo xmlns, dos puntos (:) y el prefijo deseado. El valor se establece a continuación en el espacio de nombres XLink estándar.

Ahora el espacio de nombres XLink está configurado, cada vez que desee hacer referencia a un elemento o atributo XLink en el elemento svg o cualquiera de sus hijos, debe usarlo en combinación con el prefijo xlink. La mejor manera de explicar esto es con un ejemplo, así que vamos a empezar a configurar un enlace similar al enlace HTML anterior.

Un simple enlace SVG con XLink

A continuación, necesitamos usar el elemento SVG en nuestro documento para definir un enlace y el elemento de texto para definir el texto del enlace:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” xmlns: xlink = “https://www.w3.org/1999/xlink” version = “1.1”>
” ‘<a>
<Text x = “10” y = “25”> Un enlace de ejemplo. </ Text>
</a> ” ‘
</ Svg> </ code>
Ahora tenemos que agregar el atributo XLink href al elemento a para especificar el destino del enlace, así:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” xmlns: xlink = “https://www.w3.org/1999/xlink” version = “1.1”>
<a <strong> xlink: href = “https://example.com/link/” </ strong>
<Text x = “10” y = “25”> Un enlace de ejemplo. </ Text>
</a>
</ Svg> </ code>
El espacio de nombres xlink se agrega antes del nombre del atributo, usando dos puntos para separar el prefijo del atributo.

Nota: Es posible definir el tipo de enlace que está utilizando como enlace simple usando xlink: type = “simple” en el elemento a, pero esto es opcional y los enlaces simples son el único tipo de enlaces XLink que son válidos en SVG de todas formas.

Usando el elemento a en SVG no automáticamente el estilo de enlace como lo hace en HTML, por lo que puede que desee añadir un poco de estilo al texto, como se ve en el terminado.

Una cosa que vale la pena recordar es que para establecer el color del texto en SVG debe usar la propiedad CSS de relleno o el atributo XML, no el color como en HTML. El texto también debe estar contenido en un elemento de texto anidado dentro del enlace, a diferencia de HTML donde un elemento a puede contener texto inmediatamente entre sus etiquetas de inicio y de fin.

Agregar funcionalidad adicional a los vínculos

Puede recordar que los vínculos HTML pueden tener un atributo de título para describir detalles adicionales sobre el vínculo. Esto también está disponible con XLink en SVG:

<Code> <a xlink:href= “https://example.com/link/””’xlink:title=”El enlace lleva a una página de ejemplo que es de poco interés””’>
<Text x = “10” y = “25”> Un enlace de ejemplo. </ Text>
</a> </ code>
Si intenta mi ejemplo, verá que una sugerencia aparecerá cuando pase el cursor sobre el enlace.

Después de un enlace predeterminado, se abre el recurso enlazado en la misma ventana o ficha. Puede cambiar este comportamiento utilizando el atributo XLink show. El uso de un valor de reemplazar especifica el comportamiento predeterminado, mientras que el cambio a nuevo abrirá el vínculo en una nueva ventana o pestaña.

Xlink: href = “https://example.com/link/” xlink: title = “El enlace abre una página de ejemplo en una nueva pestaña / ventana ” ‘xlink: show =” new “‘ ”>
<Text x = “10” y = “25”> Un enlace de ejemplo. </ Text>
</a> </ code>

Vinculación a un punto específico de un documento

También como HTML, es posible enlazar a un punto específico de un documento (tanto en documentos locales como remotos) especificando un identificador en el elemento al que desea vincular y agregando un identificador de fragmento al enlace. Esto se puede lograr casi exactamente de la misma manera que con HTML:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” xmlns: xlink = “https://www.w3.org/1999/xlink” version = “1.1”>
<a “‘xlink:href=”https://www.someurl.com#someid””’>
<Text x = “10” y = “25”> Un enlace de ejemplo. </ Text>
</a>
</ Svg> </ code>
También puede vincular a una parte específica de un documento SVG, utilizando el identificador de fragmentos combinado con el elemento view. Esto puede ser útil para definir un área del archivo SVG que desea ampliar o reducir cuando el usuario hace clic en un vínculo o un botón.

El identificador de fragmento funciona exactamente de la misma manera que el ejemplo anterior, mientras que el elemento de vista se utiliza para especificar el tamaño de la ventana de visualización después de que se haya seguido la URL. Mostraré esto con otro ejemplo:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” xmlns: xlink = “https://www.w3.org/1999/xlink” version = “1.1” width = “100 % “Height =” 100% “>
<a xlink:href=”#target”>
<Text x = “10” y = “25”> Ampliar la forma debajo </ text>
</a>

” ‘<View id = “target” viewBox = “600 600 50 50” />
<Rect x = “600” y = “600” width = “50” height = “50” /> ” ‘
</ Svg> </ code>

El elemento view requiere al menos dos atributos, el id para que el identificador del fragmento pueda apuntar a él y el viewBox. El atributo viewBox establece el tamaño de la ventana gráfica con cuatro valores, Coordenada mínima x, Coordenada mínima y ancho y altura. Cuando se sigue el enlace, el navegador establecerá la ventana gráfica en las coordenadas y el ancho y la altura especificados en el elemento de vista correspondiente. Detrás de las escenas, el navegador aplica automáticamente transiciones y escalado para que el contenido se ajuste correctamente en el cuadro de vista.

Con el ejemplo anterior, puede observar que el rectángulo no llena la ventana del explorador. Esto se debe a que por defecto, conserva la relación de aspecto de los elementos. Hay una manera de definir este comportamiento utilizando el atributo preserveAspectRatio. Voy a cubrir esto en un artículo posterior, pero si sólo desea ignorar la relación de aspecto, puede establecer el valor a ninguno como así:

Incorporación de recursos externos en un documento SVG

Además de enlazar documentos separados, es posible incorporar recursos como imágenes en un documento SVG de una manera muy similar, utilizando de nuevo el atributo XLink href. Las imágenes pueden ser imágenes ráster como PNGs y JPEGS, u otro archivo SVG:

<Code> <svg xmlns = “https://www.w3.org/2000/svg” xmlns: xlink = “https://www.w3.org/1999/xlink” version = “1.1”>
” <Image xlink: href = “circle.png” x = “10” y = “25” height = “100” width = “100”>
<Desc> Un círculo perfecto </ desc>
</ Image> ” ‘
</ Svg> </ code>

El elemento desc proporciona un medio para proporcionar texto alternativo, de la misma manera que lo hace el atributo HTML alt. Esto será útil una vez que los lectores de pantalla comiencen a soportar SVG.

Prueba mi ejemplo.

La incrustación de una imagen SVG funciona exactamente de la misma manera:

Xlink: href = “circle.svg” ” ‘x = “10” y = “25” height = “100” width = “100”>
<Desc> Un círculo perfecto </ desc>
</ Image> </ code>
Nota: El atributo XLink show se utiliza con un valor de embed para incluir recursos en el documento, pero como este es el valor predeterminado (y único) permitido para el atributo show en el elemento image, puede omitirse.

Fragmentos de SVG se pueden incrustar en el documento utilizando el elemento de uso – esto incluye SVG de archivos SVG externos y fragmentos que ya han aparecido en el mismo documento. Esto permite que los elementos SVG se definan una vez y se reutilizan muchas veces, y serán objeto de un artículo adicional sobre SVG reutilizable, que se publicará en el futuro en dev.opera.com.

SVG Tiny 1.2 y superiores permiten la integración de audio y vídeo, pero esto no está ampliamente implementado. En el momento de escribir esto sólo funciona en un archivo.

Vinculación de múltiples elementos

En HTML 4.01 y XHTML 1.0 / 1.1, el elemento a está en línea y, por lo tanto, no puede contener legalmente elementos secundarios de nivel de bloque. Si desea, por ejemplo, hacer una imagen y texto adyacente en el mismo enlace, debe especificar elementos adicionales con el mismo valor href. No existe tal restricción con SVG – es perfectamente válido hacer lo siguiente:

<G id = “heading”>
” ‘<a xlink:href= “https://www.opera.com/”>
\ Vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip \ vskip1.000000 \ baselineskip C 23,2,28,9 19,4,25,6 18,8,25,8 C 18,2,26,0 16,5, 30,7 15,8,30,7 C 15,2,30,7 13,5,26,0 12,9,25,8 C 12,3,25,6 8,5,28,9 7,9,28,6 C 7,4,28,3 8,3,23,3 7,9,22,9 C 7,4, 22,4 2,4,23,4 2,1, 22,8 C 1,8,22,3 5,1, 18,4 4,9,17,8 C 4,8, 17,2 0,0,15,5 0,0,14,9 C 0,0,14,3 4,8,12,6 4,9,12,0 C 5,1, 11,4 1,8,7,5 2,1,7,0 C 2,4,6,4 7,4,7,3 7,9,6,9 C 8,3,6,5 7,4, 1,5 7,9,1,2 C 8,5,0,9 12,3,4,1 12,9,4,0 C 13,5,3,8 15,2, -0,8 15,8, -0,8 C 16,5, -0,8 18,2,3,8 18,8,4,0 C 19,4,4,1 23,2,0,9 23,8,1,2 C 24,3, 1,5 23,4,6,5 23,8,6,9 C 24,3,7,3 29,2,6,4 29,6,7,0 C 29,9,7,5 26,6,11,4 26,8,12,0 C 26,9,12,6 31,7,14,3 31,7,14,9 C 31,7,15,5 26,9,17,2 26,8,17,8 C 26,6, 18,4 29,9,22,3 29,6,22,8 z “/>
<Text id = “label” x = “5” y = “20” transform = “rotate (-15 10 10)”> Nuevo </ text>
<Text id = “title” x = “40” y = “20”> Navegador de Opera </ text>
</a> ” ‘
</ G>

</ Svg> </ code>
Pruébelo al ver mi ejemplo.

Resumen

Después de leer este artículo, debería ser capaz de vincular documentos y recursos en SVG usando XLink enlaces simples. Hemos cubierto los conceptos básicos o creado un enlace en SVG usando el elemento a, añadiendo información adicional mediante el atributo de título XLink, utilizando identificadores de fragmentos para señalar una parte específica de un documento y cómo incrustar imágenes en un documento SVG utilizando la imagen elemento. También hemos cubierto un ejemplo un poco más complejo, utilizando múltiples elementos, que pueden apuntar al mismo destino utilizando un elemento a.

Enlaces que el Bot de Google no Puede Seguir