Code
SVG Editörü çiziminizi ve kodunu yan yana gösterir. Kodda değiştirdiğiniz her şey hemen önizlemede görünür - tuvalde taşıdığınız, boyutlandırdığınız veya yeniden renklendirdiğiniz her şey de kodda görünür. Böylece büyük bir grafik programı açmadan simgeleri, logoları, grafikleri ve çizimleri hızla ayarlayabilirsiniz.
Her şey tarayıcınızda çalışır. Dosyalar yüklenmez; kayıt ve reklam yoktur.
Kendi renklerinde etiketler, öznitelikler ve değerler, satır numaraları, Tab ile girintileme, etiketlerin otomatik kapanması ve satır numarasıyla açık bir hata mesajı.
Tıklayın, sürükleyin, tutamaçlarla boyutlandırın, döndürün, çevirin, çoğaltın, öne getirin veya arkaya gönderin - dikdörtgenler, daireler, yollar, çokgenler, metin ve gruplar.
Renk seçiciyle veya değer olarak dolgu ve kontur, opaklık, kontur kalınlığı, kesikli çizgiler, yuvarlak veya kare çizgi uçları.
Çizimin kendi koordinatlarında istediğiniz ızgara aralığı. Şekiller tam olarak çizgilere yaslanır - veya serbestçe taşımak için "Yasla"nın işaretini kaldırın.
Dikdörtgen, elips, daire, çizgi, serbest çizim ve metin - yeni şekiller için seçtiğiniz renklerle.
SVG (yazıldığı gibi, düzenlenmiş veya küçültülmüş), şeffaf arka planlı PNG, JPG, WebP, data URI, Base64, CSS ve React bileşeni.
Her https sayfası (ve localhost) editörü bir <iframe> ve ?embed=1 ile yerleştirebilir - kayıt yok, anahtar yok. Yerleştirildiğinde editör bu metni gizler ve bir Kaydet düğmesi gösterir. Çizimi içeri almanın ve dışarı vermenin iki yolu vardır.
src= bir dosya açar (sunucunuz CORS'a izin vermelidir), webhook= ise "Kaydet"in (Ctrl+S) çizimi o adrese göndermesini sağlar. Authorization: Bearer … başlığı için &token=…, her değişiklikten sonra kaydetmek için &auto ekleyin.
<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, JSON içeren bir POST alır: { editor, event: "save", id, name, content, updated }. Bunu saklayan küçük bir PHP betiği:
<?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}';Editör svgeditor:ready der, sayfanız svgeditor:load ile yanıt verir, editör svgeditor:loaded, gerçek düzenlemelerde svgeditor:change ve kullanıcı kaydettiğinde svgeditor:save bildirir. Sayfanız svgeditor:get (geçerli durum) veya svgeditor:save (Kaydet'e basma) gönderebilir. Kaydetme böylece kendi oturum açma ve oturum sisteminiz üzerinden yapılır.
<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') { // editör hazır: çizimi ona verin
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'; // gerçek bir düzenleme
if (m.type === 'svgeditor:save') { // kullanıcı "Kaydet"e tıkladı
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Kendi sayfanızda bir kaydet düğmesi: yanıt svgeditor:save olarak gelir
function saveNow() { ed.contentWindow.postMessage({ type: 'svgeditor:get' }, ORIGIN); }
</script>Sayfanızın içinde Yapay Zekâ Asistanı: çerçeve içinde de çalışır. iframe üzerinde allow="clipboard-write" ile "İstemi kopyala" panoyu doğrudan kullanır (aksi halde editör eski kopyalama komutuna geri döner veya istemi elle kopyalamanız için gösterir). Yapay zekânın gönderdiği bir bağlantı başka bir web sitesinin içindeki editöre ulaşamaz; bu yüzden editör, yapay zekâya ve kullanıcıya bunun yerine yapay zekânın yanıtının tamamını editöre yapıştırmasını söyler - veya editörü kendi penceresinde açın.
window.open("https://svg.giit.ch/?embed=window", "svgeditor-17") tam editörü kendi penceresinde açar ve aynı mesajları window.opener ile konuşur. Yapay zekâdan gelen bağlantılar ona orada ulaşır. svgeditor:load ayrıca context: { host, title, rules } taşıyabilir - yapay zekâ istemi bu durumda çizimin nereye ait olduğunu söyler ve kurallarınıza uyar - ve hook: { url, token }, yalnızca bu çizim için olan ve asla saklanmayan bir webhook. Kaydedilmemiş değişikliklerle pencereyi kapatmak svgeditor:closing gönderir.
Editöre kendi isteminizi, sitenizde bir adresi ve bu editör oturumu için bir anahtarı verin. Yapay zekâ iletişim kutusu bu durumda sitenize "Bağlı" olduğunu, yapay zekâya ne söylediğinizi ve geçerli çizimi değiştir veya yeni bir çizim oluştur seçimini gösterir; İstemi kopyala hepsini bir araya getirir. Yapay zekâ sonucunu anahtarla sunucunuza gönderir ve sayfanız onu editörde açar - yeni bir çizim ayrı açılır ve kullanıcının tarayıcısında kalır. Editör oturumu başına bir anahtar: editör açık olduğu sürece geçerli kalır ve editör yalnızca anahtarı yokken svgeditor:key-request ile ister. Editör anahtarı asla kendisi göndermez ve asla saklamaz; adres kendi alan adınızda veya onun bir alt alan adında https olmalıdır.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // editör oturumu başına bir anahtar
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);
// svgeditor:loaded içindeki id'yi hatırlayın ve başka id'li change/save/closing mesajlarını yok sayın
// yalnızca editörün anahtarı yokken:
if (m.type === 'svgeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'svgeditor:ai', key: k.key }, ORIGIN); }
// editör açıkken sunucunuza her dakika bildirin; editörü veya sayfayı kapatmak anahtarı geçersiz kılar
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// sunucunuzda bir sonuç var (polling, SSE …): target "current" veya "new" olur
ed.contentWindow.postMessage({ type: 'svgeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - oturum açmış kullanıcının bu editör oturumuna ait anahtar (sayfanız çağırır)
session_start(); // kullanıcının bu çizimi düzenleyebileceğini kontrol edin
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // veya veritabanınızda; ?alive= seen değerini yeniden ayarlar
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - yapay zekâ buraya gönderir (CORS başlıkları yok: yapay zekâlar bunu bir sunucudan çağırır)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // veritabanınız: geçersiz kılınmamış, son 3 dakikada görülmüş
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'); // sayfanız bunu svgeditor:load ile gösterir
echo '{"ok":true}';Anahtarları en az 128 rastgele bitle oluşturun, yalnızca özetlerini (hash) saklayın, her birini oturum açmış kullanıcıya, çizime ve bu editör oturumuna bağlayın, oturum başına bir tane oluşturun, yalnızca sayfanız oturumu açık bildirdiği sürece geçerli tutun ve editör veya sayfa kapandığında geçersiz kılın.
Protokolün tamamı llms.txt dosyasındadır - bir yapay zekâya verin, sisteminiz için bağlantıyı o kursun. LaTeX Editörü latexeditor: önekiyle aynı şekilde çalışır - latex.giit.ch.
Hayır. Editör tamamen tarayıcınızda çalışır. Açtığınız dosyalar ve kodunuz asla bir sunucuya gönderilmez; bir taslak yalnızca tarayıcınızın yerel depolamasında tutulur.
Yalnızca tarayıcınıza. Editör orada istediğiniz sayıda çizim tutar - açmak, yeniden adlandırmak, çoğaltmak, indirmek veya silmek için sol üstteki klasör düğmesine (Çizimlerim) tıklayın. Hiçbir şey yüklenmez; tarayıcınızın site verilerini temizlemek onları siler, bu yüzden saklamak istediklerinizi indirin.
SVG'nizi açın veya yapıştırın, "Dışa aktar"a tıklayın, PNG'yi seçin, bir boyut seçin (1×, 2×, 4× veya kendi boyutunuz) ve "İndir"e tıklayın. Bir renk seçmediğiniz sürece arka plan şeffaf kalır.
Evet. Seçmek için bir şekle tıklayın. Onu sürükleyebilir, küçük karelerle boyutlandırabilir, döndürebilir, çevirebilir ve yeniden renklendirebilirsiniz. Soldaki kod da onunla birlikte değişir.
Izgara, çizimin kendi koordinatlarında kılavuz çizgileri gösterir. Açıkken, taşıdığınız veya çizdiğiniz şekiller tam olarak ızgara çizgilerine yaslanır. Izgarayı görünür tutup şekilleri serbestçe taşımak için "Yasla"nın işaretini kaldırın.
Evet. Dışa aktarmada "React bileşeni (JSX)" seçin. stroke-width gibi öznitelikler strokeWidth, class ise className olur ve bileşen başka props da kabul eder.
Evet, her yapay zekâ - ChatGPT, Claude, Gemini, Copilot veya kodlama aracınızdaki yapay zekâ. "Yapay Zekâ Asistanı"na, ardından "İstemi kopyala"ya tıklayın, istemi yapay zekânıza yapıştırın ve ne çizmesi gerektiğini söyleyin. Yapay zekâ bir bağlantıyla yanıt verir; ona tıklayın, çizim editörünüzde görünür. Açık çizimi değiştirebilir veya diğerlerinizin yanına yenilerini oluşturabilir. Kurulacak bir şey yok ve "Geri al" her değişikliği geri alır.
Evet. Bir iframe ile yerleştirin ve çizimleri postMessage ile alıp verin ya da kaydedilen her sürümü bir webhook ile sunucunuza göndermesine izin verin. Örnekler için Editörü kendi web sitenizde kullanın bölümüne bakın.
Hayır. Editör ücretsizdir; reklam ve kayıt yoktur.