Code
Edytor SVG pokazuje rysunek i jego kod obok siebie. Wszystko, co zmienisz w kodzie, od razu pojawia się w podglądzie - a wszystko, co przesuniesz, przeskalujesz lub przekolorujesz na płótnie, pojawia się w kodzie. Dzięki temu szybko poprawisz ikony, logo, wykresy i ilustracje bez otwierania dużego programu graficznego.
Wszystko działa w przeglądarce. Pliki nie są nigdzie wysyłane, nie ma rejestracji ani reklam.
Znaczniki, atrybuty i wartości we własnych kolorach, numery wierszy, wcięcia klawiszem Tab, automatyczne zamykanie znaczników i przejrzysty komunikat o błędzie z numerem wiersza.
Klikaj, przeciągaj, zmieniaj rozmiar uchwytami, obracaj, odbijaj, duplikuj, przesuwaj do przodu lub do tyłu - prostokąty, koła, ścieżki, wielokąty, tekst i grupy.
Wypełnienie i kontur z próbnikiem kolorów lub jako wartość, krycie, grubość konturu, linie kreskowane, zaokrąglone lub kwadratowe końce linii.
Dowolny odstęp siatki we własnych współrzędnych rysunku. Kształty przyciągają się dokładnie do linii - albo odznacz „Przyciąganie”, aby przesuwać je swobodnie.
Prostokąt, elipsa, koło, linia, rysowanie odręczne i tekst - z wybranymi kolorami dla nowych kształtów.
SVG (bez zmian, uporządkowany lub zmniejszony), PNG z przezroczystym tłem, JPG, WebP, data URI, Base64, CSS i komponent React.
Każda strona https (i localhost) może osadzić edytor za pomocą <iframe> i ?embed=1 - bez rejestracji, bez klucza. Po osadzeniu edytor ukrywa ten tekst i pokazuje przycisk Zapisz. Rysunek można przekazywać do edytora i z niego na dwa sposoby.
src= otwiera plik (twój serwer musi zezwalać na CORS), webhook= sprawia, że „Zapisz” (Ctrl+S) wysyła rysunek pod ten adres. Dodaj &token=…, aby wysyłać nagłówek Authorization: Bearer …, i &auto, aby zapisywać po każdej zmianie.
<iframe src="https://svg.giit.ch/?embed=1&src=https://your-site.com/docs/logo.svg&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Webhook otrzymuje żądanie POST z JSON { editor, event: "save", id, name, content, updated }. Mały skrypt PHP, który go zapisuje:
<?php
header('Access-Control-Allow-Origin: https://svg.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/docs/$name.svg", $d['content']);
echo '{"ok":true}';Edytor zgłasza svgeditor:ready, twoja strona odpowiada svgeditor:load, edytor zgłasza svgeditor:loaded, svgeditor:change przy rzeczywistych zmianach i svgeditor:save, gdy użytkownik zapisuje. Twoja strona może wysłać svgeditor:get (bieżący stan) lub svgeditor:save (naciśnięcie Zapisz). Zapis odbywa się wtedy przez twoje własne logowanie i sesję.
<iframe id="ed" src="https://svg.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://svg.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'svgeditor:ready') { // edytor jest gotowy: przekaż mu rysunek
ed.contentWindow.postMessage({
type: 'svgeditor:load',
name: 'Logo',
content: await (await fetch('/docs/logo.svg')).text(),
}, ORIGIN);
}
if (m.type === 'svgeditor:change') document.title = '● not saved'; // rzeczywista zmiana
if (m.type === 'svgeditor:save') { // użytkownik kliknął „Zapisz”
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Przycisk zapisu na twojej stronie: odpowiedź przychodzi jako svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>Asystent AI na twojej stronie: działa także w ramce. Z allow="clipboard-write" w iframe „Kopiuj prompt” korzysta bezpośrednio ze schowka (w przeciwnym razie edytor używa starego polecenia kopiowania albo pokazuje prompt do ręcznego skopiowania). Link wysłany przez AI nie dotrze do edytora osadzonego w innej stronie, więc edytor prosi AI i użytkownika o wklejenie całej odpowiedzi AI do edytora - albo o otwarcie edytora we własnym oknie.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") otwiera pełny edytor we własnym oknie, który wymienia te same wiadomości z window.opener. Linki od AI docierają do niego tam. svgeditor:load może też zawierać context: { host, title, rules } - prompt dla AI mówi wtedy, gdzie należy rysunek, i stosuje twoje zasady - oraz hook: { url, token }, webhook tylko dla tego rysunku, który nigdy nie jest zapisywany. Zamknięcie okna z niezapisanymi zmianami wysyła svgeditor:closing.
Przekaż edytorowi własny prompt, adres w twojej witrynie i klucz dla tej sesji edytora. Okno AI pokazuje wtedy „Połączono z” twoją witryną, to, co przekazujesz AI, oraz wybór: zmienić bieżący rysunek lub utworzyć nowy; Kopiuj prompt łączy to wszystko. AI wysyła swój wynik z kluczem na twój serwer, a twoja strona otwiera go w edytorze - nowy rysunek otwiera się osobno i zostaje w przeglądarce użytkownika. Jeden klucz na sesję edytora: pozostaje ważny, dopóki edytor jest otwarty, a edytor prosi o niego przez svgeditor:key-request tylko wtedy, gdy go nie ma. Edytor nigdy sam nie wysyła klucza i nigdy go nie zapisuje; adres musi być adresem https na twoim własnym hoście lub jego subdomenie.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // jeden klucz na sesję edytora
const k = await key();
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// zapamiętaj id z svgeditor:loaded i ignoruj change/save/closing z innym id
// tylko gdy edytor nie ma klucza:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// dopóki edytor jest otwarty, informuj serwer co minutę; zamknięcie edytora lub strony unieważnia klucz
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// twój serwer ma wynik (polling, SSE …): target to "current" lub "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - klucz tej sesji edytora zalogowanego użytkownika (wywołuje go twoja strona)
session_start(); // sprawdź, czy użytkownik może edytować ten rysunek
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // lub w twojej bazie danych; ?alive= ponownie ustawia seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - tu AI wysyła wynik (bez nagłówków CORS: AI wywołują go z serwera)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // twoja baza danych: nieunieważniony, widziany w ciągu ostatnich 3 minut
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // twoja strona pokazuje go przez svgeditor:load
echo '{"ok":true}';Twórz klucze z co najmniej 128 losowymi bitami, przechowuj tylko ich hash, wiąż każdy z zalogowanym użytkownikiem, rysunkiem i tą sesją edytora, twórz jeden na sesję, utrzymuj go ważnym tylko wtedy, gdy twoja strona zgłasza sesję jako otwartą, i unieważniaj go, gdy edytor lub strona zostaną zamknięte.
Cały protokół jest opisany w llms.txt - przekaż go AI, a zbuduje połączenie dla twojego systemu. Edytor LaTeX działa tak samo z prefiksem latexeditor: - latex.giit.ch.
Nie. Edytor działa w całości w przeglądarce. Otwierane pliki i twój kod nigdy nie są wysyłane na serwer; wersja robocza jest przechowywana tylko w pamięci lokalnej przeglądarki.
Tylko w przeglądarce. Edytor przechowuje tam dowolną liczbę rysunków - kliknij przycisk folderu w lewym górnym rogu (Moje rysunki), aby je otwierać, zmieniać ich nazwy, duplikować, pobierać lub usuwać. Nic nie jest wysyłane; wyczyszczenie danych witryny w przeglądarce je usuwa, więc pobierz te, które chcesz zachować.
Otwórz lub wklej SVG, kliknij „Eksportuj”, wybierz PNG, ustaw rozmiar (1×, 2×, 4× lub własny) i kliknij „Pobierz”. Tło pozostaje przezroczyste, chyba że wybierzesz kolor.
Tak. Kliknij kształt, aby go zaznaczyć. Możesz go przeciągać, zmieniać jego rozmiar małymi kwadratami, obracać, odbijać i zmieniać kolory. Kod po lewej zmienia się razem z nim.
Siatka pokazuje linie pomocnicze we własnych współrzędnych rysunku. Gdy jest włączona, przesuwane lub rysowane kształty przyciągają się dokładnie do jej linii. Odznacz „Przyciąganie”, aby siatka pozostała widoczna, a kształty poruszały się swobodnie.
Tak. Wybierz w eksporcie „Komponent React (JSX)”. Atrybuty takie jak stroke-width stają się strokeWidth, class staje się className, a komponent przyjmuje dodatkowe props.
Tak, każda AI - ChatGPT, Claude, Gemini, Copilot lub AI w twoim narzędziu programistycznym. Kliknij „Asystent AI”, potem „Kopiuj prompt”, wklej go do swojej AI i napisz, co ma narysować. AI odpowiada linkiem; kliknij go, a rysunek pojawi się w edytorze. Może zmienić otwarty rysunek albo utworzyć nowe obok pozostałych. Nie trzeba niczego instalować, a „Cofnij” cofa każdą zmianę.
Tak. Osadź go w iframe i wymieniaj rysunki przez postMessage albo pozwól mu wysyłać każdą zapisaną wersję na twój serwer przez webhook. Przykłady znajdziesz w sekcji Edytor na własnej stronie.
Nie. Edytor jest darmowy, bez reklam i bez rejestracji.