Power BI

SVG Dinamici in Power BI

L’utilizzo degli SVG (Scalable Vector Graphics) in Power BI rappresenta una soluzione avanzata per migliorare l’aspetto visivo e l’interattività delle dashboard. Grazie a questa tecnologia, è possibile trasformare i tradizionali numeri statici in indicatori visivi scalabili e dinamici, garantendo un’esperienza utente più intuitiva e professionale.

Introduzione

Le Schede di Power BI rappresentano uno strumento fondamentale per la visualizzazione dei dati ad alto livello o di particolare importanza. Tuttavia, le restrizioni che Power BI impone sulla personalizzazione di questi visual possono spesso limitarne l’efficacia comunicativa.

In questo articolo vedremo:

Come implementare SVG (Scalable Vector Graphics) dinamici nelle Schede per creare dashboard più intuitive e professionali
Come gestirne la dinamicità
Come ottenere grafiche uniche e personalizzabili chiedendole ad un qualsiasi LLM

Gli SVG, a differenza delle immagini raster (png, jpeg ecc.), offrono una scalabilità completa e possono essere manipolati dinamicamente attraverso il codice DAX, permettendoci di creare indicatori che cambiano colore, forma od orientamento in base a dati sottostanti. Questo approccio non solo migliora l’aspetto visivo delle dashboard, ma aggiunge un livello di interattività che rende immediata la comprensione delle metriche chiave.

Pro tip: un SVG ben implementato può ridurre drasticamente il tempo necessario agli utenti per interpretare i dati, trasformando numeri freddi in segnali visivi immediatamente comprensibili.

Cards SVG: Implementazione in Power BI

L’implementazione di un SVG in una Scheda di Power BI richiede un approccio modulare e flessibile; possiamo scegliere tra un SVG statico, utile per icone predefinite, inserendo il file SVG nel pannello formato del visual, nella sezione ‘immagini’ impostando il tipo immagine su ‘immagine’ (non URL); o un SVG dinamico che si adatta ai dati. La dinamicità dell’icona sarà gestita da una misura DAX, se scritta nel modo corretto.

La misura in questione consiste in un contenitore modulare composto da variabili interdipendenti:

una per la stringa di compatibilità (che garantisce il rendering corretto da parte di Power BI),
una per il codice XML base dell’SVG,
e variabili aggiuntive per gli elementi dinamici come colori, rotazioni, dimensioni o valori testuali.

L’obiettivo è creare un “template” per le icone che possa essere modificato senza dover ricostruire l’intera grafica. Ad esempio, potremmo avere variabili che gestiscono la palette dei colori in base a soglie di performance, variabili per ruotare icone che indicano un trend, o variabili che iniettano valori testuali direttamente nell’SVG. Questa architettura garantisce non solo flessibilità visiva, ma anche una manutenzione del codice estremamente pulita e scalabile. Come vedremo la creazione della misura DAX in questione è un processo piuttosto semplice ma è necessario seguire alcuni accorgimenti perché funzioni correttamente.

Possiamo iniziare creando una nuova misura (SVG_icon) e due variabili: una per la stringa di compatibilità che conterrà la stringa “data:image/svg+xml;utf8,” (virgolette incluse e occhio al resto della punteggiatura), la seconda conterrà il codice XML dell’icona vera e propria. Come output (RETURN) concateniamo le due variabili che abbiamo creato (sempre prima la stringa di compatibilità e poi l’XML), e impostiamo la “categoria di dati” (strumenti misura) su “URL immagine”. Il consiglio è quello di utilizzare le virgolette doppie (“) all’inizio e alla fine dell’intero codice XML e le virgolette singole (‘) per i vari parametri, come mostrato in figura.

				
					SVG_icon = 
VAR compString = "data:image/svg+xml;utf8," 
VAR SVGcode = 
"<svg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 100 100'>
<rect x='10' y='10' width='80' height='80' fill='green'/>
</svg>"
RETURN
compString & SVGcode

Se inseriamo la misura in una tabella dovrebbe essere mostrato un quadratino di colore verde: vuol dire che l’SVG viene renderizzato correttamente e possiamo procedere con lo step successivo. Nel caso in cui volessimo parametrizzare, per esempio il colore del quadrato, possiamo creare un’ulteriore variabile (VAR color = ) che conterrà la stringa del codice esadecimale del colore (es. “#00CC66″), o il nome stesso del colore, per esempio “green” corrisponde ad una determinata tonalità di verde secondo le convenzioni XML. Per inserire il colore contenuto nella variabile nell’XML sostituiamo il valore tra virgolette (green) con una stringa in questo formato “ & variabile & ” , ottenendo:

				
					SVG_icon = 
VAR compString = "data:image/svg+xml;utf8," 
VAR SVGcode = 
"<svg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 100 100'>
<rect x='10' y='10' width='80' height='80' 
fill = ’ “ & color & ” ’ />
</svg>"
RETURN
compString & SVGcode

Questo è il criterio generale per inserire le variabili all’interno del codice dell’SVG, in questo modo qualsiasi campo può essere parametrizzato ma l’ordine e la leggibilità diventano fondamentali.

Ora l’SVG può essere inserito nella Scheda.

Creiamo un nuovo visual Card(new), inseriamo la misura numerica (metrica di alto livello o KPI) che vogliamo mostrare, e nel pannello Formato della Scheda cerchiamo la sezione “Immagini”. Impostiamo su ‘on’ il toggle e scegliamo di nuovo “URL immagine”. Cliccando sul bottoncino fx possiamo scegliere la misura che contiene il nostro SVG. Se l’SVG non compare subito nella card possiamo provare ad aumentarne le dimensioni all’interno dello stesso pannello.

Guida Pratica alla Generazione di SVG per Power BI Cards

Dopo aver visto come integrare un SVG in una misura DAX, l’unico ingrediente che manca a questo punto è proprio un SVG personalizzato e creato ad hoc per il nostro use case. Possiamo, per esempio, servirci di un modello di linguaggio (come ChatGPT, Gemini, Copilot, Claude etc.) per generare un’icona secondo le nostre esigenze, e senza particolari competenze di programmazione. Definiamo come “prompt”, il testo che un utente fornisce per comunicare la propria richiesta al modello di linguaggio. È la guida iniziale che definisce il contesto, l’obiettivo e i dettagli necessari affinché il modello possa generare una risposta pertinente. Può variare da una semplice domanda o comando a descrizioni complesse e dettagliate. Qui di seguito alcuni consigli per scrivere un prompt efficace ed ottenere il miglior risultato possibile sotto forma di SVG.

Scrivere un prompt efficace:

Definire chiaramente gli elementi visivi richiesti: specifica il tipo di grafico o illustrazione, come ad esempio “un’icona circolare con un segno di spunta al centro”.
Indicare le proporzioni e i colori: aggiungere dettagli come “con sfondo trasparente” o “utilizzando tonalità di blu e verde”.
Evitare complessità inutili: opta per design minimalisti, adatti alla visualizzazione in piccoli spazi come le Schede o le Matrici di Power BI.
Focus sull’obiettivo visivo: specifica la funzione comunicativa del design, ad esempio “indicare approvazione” o “mostrare una progressione”.
Iterazione e feedback: affina il prompt basandoti sui risultati ottenuti, concentrandoti sull’aggiunta di dettagli rilevanti senza appesantire la descrizione.

Suggerimenti avanzati:

Usare analogie o riferimenti universali: frasi come “simile a un’icona di avviso su un’app mobile” aiutano il modello a interpretare meglio l’intento.
Chiedere alternative: richiedi più versioni dello stesso design per confrontarle e selezionare quella più adatta.
Evitare ambiguità: termini generici come “bello” o “interessante” devono essere sostituiti con attributi specifici come “stilizzato”, “lineare”, o “con bordi arrotondati”.

Considerazioni aggiuntive:

Validazione del codice SVG: salva il codice generato in un file di testo con estensione .svg . Potrai controllare il risultato e se necessario sistemare alcuni dettagli attraverso il prompt.
Personalizzazione dinamica: considera di parametrizzare gli SVG per aggiornarne il contenuto in base ai dati, come la colorazione condizionale o la modifica di testi/numeri.
Non fermarti alla prima generazione, potresti ottenere risultati diversi con lo stesso prompt e provare a modificarlo un po’ per ottenere risultati interessanti.

Bonus:

Immaginiamo di aver generato un SVG molto semplice di un rettangolino verde. A questo punto proviamo a chiedere al modello di generarne una versione migliorata, senza aggiungere altri dettagli. Se notiamo che il miglioramento prende una via che non ci soddisfa, torniamo indietro di qualche step e ricominciamo. Qui sotto un esempio del sistema appena spiegato, il prompt da cui siamo partiti era: “genera l’SVG di una progress bar”.

Si ricordi, sempre, che essendo codice generato potrebbe aver bisogno di qualche ritocchino. In secondo luogo, qualsiasi sia l’SVG che ci viene fornito, potrà essere sistemato, con strumenti come Figma o attraverso la sintassi XML.

Scopri tutte le nostre soluzioni Power BI

Al tuo fianco dalla consulenza alla formazione a soluzioni di data visualization.

Visualitics Team
Questo articolo è stato scritto e redatto da uno dei nostri consulenti.

Condividi ora sui tuoi canali social o via email: