SVG u Power BI vizualima: Kako ih kreirati (i održavati bez muke)

Skalarna vektorska grafika (SVG ) je format vektorske grafike zasnovan na XML-u za definiranje dvodimenzionalne grafike i podršku interaktivnosti i animaciji.

SVG mjere su među najčišćim načinima za dodavanje „mikro vizuala“ (traka, KPI-jeva, ikona, mini grafikona) direktno unutar tabela, matrica i određenih scenarija kartica - bez prilagođenih vizuala. Trik je u sljedećem: zapravo ne crtate u Power BI-u... vraćate URL slike koji sadrži SVG oznake.

Ovaj post prikazuje osnovnu, produkcijsku postavku , zajedno s pristupom održavanju kako ne biste završili s 20 malo drugačijih SVG mjera koje nitko ne želi dirati.

---

Pogledajte neke od naših BESPLATNIH predložaka i materijala.

Pridružite se biltenu

VJEŽBA MATERIJAL ISPOD!👇

---

Visualizing Performance: Enhance Power BI Dashboards with SVG Icons for Dynamic KPI Tracking and Insightful Sparklines.

1. Kada SVG u Power BI ima smisla

Odlični slučajevi upotrebe

• Strelice KPI-ja (gore/dolje/ravno) u tabeli ili matrici

• „Trake podataka“ s potpunom kontrolom dizajna (zaobljeni uglovi, oznake, gradijenti)

• Mini linije unutar reda tabele (mali grafikon trenda)

• Statusne tablete (zelene/žute/crvene) koje odgovaraju vašoj marki

  
  

Gdje te može ugristi

• Performanse : SVG mjere sadrže puno teksta. Stotine redova × složeni SVG mogu usporiti vizualne prikaze.

• Vizualna podrška varira : Tabele/matrice su najsigurnija opcija; ostali vizuali zavise od podrške funkcija i postavki. Microsoftove smjernice za dinamičke slike fokusiraju se na tabele, matrice, slicere i kartice s više redova.

• Mobilne aplikacije : Power BI mobilne aplikacije imaju ograničenja za dinamičke slike.

2. Osnovni obrazac (ono što zapravo gradite)

SVG mjera obično vraća nešto poput:

• podaci:slika/svg+xml;utf8, ... (čitljivo ljudima, ali zahtijeva pažljivo kodiranje) ili

• data:image/svg+xml;base64,.... (teža, ali izbjegava mnoge probleme s kodiranjem)

Zatim postavite kategoriju podataka mjere na URL slike , a Power BI je prikazuje kao sliku.

3. Demo skup podataka (preuzimanje)

Koristite ovaj mali skup podataka za vježbu (12 mjeseci × kategorija × regija, s ciljanim u odnosu na stvarne podatke):

Preuzmite Power BI demo datoteku: powerbi-svg-demo-data

Kolone:

• Datum, Mjesec, Godina, Kategorija, Regija

• Ciljni_KEUR, Stvarni_KEUR, Delta_KEUR

4. Korak po korak: Izrada KPI SVG indikatora (osnovni primjer)

Korak 1 — Učitajte CSV datoteku

1. Power BI Desktop → Preuzimanje podataka → Tekst/CSV → odabir datoteke

2. Postavite tipove podataka:

   • Datum = Datum

   • Ciljni_KEUR / Stvarni_KEUR / Delta_KEUR = Decimalni broj

Korak 2 — Kreirajte mjere

Kreirajte ove DAX mjere:

Actual = SUM ( 'powerbi-svg-demo-data'[Actual_KEUR] )
Target = SUM ( 'powerbi-svg-demo-data'[Target_KEUR] )
Delta = [Actual] - [Target]
Delta % = DIVIDE ( [Delta], [Target] )

Korak 3 — Kreirajte SVG mjeru

Ovaj primjer crta malu zaobljenu "pilulu" s obojenom tačkom + % tekst.

KPI SVG =
VAR v = [Delta %]
VAR Color =
    SWITCH (
        TRUE(),
        ISBLANK ( v ), "#B0B0B0",
        v >= 0.05,      "#2E7D32",
        v <= -0.05,     "#C62828",
                        "#F9A825"
    )
VAR Label =
    IF ( ISBLANK ( v ), "n/a", FORMAT ( v, "0.0%" ) )
VAR Svg =
    "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='45' viewBox='0 0 100 45' preserveAspectRatio='xMinYMid meet'>"
        & "<rect x='0' y='0' rx='11' ry='11' width='100' height='45' fill='#F5F5F5'/>"
        & "<circle cx='12' cy='16' r='12' fill='" & Color & "'/>"
        & "<text x='40%' y='40%' dominant-baseline='middle' font-family='Segoe UI' font-size='24' fill='#222'>" & Label & "</text>"
    & "</svg>"
RETURN
    "data:image/svg+xml;utf8," &  Svg 

Korak 4 — Recite Power BI-ju da je to slika

1. Kliknite na mjeru KPI SVG u oknu Polja

2. Alati za mjerenje → Kategorija podataka → URL slike

Korak 5 — Stavite to u tabelu/matricu

1. Dodajte vizuelni prikaz tabele

2. Dodajte polja:

   • Kategorija, Regija, Mjesec

   • Stvarni, Ciljni, Delta %, KPI SVG

3. Promijenite veličinu kolone „KPI SVG“ da odgovara veličini tablete.

💡 Profesionalni savjet: Isključite prelamanje teksta i smanjite razmak između redova za uredan izgled "kolone indikatora".

5. Šta treba uzeti u obzir (kako se kasnije ne bi pokvarilo)

Zamke kodiranja (najčešći uzrok "lomljene slike")

Ako vaš SVG sadrži razmake, #, %, navodnike ili znakove koji nisu ASCII, vaš utf8 string može se prelomiti.

Sigurnije opcije:

• Zamijenite # sa %23 u heksadecimalnim kodovima boja

• Izbjegavajte dvostruke navodnike unutar SVG-a (koristite jednostruke navodnike dosljedno)

• Ako stalno dobijate oštećene slike, prebacite se na base64 (pouzdaniji, detaljniji)

• Eksperimentišite i prilagodite ovaj dio zbog širine/visine:

<svg xmlns='http://www.w3.org/2000/svg' width='100' height='45' viewBox='0 0 100 45' preserveAspectRatio='xMinYMid meet'>"
        & "<rect x='0' y='0' rx='11' ry='11' width='100' height='45' fill='#F5F5F5'/>"
        & "<circle cx='12' cy='16' r='12' fill='" & Color & "'/>"
        & "<text x='40%' y='40%' dominant-baseline='middle' font-family='Segoe UI' font-size='24' fill='#222'>" & Label & "</text>"
    & "</svg>"

(Ako u tabeli vidite ikonu „oštećene slike“, obično je u pitanju kodiranje ili nevažeće SVG označavanje.)

Vizualna podrška (i zašto su tabele zadani izbor)

Tabele i matrice su najstabilnije mjesto za SVG mjere. Microsoftovo uputstvo za dinamičke slike fokusira se na ove vizuale (plus slicere i kartice s više redova). Neki noviji/alternativni vizuali mogu biti nekonzistentni u različitim verzijama (u temama zajednice redovno se spominju regresije).

Pravila performansi

• Održavajte SVG malim (uska širina/visina)

• Izbjegavajte složene putanje za veliki broj redova

• Preferira se jedna SVG mjera koja se ponovo koristi svugdje (pogledajte obrazac održavanja ispod)

6. Strategija održavanja: Ne kreirajte „SVG špagete“

Evo jednostavnog načina da SVG-ovi ostanu održivi.

Jedna mjera "stila" za višekratnu upotrebu + jedna mjera "renderiranja"

Napravite mali skup pomoćnih mjera koje možete ponovo koristiti:

KPI Color =
VAR v = [Delta %]
RETURN
SWITCH (
    TRUE (),
    ISBLANK ( v ), "#B0B0B0",
    v >= 0.05, "#2E7D32",
    v <= -0.05, "#C62828",
    "#F9A825"
)

Tada se vaša SVG mjera samo "renderira":

KPI SVG (Maintained) =
VAR Color = [KPI Color]
VAR Label = IF ( ISBLANK ( [Delta %] ), "n/a", FORMAT ( [Delta %], "0.0%" ) )
VAR Svg =
"<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24'>
  <rect rx='12' ry='12' width='120' height='24' fill='#F5F5F5'/>
  <circle cx='14' cy='12' r='6' fill='" & Color & "'/>
  <text x='28' y='16' font-family='Segoe UI' font-size='12' fill='#222'>" & Label & "</text>
</svg>"
RETURN
"data:image/svg+xml;utf8," & Svg

✅ Rezultat: kada se mijenja brendiranje (boje/fontovi), ažurirate jedno mjesto .

7. Zaključak

SVG mjere su jednostavan način za dodavanje prilagođenih vizuala, posebno za KPI indikatore unutar tabela/matrica. Ključ za ispravnost je standardizacija : jedna mjera za renderiranje, pomoćne mjere za stil i predlošci ako skalirate.

Ovo dolazi na samom kraju. Ovdje možete raditi neograničene stvari.

SVG custom icon measure in Power BI Matrix visual