Code
Редактор SVG показує ваш малюнок і його код поруч. Усе, що ви змінюєте в коді, одразу з’являється в перегляді, - а все, що ви переміщуєте, масштабуєте чи перефарбовуєте на полотні, з’являється в коді. Так можна швидко підправити іконки, логотипи, діаграми й ілюстрації, не відкриваючи великої графічної програми.
Усе працює у вашому браузері. Файли нікуди не вивантажуються, немає ні реєстрації, ні реклами.
Теги, атрибути й значення власними кольорами, номери рядків, відступи через Tab, автоматичне закриття тегів і зрозуміле повідомлення про помилку з номером рядка.
Клацайте, перетягуйте, змінюйте розмір за маркери, повертайте, віддзеркалюйте, дублюйте, переносьте вперед або назад - прямокутники, кола, контури, багатокутники, текст і групи.
Заливка й контур через палітру або як значення, непрозорість, товщина контуру, штрихові лінії, круглі або квадратні кінці ліній.
Будь-який крок сітки у власних координатах малюнка. Фігури точно прив’язуються до ліній - або зніміть позначку «Прив’язка», щоб рухати їх вільно.
Прямокутник, еліпс, коло, лінія, від руки й текст - з вибраними вами кольорами для нових фігур.
SVG (як написано, упорядкований або стиснутий), PNG із прозорим тлом, JPG, WebP, data URI, Base64, CSS і компонент React.
Будь-яка сторінка https (і localhost) може вбудувати редактор за допомогою <iframe> і ?embed=1 - без реєстрації, без ключа. У вбудованому вигляді редактор приховує цей текст і показує кнопку «Зберегти». Передати малюнок у редактор і отримати його назад можна двома способами.
src= відкриває файл (ваш сервер має дозволяти CORS), webhook= змушує «Зберегти» (Ctrl+S) надсилати малюнок на цю адресу. Додайте &token=… для заголовка Authorization: Bearer … і &auto, щоб зберігати після кожної зміни.
<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>Вебхук отримує POST із JSON { editor, event: "save", id, name, content, updated }. Невеликий PHP-скрипт, який його зберігає:
<?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}';Редактор повідомляє svgeditor:ready, ваша сторінка відповідає svgeditor:load, редактор повідомляє svgeditor:loaded, svgeditor:change при справжніх змінах і svgeditor:save, коли користувач зберігає. Ваша сторінка може надіслати svgeditor:get (поточний стан) або svgeditor:save (натиснути «Зберегти»). Тоді збереження проходить через ваш власний вхід і сеанс.
<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') { // редактор готовий: передайте йому малюнок
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'; // справжня зміна
if (m.type === 'svgeditor:save') { // користувач натиснув «Зберегти»
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Кнопка збереження на вашій сторінці: відповідь надходить як svgeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>ШІ-асистент усередині вашої сторінки: він працює і у фреймі. З allow="clipboard-write" на iframe «Копіювати промпт» використовує буфер обміну напряму (інакше редактор вдається до старої команди копіювання або показує промпт, щоб скопіювати його вручну). Посилання, яке надсилає ШІ, не може дістатися до редактора всередині іншого сайту, тому редактор просить ШІ та користувача натомість вставити всю відповідь ШІ в редактор - або відкрити редактор в окремому вікні.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") відкриває повний редактор в окремому вікні, і він обмінюється тими самими повідомленнями з window.opener. Посилання від ШІ доходять до нього туди. svgeditor:load може також містити context: { host, title, rules } - тоді промпт для ШІ каже, де розміщено малюнок, і дотримується ваших правил - і hook: { url, token }, вебхук лише для цього малюнка, який ніколи не зберігається. Якщо закрити вікно з незбереженими змінами, надсилається svgeditor:closing.
Передайте редактору власний промпт, адресу на вашому сайті та ключ для цього сеансу редактора. Тоді діалог ШІ показує «Під’єднано до» вашого сайту, що ви повідомляєте ШІ, і вибір змінити поточний малюнок або створити новий; Копіювати промпт збирає все разом. ШІ надсилає свій результат із ключем на ваш сервер, а ваша сторінка відкриває його в редакторі - новий малюнок відкривається окремо й залишається в браузері користувача. Один ключ на сеанс редактора: він дійсний, поки редактор відкрито, і лише поки ключа немає, редактор запитує його через svgeditor:key-request. Редактор ніколи сам не надсилає ключ і ніколи його не зберігає; адреса має бути https на вашому власному хості або його піддомені.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // один ключ на сеанс редактора
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);
// запам’ятайте id з svgeditor:loaded та ігноруйте change/save/closing з іншим id
// лише поки редактор не має ключа:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// поки редактор відкрито, повідомляйте свій сервер щохвилини; закриття редактора або сторінки анулює ключ
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// ваш сервер має результат (polling, SSE …): target - "current" або "new"
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - ключ цього сеансу редактора для користувача, що увійшов (його викликає ваша сторінка)
session_start(); // перевірте, чи може користувач редагувати цей малюнок
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // або у вашій базі даних; ?alive= знову встановлює seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - ШІ надсилає сюди (без заголовків CORS: ШІ викликають його із сервера)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // ваша база даних: не анульований, бачений за останні 3 хвилини
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'); // ваша сторінка показує його через svgeditor:load
echo '{"ok":true}';Створюйте ключі щонайменше зі 128 випадкових бітів, зберігайте лише їхній хеш, прив’язуйте кожен до користувача, що увійшов, до малюнка й до цього сеансу редактора, створюйте один на сеанс, тримайте його дійсним лише поки ваша сторінка повідомляє, що сеанс відкритий, і анулюйте його, коли редактор або сторінка закриваються.
Увесь протокол - у llms.txt: дайте його ШІ, і він побудує під’єднання для вашої системи. Редактор LaTeX працює так само з префіксом latexeditor: - latex.giit.ch.
Ні. Редактор повністю працює у вашому браузері. Відкриті файли й ваш код ніколи не надсилаються на сервер; чернетка зберігається лише в локальному сховищі вашого браузера.
Лише у вашому браузері. Редактор зберігає там скільки завгодно малюнків - натисніть кнопку з текою вгорі ліворуч («Мої малюнки»), щоб відкривати, перейменовувати, дублювати, завантажувати або видаляти їх. Нічого не вивантажується; очищення даних сайту в браузері видаляє їх, тому завантажте ті, які хочете зберегти.
Відкрийте або вставте свій SVG, натисніть «Експорт», виберіть PNG, задайте розмір (1×, 2×, 4× або власний) і натисніть «Завантажити». Тло залишається прозорим, якщо ви не виберете колір.
Так. Клацніть фігуру, щоб виділити її. Її можна перетягувати, змінювати розмір за маленькі квадрати, повертати, віддзеркалювати й перефарбовувати. Код ліворуч змінюється разом із нею.
Сітка показує напрямні лінії у власних координатах малюнка. Коли її ввімкнено, фігури, які ви переміщуєте або малюєте, точно прив’язуються до ліній сітки. Зніміть позначку «Прив’язка», щоб сітка залишалася видимою, а фігури рухалися вільно.
Так. Виберіть в експорті «Компонент React (JSX)». Атрибути на кшталт stroke-width стають strokeWidth, class стає className, а компонент приймає додаткові props.
Так, будь-який ШІ - ChatGPT, Claude, Gemini, Copilot або ШІ у вашому інструменті для програмування. Натисніть «ШІ-асистент», потім «Копіювати промпт», вставте його у свій ШІ та скажіть, що треба намалювати. ШІ відповідає посиланням; клацніть його, і малюнок з’явиться у вашому редакторі. ШІ може змінити відкритий малюнок або створити нові поруч з іншими вашими. Нічого не треба встановлювати, а «Скасувати» повертає кожну зміну назад.
Так. Вбудуйте його через iframe й обмінюйтеся малюнками через postMessage або нехай він надсилає кожну збережену версію на ваш сервер через вебхук. Приклади - у розділі Редактор на вашому сайті.
Ні. Редактор безкоштовний, без реклами й без реєстрації.