SVG in Power BI-Visualisierungen: Wie man sie erstellt (und problemlos pflegt)

Scalable Vector Graphics (SVG ) ist ein XML-basiertes Vektorgrafikformat zur Definition zweidimensionaler Grafiken und zur Unterstützung von Interaktivität und Animation.

SVG-Kennzahlen gehören zu den elegantesten Methoden, um „Mikrovisualisierungen“ (Balken, KPIs, Symbole, Sparklines) direkt in Tabellen, Matrizen und bestimmte Kartenszenarien einzufügen – ganz ohne benutzerdefinierte Visualisierungen. Der Clou: Sie zeichnen nicht direkt in Power BI, sondern geben eine Bild-URL zurück, die SVG-Markup enthält.

Dieser Beitrag zeigt ein grundlegendes, produktionsreifes Setup sowie einen Wartungsansatz , damit Sie nicht am Ende 20 leicht unterschiedliche SVG-Maße haben, die niemand anfassen möchte.

---

Schauen Sie sich unsere KOSTENLOSEN Vorlagen und Materialien an.

Newsletter abonnieren

Übungsmaterial unten! 👇

---

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

1. Wann SVG in Power BI sinnvoll ist

Hervorragende Anwendungsfälle

• KPI-Pfeile (aufwärts/abwärts/waagerecht) in einer Tabelle oder Matrix

• „Datenbalken“ mit voller Gestaltungsfreiheit (abgerundete Ecken, Beschriftungen, Farbverläufe)

• Sparklines innerhalb einer Tabellenzeile (kleines Trenddiagramm)

• Statuspillen (grün/gelb/rot), die zu Ihrer Marke passen

  
  

Wo es dich beißen kann

• Performance : SVG-Grafiken sind sehr textlastig. Hunderte von Zeilen × komplexe SVG-Grafiken können die Darstellung verlangsamen.

• Die visuelle Unterstützung variiert : Tabellen/Matrizen sind die sicherste Wahl; andere Darstellungsformen hängen von den unterstützten Funktionen und Einstellungen ab. Die Microsoft-Richtlinien für dynamische Bilder konzentrieren sich auf Tabellen, Matrizen, Datenschnitte und mehrzeilige Karten.

• Mobil : Power BI Mobile-Apps haben Einschränkungen bei dynamischen Bildern.

2. Das Grundmuster (was Sie tatsächlich bauen)

Eine SVG-Messung gibt typischerweise etwas wie Folgendes zurück:

• data:image/svg+xml;utf8, ... (für Menschen lesbar, erfordert aber sorgfältige Kodierung) oder

• data:image/svg+xml;base64,.... (größerer Speicherbedarf, vermeidet aber viele Kodierungsprobleme)

Anschließend legen Sie die Datenkategorie der Kennzahl auf Bild-URL fest, und Power BI rendert sie als Bild.

3. Demo-Datensatz (Download)

Nutzen Sie diesen kleinen Datensatz zum Üben (12 Monate × Kategorie × Region, mit Sollwert vs. Istwert):

Power BI-Demodatei herunterladen: powerbi-svg-demo-data

Spalten:

• Datum, Monat, Jahr, Kategorie, Region

• Ziel_KEUR, Ist_KEUR, Delta_KEUR

4. Schritt für Schritt: Erstellen eines KPI-SVG-Indikators (einfaches Beispiel)

Schritt 1 – CSV-Datei laden

1. Power BI Desktop → Daten abrufen → Text/CSV → Datei auswählen

2. Datentypen festlegen:

   • Datum = Datum

   • Target_KEUR / Actual_KEUR / Delta_KEUR = Dezimalzahl

Schritt 2 – Maßnahmen erstellen

Erstellen Sie diese DAX-Measures:

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

Schritt 3 – SVG-Messgröße erstellen

Dieses Beispiel zeichnet eine kleine, abgerundete „Pille“ mit einem farbigen Punkt und dem Text %.

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 

Schritt 4 – Teilen Sie Power BI mit, dass es sich um ein Bild handelt.

1. Klicken Sie im Bereich „Felder“ auf die KPI-SVG- Kennzahl.

2. Messwerkzeuge → Datenkategorie → Bild-URL

Schritt 5 – In eine Tabelle/Matrix einfügen

1. Fügen Sie eine Tabellenvisualisierung hinzu

2. Felder hinzufügen:

   • Kategorie, Region, Monat

   • Istwert, Zielwert, Abweichung %, KPI SVG

3. Passen Sie die Größe der Spalte „KPI SVG“ an die Größe der Pille an.

💡 Profi-Tipp: Deaktivieren Sie den Textumbruch und reduzieren Sie den Zeilenabstand für ein sauberes „Indikatorspalten“-Erscheinungsbild.

5. Was zu beachten ist (damit es später nicht kaputt geht)

Fallstricke bei der Kodierung (häufigste Ursache für „kaputtes Bild“)

Wenn Ihr SVG Leerzeichen, #, %, Anführungszeichen oder Nicht-ASCII-Zeichen enthält, kann Ihre UTF-8-Zeichenkette beschädigt werden.

Sicherere Alternativen:

• Ersetzen Sie # durch %23 in den Farb-Hexadezimalcodes.

• Vermeiden Sie doppelte Anführungszeichen innerhalb von SVG (verwenden Sie durchgehend einfache Anführungszeichen).

• Falls weiterhin fehlerhafte Bilder auftreten, wechseln Sie zu Base64 (zuverlässiger, ausführlicher).

• Experimentieren Sie und passen Sie diesen Teil aufgrund der Breite/Höhe an:

<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>"

(Wenn in der Tabelle ein Symbol für ein „defektes Bild“ angezeigt wird, liegt das normalerweise an einem Kodierungsproblem oder ungültigem SVG-Markup.)

Visuelle Unterstützung (und warum Tabellen die Standardwahl sind)

Tabellen und Matrizen eignen sich am besten für die stabile Darstellung von SVG-Kennzahlen. Microsofts Leitfaden für dynamische Bilder konzentriert sich auf diese Visualisierungen (sowie Datenschnitte und mehrzeilige Karten). Einige neuere/alternative Visualisierungen können versionsübergreifend inkonsistent sein (in Community-Foren wird regelmäßig über Regressionen berichtet).

Faustregeln für die Leistung

• SVG klein halten (geringes Breiten-/Höhenverhältnis)

• Vermeiden Sie komplexe Pfade bei großen Zeilenanzahlen.

• Es empfiehlt sich, ein einziges SVG-Maß überall wiederzuverwenden (siehe Wartungsmuster unten).

6. Wartungsstrategie: Vermeiden Sie „SVG-Spaghetti“.

Hier ist eine einfache Möglichkeit, SVGs wartbar zu halten.

Eine wiederverwendbare „Stil“-Kennzahl + eine „Rendering“-Kennzahl

Erstellen Sie einen kleinen Satz wiederverwendbarer Hilfsmaßnahmen:

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

Dann wird Ihre SVG-Messung einfach „gerendert“:

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

✅ Ergebnis: Bei Änderungen des Brandings (Farben/Schriftarten) muss nur eine Stelle aktualisiert werden.

7. Zusammenfassung

SVG-Kennzahlen sind eine einfache Möglichkeit, benutzerdefinierte Visualisierungen hinzuzufügen – insbesondere für KPI-Indikatoren in Tabellen/Matrizen. Wichtig ist die Standardisierung : eine Renderkennzahl, Hilfskennzahlen für die Formatierung und Vorlagen für die Skalierung.

Das kommt ganz zum Schluss. Hier sind die Möglichkeiten unbegrenzt.

SVG custom icon measure in Power BI Matrix visual