Da alcuni giorni, sono impegnato in un lavoro per conto dell’azienda.
Nemmeno la domenica è stata salva, stavolta. Va consegnato in fretta, avevamo altro da fare prima, e quindi va terminato, a costo di lavorare nel weekend. Mi sta bene, anche perchè mi sono divertito parecchio.

Il lavoro in se è piuttosto noioso, ma la parte che è toccata a me è forse quella piu divertente. Il mio compito era quello di scrivere uno script PHP che generasse un grafico circolare a partire da dati inseriti in un database, che poi qualcun altro si sarebbe occupato di riempire adeguatamente.

Al di la che finalmente ho avuto l’occasione di rimettere le mani su PHP e scrivere qualcosa con un minimo di stile (niente di eccezionale, ma sapete com’è, noi programmatori finiamo con l’innamorarci delle chicche che includiamo nei programmi e che di solito la gente poi non vede…), la cosa divertente è stata soprattutto mettere le mani su SVG.

SVG (Scalable Vector Graphic) è un formato di immagini interamente basato su XML. Il che significa che apreno un’immagine con un editor di testo, troveremo all’interno del testo. E questo è “f|k0” già di suo, perchè disegnare un’immagine usando un linguaggio di programmazione è divertente, soprattutto quando ci si deve infilare dentro qualcosa di “psicologicamente impegnativo”, come fargli randerizzare settori circolari in base a pesi diversi dei dati nel database… comunque dettagli.

Alla fine di questa mattinata, lo script era pronto, generava il suo bell’SVG d’esempio, pronto a bersi i dati che erano nel database.

A quel punto che faccio? Beh, mi dico, cominciamo a fare un po di pulizia e spostiamo gli stili fuori dall’SVG e mettiamo il tutto in un CSS. E cosi, sposta tutti gli stili dall’SVG al CSS, in modo da accentrare la configurazione di tutto il grafico (cambiare il colore assegnato ad una determinata tipologia di dato? Basta aprire il file css, sostituire il colore nell’apposita riga, ed il gioco è fatto).

Ma anche questo lavoro è finito presto. E allora? Beh, allora ho tirato fuori dal cilindro questo: animazioni SVG basate su CSS.

Avete presente i popup “pure CSS” di Eric Meyer? Ecco, esattamente la stessa cosa. Solo che invece di farlo stylizzando tag HTML, l’ho fatto su un SVG. Ed il risultato è davvero carino.

Per darvi l’idea, ho scritto un SVG che rappresenta un semaforo, e l’ho animato tramite lo stesso meccanismo, facendo apparire a lato una scritta a seconda del colore su cui puntate il mouse. Il codice SVG del semaforo lo vedete guardando il “sorgente” dell’immagine, mentre il CSS che lo anima è qui.

PS: Dimenticavo, per coloro che usano browser vecchi e che non supportano ancora il formato SVG, Adobe vi viene incontro un un apposito plugin…