SVG Kod Görüntüleyici - SVG Kodunu Online İncele ve Önizle

SVG Nedir?

SVG (Scalable Vector Graphics), piksel yerine XML tabanlı kod kullanarak şekilleri matematiksel olarak tanımlayan bir görüntü formatıdır. JPEG veya PNG'nin aksine SVG, her boyutta mükemmel keskinlikte görünür — 16px'lik bir favicon'dan büyük banner'lara kadar. Bu yüzden web ikonları, logolar, illüstrasyonlar ve grafikler için standart haline gelmiştir.

SVG Kodu Nasıl Görünür?

SVG aslında XML'dir. Kırmızı bir daire örneği:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Gerçek dünya SVG dosyaları çok daha karmaşıktır. Figma veya Illustrator'dan dışa aktarılan SVG'ler onlarca <path> elementi içerir ve sıkıştırılmış tek satır halinde gelir. İşte bu noktada SVG görüntüleyici vazgeçilmez olur.

SVG Görüntüleyici Ne İşe Yarar?

• Anında görsel önizleme: Kodu yapıştırın, vektör grafiği gerçek zamanlı görün.
• Bozuk SVG hata ayıklama: Kod ile önizlemeyi yan yana görerek sorunları kolayca tespit edin.
• Sıkıştırılmış SVG formatlama: Tek satıra indirilmiş kodu okunabilir hale getirin.
• Temiz kod kopyalama: HTML'e gömülmeye hazır, düzenli kodu tek tıkla alın.
• SVG sözdizimi öğrenme: Herhangi bir ikonu yapıştırıp şekillerin nasıl oluşturulduğunu keşfedin.

Temel SVG Elementleri

• <svg> — Kök element, viewBox ile koordinat sistemi tanımlar
• <path d="..."> — Karmaşık şekiller için, koordinat komutları içerir
• <circle cx cy r> — Merkez ve yarıçap ile daire
• <rect x y width height> — Dikdörtgen
• <g> — Gruplama, ortak stil ve transform uygulamak için

HTML'e SVG Gömme Yöntemleri

En iyi yöntem ikonlar için inline SVG'dir — CSS ile stillenebilir, dark mode'a uyum sağlar ve ek HTTP isteği gerektirmez:

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M..." fill="currentColor"/>
</svg>

fill="currentColor" kullanmak ikonun CSS color değerini miras almasını sağlar — dark mode, hover ve tema değişikliklerine otomatik uyum.