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;}.
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:
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.0” encoding=“UTF-8“?>
<svg
xmlns=“http://www.w3.org/2000/svg”
xmlns:xlink=“http://www.w3.org/1999/xlink”
width=“500” height=“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=“c0” width=“131.429”
height=“168.571” x=“37.143”
y=“40.934“>
<title>Toast</title>
</rect>
<g>
<title>Bunch of grapes</title>
<path
class=“c2” d=“M314.286,78.076 340,15.219 428.571,26.648z“>
<title>Grape Leaf</title>
</path>
<circle
cx=“270” cy=“100” r=“20” class=“c1”
id=“grape“/>
<use
xlink:href=“#grape” x=“40“/>
<use
xlink:href=“#grape” x=“80“/>
<use
xlink:href=“#grape” x=“20”
y=“35“/>
<use
xlink:href=“#grape” x=“60”
y=“42“/>
<use
xlink:href=“#grape” x=“38”
y=“80“/>
</g>
</svg>
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.
juanlao 
