Generator wykresów SVG

Generator wykresów SVG online – bez bibliotek, gotowy kod

Wykresy SVG to wektory – skalują się bez pikselizacji na każdym ekranie i rozdzielczości. Narzędzie generuje czyste pliki SVG dla czterech typów wykresów: słupkowego (bar chart), liniowego (line chart), kołowego (pie/donut chart) i obszarowego (area chart). Dane wprowadzasz ręcznie lub wklejasz CSV. Wynik to gotowy kod SVG do wklejenia w HTML lub plik do pobrania.

Jak działa generator wykresów SVG

Dane wejściowe trafiają najpierw do jednego wspólnego modelu: listy etykiet (pierwsza kolumna CSV albo kolejne punkty dodane ręcznie) oraz zestawu serii liczbowych. Parser rozpoznaje wybrany separator — przecinek lub średnik — i opcjonalny nagłówek, a następnie buduje wiersze tabeli. Ten model jest niezależny od typu wykresu, więc te same dane można obejrzeć jako słupki, linię, obszar albo wykres kołowy bez ponownego wklejania i porządkowania zestawu.

Rysowanie opiera się na układzie współrzędnych zdefiniowanym przez viewBox, a nie na pikselach. Generator wyznacza zakres osi, uwzględniając zero przy wartościach ujemnych, a potem przelicza każdą wartość na pozycję w tym układzie: dla słupków liczy wysokość od podstawy, dla linii i obszaru współrzędne punktów łamanej, dla wykresu kołowego kąty wycinków według zależności kąt = 360° × (wartość / suma wartości). Obrót i rozmiar etykiet osi wynikają z długości tekstu, a odstępy siatki z rozpiętości zakresu.

Wynikiem jest czysty markup SVG z osadzonym wewnątrz blokiem stylów CSS. Osie, linie siatki, słupki, ścieżki i napisy to zwykłe elementy SVG, a kolory oraz grubości linii siedzą w tym samym pliku — nie ma odwołań do zewnętrznych bibliotek ani arkuszy. Eksport PNG to osobny krok: gotowy wektor jest rysowany na płótnie Canvas i zapisywany jako mapa bitowa w wybranej rozdzielczości.

Przykład krok po kroku: wykres kołowy z czterech kategorii

1. Przygotuj dane w formacie CSV z separatorem średnika. Pierwszy wiersz to nagłówek Kategoria;Wartość, kolejne wiersze to pary: A;120, B;80, C;60, D;40.
2. Wklej tekst do pola danych i włącz opcję, że pierwszy wiersz jest nagłówkiem. Dzięki temu Kategoria i Wartość staną się opisem kolumn, a nie punktami danych.
3. Wybierz typ wykresu kołowego (pie albo donut). Generator sumuje wartości: 120 + 80 + 60 + 40 = 300.
4. Obliczone udziały procentowe to 120/300 = 40%, 80/300 = 26,67%, 60/300 = 20% oraz 40/300 = 13,33%. Po zaokrągleniu do dwóch miejsc suma udziałów wynosi 100%.
5. Kąty wycinków wynikają z wzoru kąt = 360° × udział: 144°, 96°, 72° i 48°. Suma kątów to 360°, czyli pełne koło.
6. Ustaw paletę monochromatyczną, legendę na dole i tooltipy pokazujące wartość oraz etykietę, a następnie pobierz plik SVG albo skopiuj kod i wklej go inline w HTML.

Ustawienia, które zmieniają wygląd wykresu

Praktyczne wskazówki

• Zacznij od pytania, nie od typu wykresu. Porównanie kategorii prowadzi do słupków, zmiana w czasie do linii, udział w całości do koła, a wolumen w czasie do obszaru. Typ można zmienić po wklejeniu danych, bez przygotowywania pliku od nowa.
• Utrzymuj jedną serię na kolumnę. Pierwsza kolumna to etykiety, kolejne to wartości. Wpychanie kilku serii do jednej kolumny kończy się tym, że narzędzie widzi jedną linię zamiast kilku.
• Sprawdź separator przed wklejeniem. Jeśli wartości dziesiętne zapisujesz z przecinkiem, wybierz średnik jako separator kolumn — inaczej część po przecinku zostanie potraktowana jako nowa kolumna i rozsypie tabelę.
• Obróć etykiety, zanim skrócisz nazwy. Nachylenie tekstu zwykle wystarcza, by długie nazwy kategorii przestały na siebie nachodzić. Skracanie ich do nieczytelnych skrótów psuje sens wykresu bardziej niż obrót.
• Dobierz sposób osadzenia do celu. Kod wklejony inline pozwala animować elementy wykresu przez CSS lub JS, natomiast odwołanie do pliku obrazu jest prostsze, gdy wykres ma być statyczną ilustracją w artykule.

Ograniczenia i pułapki

• Limit 10 serii danych. Przy większej liczbie linii lub słupków legenda zajmuje więcej miejsca niż obszar rysowania, a kolory przestają być rozróżnialne. Narzędzie tego nie obejdzie automatycznym dzieleniem na kilka wykresów.
• Brak parsowania dat i formatów liczbowych. Etykiety są traktowane jako zwykły tekst, więc kolejność punktów na osi zależy wyłącznie od kolejności wierszy w danych, a nie od rozpoznanej daty. Separatory tysięcy i zapis dziesiętny nie są normalizowane automatycznie.
• Wartości ujemne tylko dla słupków i linii. Wykres kołowy oraz obszarowy nie mają sensownej interpretacji dla udziału poniżej zera, dlatego dane z wartościami ujemnymi trzeba pokazać jako wykres słupkowy lub liniowy.
• PNG to rasteryzacja, nie wektor. Eksport przez Canvas daje mapę bitową, która przy powiększeniu traci ostrość. Jeśli wykres ma być skalowany na różnych ekranach, zostaw go w formacie SVG.

Najczęstsze pytania

Powiązane narzędzia: generator wielokątów SVG, generator fal SVG i konwerter SVG na PNG.