Hace unos días hablaba sobre el atributo viewBox en SVG.

Ahora vamos a ver un pequeño problema que nos vamos a encontrar a la hora de generar un SVG sin el atributo viewBox.

Antes de nada voy a recodar el post sobre como Exportar SVG desde Illustrator, Inkscape y Sketch

InKscape omite el atributo viewBox lo cual nos puede crear problemas a la hora de insertar SVG en el HMTL

El problema viene a raíz de este Pen en el que aplico filtros SVG sobre una imagen que obtengo a través de una etiqueta image y que esta dentro de las etiquetas SVG.

 

Al abrirlo en Firefox me di cuenta de que la imagen no respetaba las medidas que le había dado a la etiqueta image, y se incrustaba con su tamaño real.

viewbox firefox

La primera imagen no tiene declarado el atributo viewBox, el resto sí. La primera y la cuarta imagen son las mismas.

Aquí tenéis el código y el ejemplo.

 1 <svg version="1.1"
 2   xmlns="http://www.w3.org/2000/svg"
 3   xmlns:xlink="http://www.w3.org/1999/xlink"
 4   width="1000px" height="800px"
 5   viewBox="0 0 1000 800">
 6 
 7   <image x="63.1" y="46.8" width="235" height="126" xlink:href="http://jorgeatgu.com/img/smilcityclock.svg"/>
 8 
 9   <image x="363.1" y="46.8" width="235" height="126" xlink:href="http://jorgeatgu.com/img/sublimesvg.svg"/>
10 
11   <image x="623.1" y="46.8" width="235" height="126" xlink:href="http://jorgeatgu.com/img/webjorgeatgu.svg"/>
12 
13   <image x="363.1" y="246.8" width="235" height="126" xlink:href="http://jorgeatgu.com/img/codepencity.svg"/>
14 
15   </svg>

Así que el problema tiene fácil solución, añadir siempre el atributo viewBox a la etiqueta SVG. Como hemos visto anteriormente tanto Illustrator como Sketch siempre lo incluyen pero InKscape no lo incluye, y si creamos el el SVG a mano es posible que nos olvidemos de incluirlo. Así que no os olvidéis de revisar que en la etiqueta SVG este incluido el atributo viewBox.

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).