• 27. května 2026
• v How-Tos
• 9 min čtení

Vytváření vlastních map oblastí ve formátu SVG

Modul Prozkoumat v TeskaLabs LogMan.io je část produktu, kde si uživatelé vytvářejí vlastní grafy na základě surových dat z logů.

Jedním z typů grafů, které Explore nabízí, je Mapy regionů.
Mapa regionů bere výsledek dotazu group by a barevně zvýrazňuje oblasti obrázku (obvykle mapy), aby odrážely hodnotu spojenou s každou skupinou.
Obrázek je běžný soubor SVG, který nahrajete do knihovny LogMan.io a odkážete na něj ve vaší definici grafu.

Mapy regionů nemusí být geografické. Cokoli, co lze nakreslit jako soubor pojmenovaných regionů, se může stát mapou regionů: diagram zón sítě, matice MITRE ATT&CK, plán podlaží datového centra, přehled jmenného prostoru Kubernetes, budova, uspořádání regálů. Pokud můžete svůj obor rozdělit na pevnou sadu pojmenovaných regionů a máte logové pole, které tyto názvy poskytuje, můžete z něj v Explore vytvořit mapu regionů.

Tento příspěvek vysvětluje, jak mechanismus funguje, jak vytvořit SVG, aby jej TeskaLabs LogMan.io mohl ovládat, a jak udělat mapu, aby se automaticky přizpůsobovala světlým a tmavým motivům produktu.
Krok za krokem si vytvoříme malou, ručně vytvořenou mapu síťových zón.

??? tip „Pod kapotou“

TeskaLabs LogMan.io Explore komponenta vykresluje grafy pomocí Apache ECharts, podporovaná backendovou mikroslužbou LogMan.io s názvem lmio-chart.

Jak funguje regionální mapa

Tok dat je přímočarý, jakmile ho máte v hlavě:

1. Uživatel definuje graf typu „Regionální mapa“ v Explore, pole Seskupit podle (například network.zone) a Mapu (SVG soubor z knihovny).
2. Dotaz vrátí řádky ve formátu (bucket_key, value); například ("dmz", 1283), ("lan", 47210), …
3. Komponenta grafu načte SVG z knihovny TeskaLabs LogMan.io a zaregistruje jej jako mapu. LogMan.io považuje každý prvek v SVG, jehož atribut name odpovídá klíči „bucket“, za oblast mapy.
4. TeskaLabs LogMan.io vybarví každou přiřazenou oblast pomocí barevného schématu grafu odpovídající její hodnotě. Oblasti, o kterých data nehovoří, jsou vybarveny neutrální barvou „bez dat“.

Celé porovnání se provádí porovnáním řetězců mezi klíčem koše a atributem name SVG prvku. Neděje se zde žádná magie, vy ovládáte názvy na obou stranách. Dohoda je: řetězce, které zdrojové pole vrací, musí být shodné s atributy name oblastí, které chcete obarvit.

!!! tip „Použijte Tabulku k přípravě dat“

Chcete-li definovat správné pole pro „seskupit podle“, použijte „Tabulku“ k vizualizaci výsledku dotazu. Přepněte na „Regionální mapu“, když budete spokojeni se zdrojovými daty.

Několik praktických důsledků:

• Shoda je citlivá na velikost písmen. Zvolte jednu konvenci (malá písmena jsou normou v balíčkových mapách LogMan.io) a sladte s ní jak SVG, tak logovací pipeline. Pokud vaše pole uchovává hodnoty jako DMZ, ale oblast v SVG se jmenuje dmz, nic se nezobrazí.
• Klíč koše je po normalizaci vždy řetězec. Pokud je vaše pole Skupina podle vícenásobné (["t1047", "t1059"]), hodnota stejného řádku se aplikuje na každou referencovanou oblast, jeden event se dvěma technikami obarví obě technikové krabičky.
• Klíče koše, které nejsou přítomny v SVG, se jednoduše ignorují. Oblasti SVG, které nejsou nikdy spárovány s klíčem, se vykreslují ve výchozí barvě "žádná data".

Anatomie SVG mapy

Soubor SVG potřebuje k fungování jako mapu regionu pouze tři věci:

1. Kořenový element <svg> s rozumným viewBox. LogMan.io používá viewBox pro rozvržení a zoom.
2. Jedna skupina <g id="layer-regions">, která obsahuje pojmenované oblasti. Skupina je konvence, nikoli tvrdé pravidlo, ale udržuje soubor přehledný a odpovídá přiloženým mapám.
3. Uvnitř této skupiny jeden element na oblast s atributem name="<bucket-key>". Obvykle je to <rect>, ale funguje jakýkoliv SVG tvar.

Minimální funkční příklad:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <g id="layer-regions">
    <rect name="t1047" x="10"  y="20" width="100" height="40"/>
    <rect name="t1059" x="120" y="20" width="100" height="40"/>
  </g>
</svg>

Každý <rect> je oblast. TeskaLabs LogMan.io propojuje datový bod s názvem t1047 a hodnotou 42 s obdélníkem, jehož atribut name je t1047, a vybarvuje ho podle barevné škály.

Statické atributy fill a stroke na pojmenované oblasti jsou jen zástupné hodnoty, TeskaLabs LogMan.io je přepisuje při vykreslování barvou vypočítanou z dat. Můžete tam použít libovolnou barvu; záleží jen na tom při náhledu SVG mimo TeskaLabs LogMan.io.

Pracovní příklad: mapa síťových zón

Postavme malou mapu, která zbarví čtyři síťové zóny (DMZ, interní LAN, hostující WiFi a správa) podle počtu událostí zaznamenaných v každé zóně. Předpokládejme, že logovací pipeline vydává pole s názvem network.zone, jehož hodnoty jsou dmz, lan, guest a mgmt.

Krok 1: Rozhodněte o klíčích regionu

Klíče musí odpovídat hodnotám, které vaše data produkují. Volíme malá písmena a krátké identifikátory:

Štítek zóny	Klíč regionu
demilitarizovaná zóna	dmz
Interní LAN	lan
Hosté WiFi	guest
Management	mgmt

Krok 2: Nakreslete SVG

Rozložte čtyři obdélníky na plátně o rozměrech 400 × 280, dvě řady po dvou. Každý obdélník je oblastí řízenou daty a nese odpovídající atribut name. Každý obdélník je doprovázen dvěma textovými popisky (čitelné lidské označení a surový klíč), které jsou chrome, ne data, takže nemusí mít name.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280">
  <title>Network Zones</title>
  <g id="layer-regions">

    <!-- DMZ -->
    <rect name="dmz"
          x="20" y="20" width="160" height="100"
          fill="#eeeeee" stroke="#888888" stroke-width="1"/>
    <text x="100" y="65" text-anchor="middle"
          font-family="sans-serif" font-size="16" font-weight="bold"
          fill="currentColor">DMZ</text>
    <text x="100" y="90" text-anchor="middle"
          font-family="sans-serif" font-size="11"
          fill="currentColor">dmz</text>

    <!-- Internal LAN -->
    <rect name="lan"
          x="220" y="20" width="160" height="100"
          fill="#eeeeee" stroke="#888888" stroke-width="1"/>
    <text x="300" y="65" text-anchor="middle"
          font-family="sans-serif" font-size="16" font-weight="bold"
          fill="currentColor">Internal LAN</text>
    <text x="300" y="90" text-anchor="middle"
          font-family="sans-serif" font-size="11"
          fill="currentColor">lan</text>

    <!-- Guest WiFi -->
    <rect name="guest"
          x="20" y="160" width="160" height="100"
          fill="#eeeeee" stroke="#888888" stroke-width="1"/>
    <text x="100" y="205" text-anchor="middle"
          font-family="sans-serif" font-size="16" font-weight="bold"
          fill="currentColor">Guest WiFi</text>
    <text x="100" y="230" text-anchor="middle"
          font-family="sans-serif" font-size="11"
          fill="currentColor">guest</text>

    <!-- Management -->
    <rect name="mgmt"
          x="220" y="160" width="160" height="100"
          fill="#eeeeee" stroke="#888888" stroke-width="1"/>
    <text x="300" y="205" text-anchor="middle"
          font-family="sans-serif" font-size="16" font-weight="bold"
          fill="currentColor">Management</text>
    <text x="300" y="230" text-anchor="middle"
          font-family="sans-serif" font-size="11"
          fill="currentColor">mgmt</text>

  </g>
</svg>

SVG vypadá takto:

V tomto bodě jsou čtyři obdélníky pojmenovány (dmz, lan, guest, mgmt) a šedé výplně jsou zástupné symboly.
Když Explore vykreslí tuto mapu vůči dotazu seskupenému podle network.zone, TeskaLabs LogMan.io nahradí tyto šedé barvy barvami ze škály barev grafu a ponechá jakoukoli zónu, kterou dotaz nevrátil, v neutrální barvě „bez dat“.

Barvy přizpůsobené tématu: světlý a tmavý režim

TeskaLabs LogMan.io je dodáván se dvěma motivy (světlým a tmavým) a uživatelé mezi nimi mohou kdykoli přepínat.
Datově řízené vyplněné pojmenované oblasti nejsou problém: TeskaLabs LogMan.io je počítá z dat pomocí barevné škály a tyto barvy lze konfigurovat pro každý řídicí panel.
Problémem je grafické rozhraní: hranice, které rámují skupiny oblastí, oddělovací čáry, záhlaví sekcí, popisné štítky.
Tyto prvky musí vypadat správně v obou motivech a jejich barvy nelze pevně nastavit na černou nebo bílou.

Načítací modul mapy regionu to řeší tím, že rozpozná dva speciální atributy u libovolného SVG prvku:

• data-fill="<CSS-variable-name>": při načtení načte načítací skript hodnotu pojmenované CSS proměnné z aktuálního dokumentu a zapíše ji do atributu fill elementu.
• data-stroke="<CSS-variable-name>": totéž, pro stroke.

CSS proměnné pocházejí z tématu TeskaLabs LogMan.io založeného na Bootstrapu. Každé téma definuje své vlastní hodnoty pro stejná jmenná proměnná, což je důvod, proč jeden SVG může sloužit oběma tématům. Nejužitečnější proměnné pro tvorbu map jsou:

Proměnná	Význam
--bs-body-color	Výchozí text a barva popředí
--bs-body-bg	Výchozí pozadí stránky
--bs-border-color	Jemná barva okraje
--bs-primary	Primární barva značky (královsky modrá v světlém motivu)
--bs-secondary	Doplňková značka

Užitečné pravidlo: cokoliv, co není datově řízená pojmenovaná oblast (štítky, rámečky, oddělovače, hlavičkové obdélníky), by mělo určovat svou barvu pomocí data-fill a/nebo data-stroke, nikdy pomocí statické barvy. Tímto způsobem je SVG vykresleno správně v obou tématech, aniž byste museli udržovat dvě verze souboru.

Verze SVG síťových zón s ohledem na motiv

Každý textový štítek rozšíříme o data-fill="--bs-body-color", aby barva štítku odpovídala motivu. Můžeme také upravit tah zástupce každého pojmenovaného <rect>, aby se přizpůsobil, ačkoli to není striktně nutné, protože TeskaLabs LogMan.io překresluje okraje svou vlastní barvou okraje.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280">
  <title>Network Zones</title>
  <g id="layer-regions">

    <!-- DMZ -->
    <rect name="dmz"
          x="20" y="20" width="160" height="100"
          fill="#eeeeee"
          data-stroke="--bs-border-color" stroke-width="1"/>
    <text x="100" y="65" text-anchor="middle"
          font-family="sans-serif" font-size="16" font-weight="bold"
          fill="currentColor" data-fill="--bs-body-color">DMZ</text>
    <text x="100" y="90" text-anchor="middle"
          font-family="sans-serif" font-size="11"
          fill="currentColor" data-fill="--bs-body-color">dmz</text>

    <!-- … the other three zones follow the same pattern … -->

  </g>
</svg>

Atributy data-fill / data-stroke se zpracovávají jednou při načtení SVG pro aktuální téma. Když uživatel změní téma, TeskaLabs LogMan.io znovu načte a znovu zaregistruje mapu s hodnotami z právě aktivního tématu. V SVG nemusíte nic dělat, aby toto přerenderování fungovalo.

Práce s editory SVG

Malé SVG mapy můžete psát ručně, jak jsme to udělali výše, ale pro cokoli přesahující několik oblastí budete chtít editor.

Většina editorů zvládá základy, s jednou zvláštností:

Některé SVG editory (včetně jinak velmi schopného webového Boxy SVG) odmítají přímo nastavit libovolné atributy, jako je name, na tvar.
Umožní vám však nastavit vlastní data atributy, jako je data-name.

Načítací program mapy regionu toto obejde tím, že data-name považuje za synonymum pro name. Při načítání kopíruje hodnotu data-name do name pro každý prvek, který ji má.

Takže pokud váš editor nemůže nastavit name, nastavte místo toho data-name, výsledek je stejný.
Totéž platí pro data-fill a data-stroke: jsou to přátelské aliasy, které přijme každý rozumný editor.

Uploading the map to LogMan.io

Jakmile je SVG připraveno:

1. Otevřete Knihovnu a přejděte na Dashboards / Widgets / Maps /.
2. Nahrajte soubor SVG. Použijte popisný, stabilní název souboru. Název souboru je identifikátor, na který se budete odkazovat v grafu, a jeho přejmenování později poškodí všechny grafy, které na něj odkazují.
3. V Prozkoumat vytvořte nový graf typu Mapy regionů.
4. V bočním panelu nastavte:
   • Mapa: název souboru, který jste právě nahráli (například NetworkZones.svg).
   • Skupina podle: pole, jehož hodnoty odpovídají názvům regionů (network.zone v našem příkladu).
5. (Volitelné) Nastavte Barvu v rozsahu a Meze škály přiblížení dle potřeby.

Graf se vykreslí okamžitě. Oblasti, pro které aktuální dotaz vrátil data, jsou zbarveny podle barevné škály grafu; oblasti bez dat zůstávají v neutrální barvě „žádná data“ a zůstávají interaktivní. Při najetí myší se zobrazí klíč oblasti, což je užitečné při ověřování, že vaše atributy name odpovídají datům.

Tipy a nástrahy

Krátká sbírka věcí, které mají tendenci kousat začínající autory:

• Case sensitivity. DMZ ≠ dmz. Pick lowercase or uppercase, and apply it consistently in the parser/enricher that produces the field and in the SVG. The bundled maps use lowercase.
• Stable filenames. The filename in Library / Dashboards / Widgets / Maps / is the map identifier. Renaming or moving the file breaks every chart that references it.
• One name per region, but it can be on multiple elements. If you want both the <rect> and the text label inside it to react to hover, give them the same name. LogMan.io treats them as one logical region.
• Avoid filters, gradients, and clip-paths on data-driven regions. LogMan.io overwrites fill and stroke on the matched element. If the visual you want depends on a <filter> or a <linearGradient> referenced from fill="url(#…)", it will not survive the overwrite.
• Keep chrome out of the data path. Anything that should not be coloured by the query must not have a name attribute. Otherwise an unrelated bucket key with the same value will accidentally light up your section header.
• Multi-valued fields colour multiple regions. If threat.technique.id for one event is ["t1047", "t1059"], both regions receive the same value from that row. This is usually what you want, but be aware of it when designing dashboards on top of multi-valued fields.
• Generate the SVG when the map gets big. Hand-authoring is fine for a handful of regions, but once you reach dozens or more, a small script that emits the <rect> elements (with name for data and data-fill / data-stroke for chrome) from a structured source is far easier to maintain than a manually drawn file.
• Region not lighting up? Check, in order: (1) the name attribute exists and is spelled exactly like the bucket key; (2) the SVG is inside the <g id="layer-regions"> group; (3) the Group by field actually produces the value you expect, verify in the Discover screen first.

Závěr

Mapa regionu je v jádru velmi malá smlouva: každý interaktivní region v SVG nese atribut name, a tento řetězec je tím, proti čemu TeskaLabs LogMan.io porovnává klíče vytvořené dotazem group by. Přidejte data-fill a data-stroke na jakýkoli prvek, který nakreslíte, a stejné SVG funguje pro světlé i tmavé téma bez úprav.

S těmito dvěma nápady v ruce (name pro data, data-fill / data-stroke pro motiv) můžete proměnit téměř jakoukoli strukturovanou doménu na použitelnou, na motivy reagující mapu oblastí v TeskaLabs LogMan.io Explore. Začněte malým ručně kresleným diagramem a přejděte na skript generátoru, když počet oblastí překročí trpělivost editoru SVG.