Skip to content

Plantillas SVG: Prueba de concepto.

Hoy se me ocurrió una pequeña idea, el SVG es un formato de imágenes creado con XML, que al igual que el XHTML es susceptible de ser generado dinámicamente, y al igual que el XHTML puede ser generado usando plantillas… como por ejemplo Smarty..

Así mismo hoy día hay un soporte decente para el formato SVG en los navegadores web a través de viewers de SVG(de hecho que yo sepa, en Firefox y Opera el soporte es nativo).

Pero la idea de hacer estos documentos principalmente gráficos, con sólo código, la verdad suena bastante estúpida y más cuando tenemos herramientas bastante decentes como Inkscape

Y aquí es donde se redondea el concepto:

1.- Haces tu diseño gráfico en Inkscape (cuyo formato nativo es un SVG bastante compatible con los navegadores).
2.- En las partes donde se vaya a sustituir el texto del diseño por contenido dinámico, se utilizan etiquetas tipo Smarty ({$tile|capitalized}).
3.- Un archivo .php carga la plantilla y substituye dinámicamente los textos, al mismo tiempo que aplica cualquier formato u operación indicada en las etiquetas tipo smarty (este tipo de trabajo tiene muchas posibilidades, sólo den una vuelta por el manual de Smarty).
4.- El contenido es dirigido al navegador incluyendo el header content-type: image/svg+xml para que el navegador reconozca el código como SVG.

Y listo, tienes funcionando una página SVG con contenido dinámico.

PD:¿Mencioné que el estándar SVG también soporta javascript y animaciones?… creo que hay una oportunidad de expansión interesante por ahí.

.

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*