Generator wykresów SVG
Twórz wykresy SVG bez bibliotek: słupkowe, liniowe, kołowe, obszarowe. Wklej dane CSV lub ręcznie. Eksportuj SVG lub PNG. Bezpłatnie, działa w przeglądarce bez instalacji.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydać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.
Typy wykresów i ich zastosowania
Wykres słupkowy (bar chart): porównanie kategorii (sprzedaż wg miesięcy, wyniki ankiet). Liniowy (line chart): trendy w czasie (kursy walut, temperatury). Kołowy (pie/donut): udział procentowy (struktura przychodów). Obszarowy (area chart): wolumen w czasie (ruch na stronie, transakcje).
Format danych wejściowych
CSV: pierwsza kolumna = etykieta, kolejne = wartości. Separator: przecinek lub średnik. Nagłówek: opcjonalny. Alternatywnie: tabela JSON lub ręczne dodawanie punktów w interfejsie. Maksymalna liczba serii danych: do 10 linii/słupków. Wartości ujemne obsługiwane (dla wykresów słupkowych i liniowych).
Personalizacja wyglądu
Paleta kolorów: gotowe schematy (analogiczne, uzupełniające, monochromatyczne) lub własne HEX. Etykiety osi: font, rozmiar, obrót (dla długich etykiet). Siatka (grid lines): pozioma/pionowa, kolor, odstępy. Legenda: pozycja (top/bottom/right), styl. Tooltips przy hover: wartość + etykieta.
Eksport i integracja
SVG: czysty markup z osadzonymi stylami CSS (viewBox, bez zewnętrznych zależności). PNG: rasteryzacja przez Canvas API – przeznaczone do druku i aplikacji Office. Osadzenie w HTML: 
lub inline (umożliwia animacje CSS/JS). React/Vue: komponent z danymi jako props.
Najczęstsze pytania
Dlaczego SVG zamiast Canvas dla wykresów?
SVG: indeksowany przez Google (tekst w SVG widoczny w DOM), dostępny (aria-label, role="img"), skaluwalny, animowalny przez CSS. Canvas: lepszy dla 10 000+ punktów (wydajność GPU), animacje w czasie rzeczywistym. Do statycznych wykresów dla stron www SVG jest lepszym wyborem.
Czy wykresy SVG są czytelne przez czytniki ekranu?
Tylko z odpowiednimi atrybutami: role="img" na
Jakie biblioteki JS do wykresów warto znać?
Chart.js (canvas, lekki, ~60KB), D3.js (SVG, maksymalna elastyczność, stroma krzywa uczenia), Recharts (React + SVG), Apache ECharts (zaawansowane, duże zestawy danych), Highcharts (komercyjny, bardzo rozbudowany). Narzędzie nie wymaga żadnej z nich.
Czy wykres SVG można animować?
Tak – SVG obsługuje CSS animations i SMIL (deprecated). Najlepsze podejście: CSS transition na elementach
Jak osadzić wykres SVG w PowerPoint lub Word?
Zapisz jako SVG i importuj (Insert → Pictures → SVG w Office 365+). Alternatywnie eksportuj PNG dla starszych wersji Office. SVG w PowerPoint jest edytowalny (można zmieniać kolory i tekst).
Powiązane narzędzia: generator wielokątów SVG, generator fal SVG i konwerter SVG na PNG.