Inkscape ile Vektör Grafik

1. Inkscape Nedir? Vektör vs Raster 🖊️

Inkscape, açık kaynaklı ve tamamen ücretsiz bir vektör grafik (vector graphics) düzenleme yazılımıdır. Adobe Illustrator'a en güçlü ücretsiz alternatif olarak kabul edilir. Windows, macOS ve Linux üzerinde çalışır. Yerel dosya formatı SVG (Scalable Vector Graphics — Ölçeklenebilir Vektör Grafikleri) açık standardıdır.

2. SVG Nedir? — Kod Olarak Grafik 📐

SVG (Scalable Vector Graphics — Ölçeklenebilir Vektör Grafikleri), W3C tarafından geliştirilen XML tabanlı açık bir grafik standardıdır. Bir SVG dosyası aslında metin dosyasıdır — herhangi bir metin editörüyle açabilir, okuyabilir ve düzenleyebilirsiniz!

İşte basit bir SVG dosyasının içeriği:

<svg viewBox="0 0 200 150"
     xmlns="http://www.w3.org/2000/svg">

  <!-- Dikdörtgen (Rectangle) -->
  <rect x="10" y="10"
        width="80" height="60"
        fill="#3498db" rx="8"/>

  <!-- Daire (Circle) -->
  <circle cx="150" cy="40" r="30"
          fill="#e74c3c"/>

  <!-- Çizgi (Line) -->
  <line x1="10" y1="120"
        x2="190" y2="120"
        stroke="#2ecc71"
        stroke-width="3"/>

  <!-- Metin (Text) -->
  <text x="100" y="145"
        text-anchor="middle"
        font-size="12"
        fill="#9b59b6">
    Merhaba SVG!
  </text>
</svg>

🏗️ SVG'nin Temel Yapı Taşları

🔄 <path> Elemanı — SVG'nin Kalbi

<path> elemanı, SVG'nin en güçlü ve en esnek yapı taşıdır. d (data) niteliği bir dizi komuttan oluşur. Inkscape'te çizdiğiniz her eğri, sonuçta bir <path> elemanına dönüşür.

💡 Büyük harf (M, L, C) = mutlak (absolute) koordinat. Küçük harf (m, l, c) = göreceli (relative) koordinat — mevcut noktaya göre yer değiştirme.

<path d="
  M 50 90        <!-- Başlangıç: alt uç -->
  C 25 70, 0 50, 10 30   <!-- Sol eğri -->
  C 20 10, 40 10, 50 30  <!-- Sol tepe -->
  C 60 10, 80 10, 90 30  <!-- Sağ tepe -->
  C 100 50, 75 70, 50 90 <!-- Sağ eğri -->
  Z                      <!-- Kapat -->
"
fill="#e74c3c"
stroke="#c0392b"
stroke-width="1"/>

3. Inkscape Terimleri Sözlüğü (Jargon) 📖

Inkscape (ve genel olarak vektör grafik yazılımları) birçok İngilizce terim kullanır. Bu terimleri anlamak, hem Inkscape'i etkin kullanmak hem de diğer vektör araçlarına (Adobe Illustrator, Figma, Affinity Designer) geçiş yapmak için çok önemlidir.

🖥️ Arayüz Terimleri

📐 Nesne ve Çizim Terimleri

🔗 Düğüm Türleri

4. Inkscape Arayüzü 🖥️

Inkscape arayüzünün temel alanları (Wide Screen görünümü)

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Inkscape'in arayüzü şu ana bölümlerden oluşur:

🧭 Tuval Gezinme (Canvas Navigation)

5. Temel Şekiller (Shapes) 🔷

Inkscape'te dört temel şekil aracı bulunur. Her biri parametrik nesneler oluşturur — yani çizildikten sonra tutamaçlarla (handle) şekil düzenlenebilir, yola (path) dönüştürülmedikçe orijinal parametreler korunur.

Şekil araçları: Dikdörtgen, Yıldız/Çokgen, Elips, Spiral

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

🟦 Dikdörtgen Aracı (Rectangle Tool) — R

En yaygın kullanılan şekil. Tuval üzerine sürükleyerek oluşturulur.

• Çizim kısayolları: Ctrl = kare veya tam oran; Shift = merkezden çiz
• Tutamaçlar: 2 adet yuvarlama tutamacı (rounding handle — sağ üst köşe), 2 adet boyutlandırma tutamacı (resize handle — sol üst ve sağ alt)
• Köşe yuvarlama: Yuvarlama tutamacını aşağı sürükleyin → dairesel köşeler. İkinci tutamacı hareket ettirin → eliptik köşeler. Ctrl+sürükleme = dairesel kalır. Shift+tıklama = yuvarlama sıfırlanır.
• Rx / Ry: Araç Kontrol Çubuğu'nda köşe yarıçaplarını sayısal olarak girebilirsiniz.

🔵 Elips Aracı (Ellipse Tool) — E

Elips, daire, yay (arc) ve dilim (segment) oluşturur.

• Çizim kısayolları: Ctrl = daire; Shift = merkezden çiz
• Tutamaçlar: 2 adet boyutlandırma tutamacı + 2 adet "açık tutamaç" (üst üste biner)
• Segment (dilim): Açık tutamacı elipsin dışına doğru sürükleyin → pasta dilimi şekli
• Yay (arc): Açık tutamacı elipsin içine doğru sürükleyin → açık yay (stroke uçları birleşmez)
• Ctrl+sürükleme = 15° adımlarla yakalama. Shift+tıklama = tam elipse dönüş.

⭐ Yıldız / Çokgen Aracı (Star Tool) — *

Inkscape'in en karmaşık ve yaratıcı şekil aracı. İki mod sunar: yıldız ve çokgen (polygon).

• Köşe sayısı (Corners): Araç Kontrol Çubuğu'nda: yıldız için 2–1024, çokgen için 3–1024
• Yıldız modu: 2 tutamaç — tepe tutamacı (vertex → ışın uzunluğu, döndürme) ve içbükey tutamaç (concave → içe çökme, eğrilik)
• Spoke ratio (Işın oranı): İçbükey/tepe tutamaç mesafe oranı. Kontrol çubuğunda ayarlanabilir.
• Yuvarlama (Rounding): Shift+sürükleme (teğetsel). 0.2–0.4 arası normal yuvarlama, daha yüksek değerler ilginç desenler oluşturur.
• Rastgeleleştirme (Randomization): Alt+sürükleme. Her konum benzersiz bir rastgele sonuç verir. Alt+tıklama = sıfırla.

🌀 Spiral Aracı (Spiral Tool) — I

Merkezden dışarı doğru spiral çizer.

• Dış tutamaç: Sürükleme = sarma/açma. Shift+sürükleme = ölçekleme+döndürme. Alt+sürükleme = yarıçapı kilitleyerek sarma.
• İç tutamaç: Alt+dikey sürükleme = yakınsama/ıraksama. Shift+tıklama = merkeze taşı.
• Divergence (Sapma): 1 = düzgün; <1 = çevrede yoğun; >1 = merkezde yoğun.
• Maks. tur: 1024'e kadar. Noktalı kontur stili ile moiré desenleri oluşturulabilir.

Elips, dikdörtgen ve yıldız — tutamaçlar (handle) görünür durumda

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

6. Seçme ve Dönüştürme (Select & Transform) ↕️

Seçim Aracı (Selector Tool) — kısayol: S veya F1 — Inkscape'te en çok kullanılan araçtır. Nesneleri seçmek, taşımak, ölçeklemek, döndürmek ve eğmek için kullanılır.

🖱️ Seçme Yöntemleri

↔️ Taşıma, Ölçekleme, Döndürme

Bir nesne seçildiğinde etrafında 8 adet ok tutamacı belirir:

⌨️ Klavye ile Dönüşüm

🔗 Gruplama (Grouping)

Birden fazla nesneyi seçip Ctrl+G ile grup yapın — artık tek birim gibi taşınır ve dönüştürülür. Ctrl+U ile grubu çözün (Ungroup). Ctrl+tıklama veya çift tıklama ile grubun içine "girerek" tek bir öğeyi seçebilirsiniz.

📐 Hizalama ve Dağıtma (Align & Distribute)

Object → Align and Distribute... veya Shift+Ctrl+A diyaloğu açılır. Seçili nesneleri yatay/dikey olarak ortalayabilir, eşit aralıklı dağıtabilirsiniz. Referans noktası olarak "İlk seçilen", "Son seçilen", "En büyük nesne" veya "Sayfa" seçilebilir.

7. Dolgu ve Kontur (Fill & Stroke) 🎨

Her Inkscape nesnesinin iki görsel bileşeni vardır: Dolgu (Fill) — iç alan; ve Kontur (Stroke) — dış kenar çizgisi. Bunları kontrol eden ana diyalog: Object → Fill and Stroke... veya Shift+Ctrl+F.

Fill and Stroke diyaloğu — Dolgu (Fill) sekmesi ile düz renk seçimi

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

🖌️ Dolgu Türleri (Paint Types)

✏️ Kontur Stili (Stroke Style)

Kontur stili sekmesi — genişlik, çizgi deseni, köşe ve uç tipi ayarları

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Kontur stili sekmesinde ayarlayabileceğiniz özellikler:

• Width (Genişlik): Kontur kalınlığı (px, mm, pt, vb. birimlerle)
• Dash Pattern (Çizgi Deseni): Düz, kesikli, noktalı, kesik-noktalı gibi çizgi stilleri
• Join (Köşe Tipi): Miter (sivri), Round (yuvarlak), Bevel (pahlanmış) — iki çizginin köşede buluşma şekli
• Cap (Uç Tipi): Butt (düz), Round (yuvarlak), Square (kare) — açık yolların uç biçimi
• Markers (İşaretçiler): Yolun başına, ortasına veya sonuna ok ucu, daire, kare gibi semboller ekler

🎯 Hızlı Renk Değiştirme

• Renk paleti (altta): Nesne seçili → renk örneğine tıkla = dolgu değişir. Shift+tıkla = kontur değişir.
• Damlalık (Dropper) — D: Tuval üzerindeki herhangi bir renkten örnek alır.
• Renk tekerleği: Fill & Stroke diyaloğu → HSL sekmesi → "Wheel" renk seçici ile sezgisel renk seçimi.
• Alpha (Saydamlık): Her renk seçicide en alttaki A kaydırıcısı = saydamlık (0 = şeffaf, 255 = opak). Diyaloğun altındaki Opacity ise tüm nesne saydamlığı.

8. Renkler ve Degradeler (Colors & Gradients) 🌈

Renkler, vektör grafiklerin görsel etkisinin en önemli unsurudur. Inkscape'te renk seçimi için çeşitli yöntemler kullanılır:

🎨 Renk Seçiciler (Color Pickers)

Fill & Stroke diyaloğundaki renk seçici sekmeleri:

• RGB: Kırmızı (Red), Yeşil (Green), Mavi (Blue) — 0–255 arası değerler. Web'de en yaygın.
• HSL: Renk Tonu (Hue), Doygunluk (Saturation), Parlaklık (Lightness) — sezgisel renk seçimi için ideal.
• CMYK: Baskı renk modeli — Cyan, Magenta, Yellow, Key (siyah). Baskı için.
• Wheel: HSL'nin tekerlek versiyonu — tonu daire üzerinden, doygunluk ve parlaklığı üçgenden seçersiniz.
• Hex kodu: Alt kısımdaki RRGGBBAA giriş kutusu — web renk kodlarını doğrudan yapıştırabilirsiniz.

🔀 Degradé Aracı (Gradient Tool) — G

Doğrusal degradé — kare tutamaç (başlangıç) ve daire tutamaç (bitiş) mavi çizgiyle bağlı

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Dairesel (radial) degradé — merkez kare, iki kolda daire tutamaçları

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

9. Yollar ve Düğümler (Paths & Nodes) ✏️

Yol (Path), vektör grafiğin temel yapı taşıdır — düz çizgiler ve/veya Bézier eğrilerinden oluşan bir seridir. Inkscape'te çizdiğiniz şekiller sonuçta birer yola dönüştürülebilir (Path → Object to Path → Shift+Ctrl+C). Yol düzenleme çok güçlü ve esnektir — her düğümü, tutamacı ve segmenti tek tek kontrol edebilirsiniz.

✒️ Kalem Aracı (Pen / Bézier Tool) — B

Kalem (Pen) aracı ile düğüm yerleştirme — tıklama + sürükleme ile eğri oluşturma

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

• Tıklama: Keskin düğüm (sharp node) oluşturur — düz çizgi segmentleri.
• Tıklama + sürükleme: Pürüzsüz Bézier düğümü oluşturur — eğri segmentleri. Sürükleme yönü eğrinin yönünü belirler.
• Shift+sürükleme: Sadece bir tutamacı döndürür (diğerinden bağımsız).
• Ctrl: Yönü 15° adımlarla sınırlar.
• Enter: Yolu sonlandır. Esc: İptal. Backspace: Son segmenti sil.
• Yol uçlarına tıklayarak devam edebilir veya yolu kapatabilirsiniz.

✏️ Kurşunkalem Aracı (Pencil / Freehand Tool) — P

Serbest çizim aracı — fareyi basılı tutarak sürükleyin, serbest bırakınca yol oluşur.

• Smoothing (Yumuşatma): Araç kontrollerindeki kaydırıcı — yüksek değer = daha az düğüm, daha pürüzsüz çizgi.
• Shape (Şekil): Açılır menüde: None, Triangle in/out, Ellipse, From clipboard. Çizgiye otomatik kalınlık/şekil verir.
• 3 çizim modu: Bézier yolu, Spiro yolu (akıcı S-eğrileri), B-Spline yolu.

🔧 Düğüm Aracı (Node Tool) — N

Mevcut yolların düğümlerini ve segmentlerini düzenlemek için kullanılır. Vektör düzenlemenin en güçlü aracı.

🔄 Şekilden Yola Dönüştürme

Path → Object to Path (Shift+Ctrl+C) — dikdörtgen, elips, yıldız gibi şekilleri yola dönüştürür. Dikkat: Bu işlem geri alınamaz (undo hariç) — şekil parametrik düzenleme yeteneğini kaybeder, ancak düğüm bazında tam kontrol kazanır.

Path → Stroke to Path — konturun kendisini dolgulu bir yola dönüştürür. Metin efektleri ve özel kontur şekilleri için kullanışlıdır.

<!-- Köşe (Cusp) düğüm:
     Tutamaçlar BAĞIMSIZ hareket eder.
     Keskin geçişler için kullanılır.
     Kısayol: Shift+C -->

<path d="M 30 150
  C 30 50, 80 50, 100 100
  C 120 150, 170 150, 170 50"
  stroke="#e74c3c"/>

<!-- Pürüzsüz (Smooth) düğüm:
     Tutamaçlar AYNI DOĞRU üzerinde.
     Akıcı eğriler için kullanılır.
     Kısayol: Shift+S -->

<path d="M 200 150
  C 200 50, 230 80, 250 100
  S 300 150, 300 50"
  stroke="#3498db"/>

10. Boolean İşlemleri (Path Operations) ⚙️

Boolean işlemleri, iki veya daha fazla yolu birleştirerek yeni şekiller oluşturmanızı sağlar. Z-sırası önemlidir — en alttaki nesne "hedef" (base) olur, üstteki "araç" (tool) olur. Sonuçta oluşan yol, alt nesnenin dolgu ve kontur stilini alır.

Boolean Birleşim (Union) — iki daire birleşerek tek şekil oluşturur

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Boolean Fark (Difference) — üstteki nesne (araç) alttakinden çıkarılır → delik oluşur

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

🔗 Birleştirme ve Parçalama (Combine & Break Apart)

Path → Combine (Ctrl+K) — birden fazla yolu tek bir bileşik yol (compound path) haline getirir. Boolean'dan farkı: şekiller kesilmez, sadece tek XML nesnesine dönüşür. Çakışan dolgulu alanlar şeffaf olur (delik etkisi).

Path → Break Apart (Ctrl+Shift+K) — bileşik yolu alt yollarına (subpath) ayırır.

Combine: çakışan alan şeffaf olur (sol). Break Apart: ayrı nesnelere bölünür (sağ).

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

📏 İçe / Dışa Kaydırma (Inset & Outset)

Path → Inset (Ctrl+() ve Path → Outset (Ctrl+)) — yolu her noktada dik yönde içe veya dışa kaydırır. Benzer ama daha esnek versiyonlar:

• Dynamic Offset (Ctrl+J): Sürüklenebilir tutamaçla ayarlanır, orijinal yol hatırlanır.
• Linked Offset: Kaynak yol düzenlenebilir kalır, offset ona bağlı olarak güncellenir.

🧹 Sadeleştirme (Simplify) — Ctrl+L

Seçili yolun düğüm sayısını azaltır, ancak şekli korumaya çalışır. Hızlıca art arda Ctrl+L basılırsa eşik değeri artar — köşeler "erir", organik şekiller oluşur. Belirli bir süre durursanız eşik sıfırlanır.

11. Metin Araçları (Text) 🔤

Metin Aracı (Text Tool) — kısayol: T. Tuval üzerine tıklayıp yazmaya başlayın. Inkscape'te iki tür metin nesnesi vardır:

⚙️ Metin Biçimlendirme

Text → Text and Font... (Shift+Ctrl+T) diyaloğu ile yazı tipi (font), boyut, kalınlık, stil (italic, bold) ayarlanır.

✨ İleri Metin Teknikleri

📐 Metin → Yola Dönüştürme

Path → Object to Path (Shift+Ctrl+C) — metni düğümlerden oluşan bir yola dönüştürür. Bu sayede her harfin şeklini düğüm bazında düzenleyebilirsiniz. Dikkat: Bu işlemden sonra metin artık metin olarak düzenlenemez! Logo tasarımında, özel tipografide ve metin deformasyonlarında kullanılır.

🔄 Yol Üzerinde Metin (Text on Path)

Önce bir yol çizin (kalem veya şekil aracıyla), ardından metni ve yolu birlikte seçin ve Text → Put on Path komutunu uygulayın. Metin yolun şeklini takip eder! Daire, dalga veya herhangi bir eğriye metin yazabilirsiniz.

12. Bitmap İzleme (Trace Bitmap) 🖼️→✏️

Bitmap İzleme (Trace Bitmap), bir raster görüntüyü (JPEG, PNG) otomatik olarak vektör yollarına dönüştürme işlemidir. İngilizce'de "vectorization" (vektörleştirme) da denir. Path → Trace Bitmap... veya Shift+Alt+B.

İki temel izleme yaklaşımı: dış hat (outline) ve merkez çizgi (centerline)

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

🔍 Tekli Tarama Modları (Single Scan)

Brightness Cutoff (Parlaklık Eşiği) ile oluşturulan siyah-beyaz vektör izleme sonucu

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

🎨 Çoklu Tarama Modu (Multiple Scans)

Renkli görüntüler için Multiple Scans (Çoklu Tarama) seçilir — görüntüyü birden fazla renk katmanına ayırarak üst üste yığılmış yollar oluşturur. Renk sayısını artırdıkça detay artar, ancak dosya boyutu da büyür.

Multiple Scans — Colors modu ile renkli bitmap izleme sonucu (üst üste yığılmış renkli yollar)

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

13. Kırpma ve Maskeleme (Clip & Mask) ✂️

Hem kırpma (clip) hem de maskeleme (mask), üstteki nesneyi kullanarak alttaki nesnenin görünürlüğünü kontrol eder. İki nesneyi seçin (üstteki = kırpma/maske şekli) ve komutu uygulayın.

Solda orijinal, ortada kırpma (clip), sağda maskeleme (mask) sonucu

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Kırpma/maskelemeyi kaldırmak için: seçili nesne → Object → Clip → Release veya Object → Mask → Release.

14. Kaydetme ve Dışa Aktarma (Export) 💾

📁 Kaydetme Formatları

🖼️ PNG Olarak Dışa Aktarma

File → Export PNG Image... (Shift+Ctrl+E) — SVG'yi raster görüntüye dönüştürür.

PNG dışa aktarma diyaloğu — alan seçimi, boyut ve DPI ayarları

Kaynak: inkscape-manuals.readthedocs.io — CC BY-SA

Dışa aktarma alanı seçenekleri:

• Page (Sayfa): Sayfa sınırları içindeki tüm alan (en yaygın kullanım).
• Drawing (Çizim): Tüm nesneleri kapsayan en küçük alan.
• Selection (Seçim): Yalnızca seçili nesnelerin kapladığı alan.
• Custom (Özel): Koordinatları elle belirleyerek alan tanımlama.

15. SVG Kodunu İnceleme — XML Editörü 🔬

Inkscape'in en güçlü öğrenme araçlarından biri XML Editörü'dür: Edit → XML Editor... (Shift+Ctrl+X). Bu editör, SVG dosyasının ham XML ağacını gerçek zamanlı olarak gösterir. Tuval üzerinde bir nesne seçtiğinizde, o nesnenin XML temsili otomatik olarak vurgulanır.

🧪 XML Editörü ile Neler Yapılabilir?

• Herhangi bir SVG niteliğini (attribute) doğrudan düzenleyebilirsiniz — fill, stroke, transform, vb.
• Inkscape arayüzünden erişilemeyen SVG özelliklerini (örneğin filter detayları, clip-path parametreleri) ayarlayabilirsiniz.
• SVG'nin nasıl çalıştığını interaktif olarak öğrenebilirsiniz — bir değer değiştirin, tuvalde anında sonucu görün!
• Web projeleri için SVG kodunu optimize edebilir veya özel nitelikler (data attributes, CSS sınıfları) ekleyebilirsiniz.

<svg:rect
  id="rect42"
  style="fill:#3498db;
         fill-opacity:0.8;
         stroke:#2c3e50;
         stroke-width:3"
  width="160"
  height="80"
  x="20"
  y="10"
  rx="12"
  transform="rotate(5 100 50)"
/>

<!-- Inkscape, stil bilgilerini genellikle
     style niteliği içinde CSS formatında
     tutar. XML editöründe bu değerleri
     doğrudan düzenleyebilirsiniz. -->

16. Kaynaklar ve Öğreticiler 📚

📖 Resmi Öğreticiler (İngilizce)

📘 Kapsamlı Kılavuz

🎬 YouTube Kaynakları

🛠️ İlgili Araçlar

🧪 İnteraktif SVG Demosu

Aşağıdaki demoyu kullanarak SVG path komutlarını deneyimleyebilirsiniz. Kaydırıcıları hareket ettirerek eğrinin şeklinin nasıl değiştiğini gözlemleyin:

🧩 Mini Quiz