Doğrudan web tarayıcınızda çalışan profesyonel vektörel çizim ve grafik mühendisliği. Ölçeklenebilir Vektör Grafikleri (Scalable Vector Graphics – SVG), modern web arayüzü tasarımı (UI/UX), yüksek çözünürlüklü dijital ikonlar, interaktif veri grafikleri ve bilgisayar destekli imalat (CNC lazer kazıma, Cricut kesim plotterları) için dünya standardıdır. Sabit piksel ızgaraları saklayan raster formatların (JPEG, PNG veya WebP) aksine SVG belgeleri; kartezyen koordinatlar, yön vektörleri, Bézier eğrileri, çizgi kalınlıkları ve renk dolgularını saf matematiksel denklemler halinde kodlar. Bu stüdyo; çok katmanlı yollar çizmek, Catmull-Rom algoritmalarıyla pürüzsüz eğriler üretmek, koordinat noktalarını serbestçe yönetmek ve üretime hazır temiz SVG kodları elde etmek için sıfır bağımlılıklı, hızlı ve güvenli bir çalışma alanı sunar.

1. Vektörel grafiklerin temelleri ve SVG mimarisi

Bir SVG dosyası, W3C standartlarına tam uyumlu bir XML metin belgesidir. Şekiller pikseller yerine geometrik formüllerle tanımlandığından, vektörel çizimler ekranda sonsuz çözünürlük bağımsızlığına sahiptir: 16×16 piksel boyutundaki minik bir web sitesi simgesinden (favicon) devasa bina cephesi reklam panolarına veya Retina ekranlara kadar hiçbir kalite kaybı ya da bulanıklık olmadan kristal netliğinde görüntülenir.

Karmaşık vektörel şekillerin temel yapı taşı <path> etiketidir ve geometrisi d="..." komut dizisiyle tanımlanır:

  • M x y (Move To): Çizim yapmadan sanal kalemi doğrudan (x, y) koordinatına taşır.
  • L x y (Line To): Kalemin bulunduğu konumdan hedef (x, y) noktasına düz bir doğru çizer.
  • C cp1x cp1y, cp2x cp2y, x y (Cubic Bézier): İki bağımsız kontrol noktası (cp1 ve cp2) tarafından yönlendirilen pürüzsüz 3. derece bir Bézier eğrisi oluşturur ve (x, y) noktasında sonlandırır.
  • Z (Close Path): Çizimin son noktasını ilk M başlangıç noktasına düz bir çizgiyle birleştirerek kapalı bir poligon oluşturur; böylece renk dolguları ve degrade geçişleri uygulanabilir.

2. Catmull-Rom ve Cubic Bézier pürüzsüz eğri matematiği

Ekranda serbest elle çizim yaparken, her bir düğüm noktası için Bézier kontrol kollarını manuel olarak ayarlamak oldukça zahmetlidir ve genellikle keskin kırılmalara yol açar. Bu stüdyoda, 1/6 gerilim (tension) katsayısına sahip otomatik Catmull-Rom splinelarını Cubic Bézier eğrilerine dönüştürme algoritması çalışır.

Ardışık dört kılavuz nokta $P_0, P_1, P_2, P_3$ verildiğinde, algoritma $P_1$ ile $P_2$ arasındaki segment için ara kontrol kollarını şu formüllerle hesaplar:

CP1 = P1 + (P2 - P0) / 6
CP2 = P2 - (P3 - P1) / 6

Bu matematiksel formülasyon, tüm birleşim noktalarında $C^1$ birinci türev sürekliliğini garanti eder. Eğri, kullanıcının yerleştirdiği tüm koordinat noktalarından milimetrik hassasiyetle geçerken, yapay sivrilikler içermeyen son derece doğal ve akıcı bir kıvrım kazanır.

3. Çok katmanlı tuval yönetimi ve doğrudan nokta (node) düzenleme

Gerçek çizim projeleri ve logolar çoğunlukla birden fazla bağımsız vektörel parçadan oluşur (örneğin, küçük "i" harfinin noktası ve gövdesi, farklı renkteki dolgu alanları veya karmaşık simgeler). TOOL GIGA stüdyosu güçlü bir katman motoru içerir:

  • Bağımsız Vektörel Katmanlar: Her şekil; kendi çizgi kalınlığı (0–30 px), kontur rengi, dolgu rengi, kapalılık durumu ve eğri yumuşatma ayarlarıyla bağımsız bir katman olarak saklanır.
  • Ekranda Doğrudan Nokta Taşıma: Aktif katmandaki dairesel kontrol noktalarını fare veya dokunmatik ekranla (PointerEvents) tutup sürüklediğinizde eğri anında yeniden çizilir.
  • Sağ Tıkla Nokta Silme: Herhangi bir koordinat noktasına sağ tıkladığınızda nokta silinir ve çizgi pürüzsüz şekilde yeniden bağlanır.
  • Hızlı Katman Seçimi: Tuvaldeki herhangi bir çizilmiş şekle tıkladığınızda, yan panel anında o şeklin katmanına ve ayarlarına odaklanır.

4. Hassas piksel kırpma (Crop) ve viewBox (0,0) normalizasyon mühendisliği

Web simge setleri veya mobil uygulamalar için SVG dışa aktarırken, çizimin etrafındaki gereksiz boşluklar hizalamayı bozar. Gelişmiş kırpma ve viewBox normalizasyon motorumuz bu sorunu kökten çözer:

Genişliği $W$, yüksekliği $H$ ve sol üst köşesi $(X_{\text{kırpma}}, Y_{\text{kırpma}})$ olan bir kırpma alanı seçildiğinde, sistem tüm katmanlardaki tüm koordinatları otomatik olarak dönüştürür:

X_yeni = X_eski - X_kırpma
Y_yeni = Y_eski - Y_kırpma

Kök SVG öğesinin viewBox değeri anında 0 0 W H olarak güncellenir ve çizimin başlangıç noktası $(0, 0)$ koordinatına sıfırlanır. Standart ikon boyutlarını (100×100, 200×200, 300×300, 500×500 px) tek tıkla seçebilir veya özel piksel değerleri girebilirsiniz.

5. Güvenli SVG içe aktarma ve XML doğrulama

SVG dosyaları XML metin formatında olduğundan, dış kaynaklı dosyaların yüklenmesi durumunda kötü niyetli <script> veya <iframe> etiketleri (XSS saldırıları) güvenlik riski oluşturabilir. İçe aktarma modülümüz istemci tarafında sıkı bir temizleme ve ayrıştırma süreci yürütür:

  • XML Sözdizimi Analizi: Dosya tarayıcının yerel DOMParser motoruyla incelenir; hatalı veya bozuk dosyalar anlaşılır bildirimlerle reddedilir.
  • Güvenlik Filtresi: Gömülü komut dosyaları (scripts), yabancı nesneler ve iframe öğeleri anında temizlenir.
  • Raster ve Vektör Ayrımı: Yüklenen SVG yalnızca gömülü bir piksel resmi (<image>) içeriyorsa, sistem kullanıcısını uyarır.
  • Geometri Ayrıştırma: Vektörel etiketler (<path>, <rect>, <circle>, <polygon>, <line>) doğrudan düzenlenebilir etkileşimli katmanlara dönüştürülür.

6. Pratik kullanım alanları: Web UI, Cricut ve lazer kazıma

Bu platformda üretilen temiz ve optimize edilmiş SVG kodu, geniş bir tasarım ve üretim ekosistemiyle %100 uyumludur:

  • Modern Web Geliştirme: Ekstra HTTP isteklerine yol açmadan doğrudan HTML, React (JSX), Vue veya Svelte şablonlarına yerleştirilebilir.
  • Cricut ve Silhouette Kesim Plotterları: Kesişmeyen ve pürüzsüz vektör hatları sayesinde folyo, kağıt ve karton kesimlerinde bıçak takılmalarını engeller.
  • CO2 ve Diyot CNC Lazer Kazıma: Tanımlı çizgi kalınlıklarına sahip kapalı yollar; LightBurn ve LaserGRBL gibi lazer yazılımlarına sorunsuz aktarılır.
  • Logo ve Amblem Tasarımı: Geometrik formlar ve tipografik simgeler için hızlı eskiz ve anında vektörel indirme imkanı sunar.

7. Üretime hazır temiz SVG dışa aktarma önerileri

Grafiklerinizin dosya boyutunu küçük tutmak ve en yüksek hızda yüklenmesini sağlamak için:

  • Düğüm Sayısını Minimumda Tutun: Pürüzsüz Bézier eğrileri sayesinde karmaşık şekilleri az sayıda noktayla ifade edebilir, 1–3 KB gibi ultra hafif dosyalar elde edebilirsiniz.
  • Yol Kapalılığını Kontrol Edin: İçi dolu renkle boyanacak şekillerde "Kapalı Şekil" seçeneğinin açık olduğundan emin olun.
  • Çift Yönlü Canlı Kod Düzenleme: SVG kod kutusundaki koordinatları veya renk kodlarını elle değiştirdiğinizde tuval anında güncellenir.

8. Vektörün Ontolojisi: Pierre Bézier, Descartes ve Dijital Ölümsüzlük Arayışı

Tarihsel bir perspektiften bakıldığında, insanın kusursuz bir eğriyi düz bir yüzeye hapsetme çabası, sonsuzlukla giriştiği trajikomik bir düelloya benzer. 17. yüzyılda René Descartes geometriyi cebirsel koordinatlarla buluşturana ve 1960'larda Fransız mühendis Pierre Bézier, Renault fabrikalarında otomobil gövdelerini tasarlarken eğilip bükülen tahta çıtaları (orijinal adıyla spline cetvellerini) parametrik polinom formülleriyle değiştirene kadar, çizerler fiziksel maddenin kusurlarına mahkûmdu. Ne var ki modern dijital çağ kendi paradoksunu yarattı: Sonsuz evreni 8-bitlik sonlu piksel ızgaralarına (raster) gururla kilitledik; ardından onlarca yıldır 50×50 piksellik bir JPEG kalıntısını devasa reklam panolarına büyütmeye çalışırken neden bulanık bir mozaik çorbasına dönüştüğüne şaşırıp duruyoruz.

Vektörel grafikler, bu dijital entropinin ortasında saf Platonik idealar (eidos) evreni gibi parıldar. SVG dünyasında bir daire, asla rastgele renkli piksellerden ibaret bir palimpsest değildir; o, aşkın bir matematiksel kuraldır. Bézier kontrol noktalarını tuvalde hareket ettirirken ya da SVG kodunu düzenlerken sıradan bir piksel boyacısı değil, geometrik bir demiurgos gibi davranırsınız: $P_1$ koordinatı, minik bir akıllı saat ekranında da gösterilse, Ay yüzeyine de yansıtılsa teleolojik olarak $P_2$'ye kusursuzca uzanır. Vektör, piksel miyopluğuna ve dijital çağın görsel gürültüsüne karşı üretilmiş en radikal panzehirdir.