Por dónde empezar con SVG II

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte.

En el post de hoy veremos algunos errores que suelen ocurrir debido a las similitudes entre SVG y HTML, de manera que no perdamos mucho tiempo intentando averiguar qué es lo que está pasando.

HTML5 Doctype

Si vamos a incluir código SVG inline dentro de una página en HTML5, tenemos que asegurarnos de que estamos usando el doctype HTML5 </DOCTYPE html>. Es necesario para HTML5, ya que si no lo indicamos, nuestra página no se renderizará adecuadamente en IE9 ni en IE10. Simplemente, el contenido SVG no aparecerá. ¡No lo olvides!

Overflow por defecto

Como en otros elementos HTML como los <div>, el overflow por defecto de un SVG raíz es visible. Esto significa que el contenido SVG que esté fuera del bounding box del <svg> será visible. En algunos casos, esto puede llevar a un comportamiento inesperado. Para evitar estas situaciones habrá que añadir al bloque de la CSS svg {overflow:hidden;}.

<img class="size-full wp-image-1107" title=" con Overflow visible” src=”http://speakingin.net/wp-content/uploads/2011/11/20111027-overflow1.png” alt=”con Overflow visible” width=”151″ height=”152″ />
<svg> con Overflow visible
<img class="size-full wp-image-1108" title=" con Overflow hidden” src=”http://speakingin.net/wp-content/uploads/2011/11/20111027-overflow2.png” alt=”con Overflow hidden” width=”151″ height=”152″ />
<svg> con Overflow hidden

Posición por defecto del texto.

Si estáis creando gráficos SVG a mano, seguramente no os deis cuenta de los atributos Y de los elementos <text> y <tspan>. Si no indicáis nada, por defecto el texto se posiciona con y=0. Esto significa que la línea base del texto está encima del contenedor SVG, por lo que terminará siendo invisible si la propiedad overflow está puesta como “hidden”. Así que comprobadlo si no queréis que os pase esto:

Texto con y=0
Texto con y=0

 

Texto con y=25
Texto con y=25

Accesibilidad

Conseguir gráficos que sean accesibles suele ser una tarea ardua, pero como SVG soporta el poder añadir textos descriptivos y títulos a elementos SVG individuales y a grupos, es posible crear gráficos SVG que sean más accesibles que los elementos <img> y el atributo “alt”.

Sin ninguna marca adicional, el contenido de texto es legible por los lectores de pantalla. Para elementos gráficos,  añadiendo los tags <title> y <desc> como hijos del elemento de forma permiten el acceso a esos lectores de pantalla al texto descriptivo. Como el atributo title de los elementos <img> de HTML, SVG lo muestra al pasar el ratón sobre el elemento.

El siguiente ejemplo muestra el elemento <title>:

<?xml
version=1.0encoding=UTF-8?>

<svg
xmlns=http://www.w3.org/2000/svg
xmlns:xlink
=http://www.w3.org/1999/xlink
width=500height=300
viewBox=0 0 500 300>

<title>Abstract Art</title>

<style
type=text/css>

/*<![CDATA[*/

.c0, .c1, .c2 { fill-opacity:
1; fill-rule: evenodd; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin:
round; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 10px; }

.c0 { fill: #e3caad; stroke:
#4e320e; }

.c1 { fill: #bc9dc9; stroke:
#4b1268; }

.c2 { fill: #2cec7d; stroke:
#2c9549; stroke-linecap: butt; stroke-linejoin: miter; }

/*]]>*/

</style>

<rect
class=c0width=131.429
height=168.571x=37.143
y=40.934>

<title>Toast</title>

</rect>

<g>

<title>Bunch of grapes</title>

<path
class=c2d=M314.286,78.076 340,15.219 428.571,26.648z>

<title>Grape Leaf</title>

</path>

<circle
cx=270cy=100r=20class=c1
id=grape/>

<use
xlink:href=#grapex=40/>

<use
xlink:href=#grapex=80/>

<use
xlink:href=#grapex=20
y=35/>

<use
xlink:href=#grapex=60
y=42/>

<use
xlink:href=#grapex=38
y=80/>

</g>

</svg>

Toast & Grapes
Toast & Grapes

Además, el atributo focusable se puede usar para permitir que el teclado acceda a esas descripciones. Si focusable=”true”, se creará una tabulación para ese elemento, de manera que un usuario que use el teclado como entrada, pueda poner el foco en la forma y obtener la información de accesibilidad.

MIME type

Si estáis sirviendo archivos SVG, aseguraos de que el servidor está configurado para servir los archivos con el MIME type adecuado. El MIME type correcto para SVG es image/svg+xml. Pero ojo, no os confundáis con image/svg-xml. Hay algún contenido por ahí que está usando el tipo incorrecto debido a que el visor de Adobe SVG Viewer está bastante aceptado. Aseguraos de usar el MIME type correcto.

Archivos SVGZ

Al igual que en el caso anterior, si estáis usando SVG comprimidos, aseguraos de que la línea Content-Encoding:gzip está en la cabecera de respuesta del archivo SVG.

Espero que os sirva.

Juan María Laó Ramos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *