SVG Colors, Patterns & Gradients

Monografía de O'Reilly en la que Amelia Bellamy-Royds, experta invitada en los grupos de trabajo de SVG, CSS y ARIA del W3C, y Kurt Cagle se centran en un único aspecto de SVG: cómo se pintan las formas y el texto. Trabaja con SVG 1.1 y adelanta funciones que en 2015 se discutían para SVG 2 y CSS. Está dirigida a diseñadores y desarrolladores web de nivel intermedio o avanzado que ya saben dibujar formas básicas en SVG y quieren ir más allá del aspecto plano de "dibujo técnico". Conviene manejar con soltura HTML, CSS y la estructura de un documento SVG.

El libro arranca con un repaso de lo que se da por sabido y con el modelo del pintor, es decir, el orden en que se superponen las capas. Luego explica a fondo cómo definir colores (palabras clave, RGB, HSL y su sintaxis en CSS) y las distintas formas de controlar la transparencia: opacity, fill-opacity, stroke-opacity y colores con canal alfa. La parte central está dedicada a los paint servers. Cubre los degradados lineales y radiales con sus atributos (gradientUnits, spreadMethod, gradientTransform y el punto focal), la repetición de degradados y los patrones con el elemento pattern, que sirven para crear mosaicos, texturas y rellenos fotográficos. También explica cómo aplicar todo esto al texto y a los trazos, y cómo animar colores, degradados y patrones con SMIL, CSS y JavaScript. Dos apéndices sirven de referencia: uno sobre palabras clave y sintaxis de color, y otro sobre elementos, atributos y propiedades de estilo.

Es un libro de técnica con muchos ejemplos de código y figuras, no un curso basado en proyectos. Los ejemplos van desde fondos texturizados hasta texto relleno de imágenes, y sirven como pequeños ejercicios para reproducir y adaptar. Aporta una profundidad que los manuales generales de SVG no tienen y explica bien las diferencias de soporte entre navegadores de la época. En cambio, deja fuera los filtros, las máscaras y los trazados complejos, que conviene estudiar en obras más generales como SVG Essentials. Algunas funciones de SVG 2 que comenta, como mesh gradients o hatch, nunca llegaron a implementarse de forma amplia.