Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte y aquí la segunda.
En el post de hoy veremos cómo hacer que las imágenes no se deformen, cómo trabajar con el DOM de la página y veremos algunas herramientas que nos pueden resultar útiles a la hora de trabajar con gráficos SVG.
Escalado: ViewBox y preserveAspectRatio
Para asegurarnos de que las imágenes se escalan de la forma que queremos debemos especificar el atributo viewBox en el elemento <svg>. Con este atributo conseguiremos que las imágenes se escalen cuando modifiquemos el width y el height de la imagen, en lugar de estirarse y deformarse.
El atributo preserveAspectRatio también sirve para controlar el escalado de una imagen SVG. La sintáxis es: preserveAspectRatio=”alignmeetOrSlice”. Estos parámetros describen cómo se va a encajar una imagen y dónde se va a posicionar dentro de su contenedor. Estableciendo el atributo presservAspectRatio=”none”, el elemento <image> del SVG se va a comportar como un elemento <image> HTML común:
La cosa se pone interesante cuando este atributo no es “none”. En esos casos lo que se controla es cómo se alinea la imagen a un contenedor con un aspect ratio diferente. El parámetro meetOrSlice determina si la imagen se escala al tamaño mínimo del contenedor (meet) o si se acomoda al tamaño máximo del contenedor (slice). El parámetro align indica cómo se va a alinear dentro del contenedor. Hay tres opciones para cada dirección – x e y. Esto nos lleva a nueve posibles combinaciones:
- xMinYMin – alinea la imagen a la esquina superior izquierda del contenedor.
- xMidYMin – alinea la imagen en el centro en la x y en la y superior del contenedor .
- xMaxYMin – alinea la imagen en la esquina superior derecha.
- xMinYMid – alinea la imagen a la izquierda y en el centro en la y del contendor.
- xMidYMid – alinea la imagen justo en el centro del contenedor.
- xMaxYMid – alinea la imagen a la derecha y en el centro en la y del contenedor.
- xMinYMax – alinea la imagen a la esquina inferior izquierda del contenedor.
- xMidYMax – alinea la imagen en el centro en la x y en la y inferior del contendor.
- xMaxYMax – alinea la imagen en la esquina inferior derecha del contendor.
Para verlo más claramente veamos la imagen de la jirafa con cada una de las posibilidades:
Scripting: SVG DOM vs. Core DOM
Los métodos getAttribute() y setAttribute() de la especificación DOM Core y se puede aplicar a HTML y XML, incluso a SVG. Estos métodos ofrecen una forma fácil y familiar de modificar atributos de los elementos. Sin embargo, SVG expone sus propios métodos para trabajar con DOM más eficaces y con mejor rendimiento.
Por ejemplo, la siguiente función dobla el radio de un circulo usando la función setAttribute():
function doubleCircleRadius(circle) {
circle.r.baseVal.value *= 2;
}
Sin embargo, usando el DOM de SVG, lo mismo se puede conseguir de esta manera
function doubleCircleRadius(circle)
{
circle.r.baseVal.value *= 2;
}
Aquí teneis una tabla describiendo una generalización de cómo acceder a algunos atributos comunes:
| Value “type” | Attribute examples | DOM access |
|---|---|---|
| Presentation attribute | fill, stroke | elem.style.fill |
| Length | r, width, height, cx, cy, x, y | elem.r.baseVal.value |
| Object | viewBox | elem.viewBox.baseVal.x
elem.viewBox.baseVal.y elem.viewBox.baseVal.width elem.viewBox.baseVal.height |
| List | transform, d | elem.transform.baseVal.getItem(0); |
Las interfaces de SVG DOM están documentados al final de cada capítulo en la especificación de SVG
Herramientas y librerías.
Aunque SVG es legible y puede crearse a mano, sigue siendo muy visual y no suele ser intuitivo pasar de un mundo visual a una descripción matemática. Podemos usar herramientas de diseño vectorial disponibles a día de hoy.
- Inkscape: una herramienta gratuita.
- Adobe Illustrator: usado por profesionales para crear imágenes vectoriales que puede guardar los archivos en formato SVG.
- Microsoft Visio: también puede exportar a SVG, recomendado para diagramas de negocio.
Si la optimización es algo importante para ti, ten en cuenta que estas herramientas no escupen un SVG simple; suelen contener namespaces, elementos y atributos propietarios. Es recomendable hacer un trabajo de limpiado para reducir el tamaño del archivo o para maquetarlo fácilmente.
Además de Inkscape, otro editor SVG libre es SVG-edit. Es un editor en JavaScirpt y usa tu propio navegador para renderizar la creación de SVG. La última versión alpha tiene increíbles características. ¡Pruébalo en IE9!
IE9 soporta fuentes WOFF en lugar de fuentes SVG. Estas fuentes pueden usarse en HTML y SVG, reduciendo la curva de aprendizaje de SVG.
Espero que os sirva
Juan María Laó Ramos.
juanlao 