Back

SVG Önizleme ve İnceleyici

Bir SVG yapıştırın veya sürükleyin; boyutlar, viewBox, eleman dökümü, benzersiz renkler ve güvenlik bayraklarını kapsayan istatistik paneliyle anında render edildiğini görün. Önizleme; betikler ve same-origin erişimi devre dışı bırakılmış sandbox iframe içinde çalışır, böylece kötü amaçlı SVG'ler kod çalıştıramaz. Görüntüyü SVG veya PNG olarak dışa aktarın, beyaz, siyah ya da şeffaf dama desenli arka plan arasında geçiş yapın veya işaretlemeyi incelemek için kaynak görünümüne geçin.

Spesifikasyonlar

Yaygin Kullanim Alanlari

  • Bir SVG simgesini veya illüstrasyonu yerleştirmeden önce hızlıca önizle
  • Güvenilmeyen bir SVG'de gömülü betikleri veya olay işleyicileri kontrol et
  • Bir SVG'nin viewBox ve içsel boyutlarını doğrula
  • Bir SVG'deki benzersiz renkleri say (palet çıkarma veya optimizasyon için kullanışlı)
  • Bir SVG'yi renkli veya şeffaf arka plan üzerine PNG olarak dönüştür
  • Beklenmedik <script> veya <foreignObject> kullanımını fark etmek için eleman dökümünü incele

Ozellikler

  • Yalıtılmış canlı önizleme — SVG, sandbox="" ayarlı iframe içinde render edilir; betikler ve olay işleyicileri çalıştırılamaz
  • Arka plan geçişi: beyaz, siyah veya şeffaf dama deseni
  • İstatistik paneli: boyutlar, viewBox, en-boy oranı, bayt boyutu, eleman sayısı, en çok kullanılan elemanlar, benzersiz renkler
  • Güvenlik bayrakları <script>, olay işleyicileri, dış referanslar veya animasyonlar içeren SVG'leri vurgular
  • SVG veya yüksek çözünürlüklü (2×) PNG olarak dışa aktarma — seçilen arka plan PNG'ye gömülür
  • Detayları incelemek için tam ekran önizleme
  • Söz dizimi vurgulamalı kaynak görünümü
  • Normalleştirilmiş SVG'yi panoya kopyala

Ornekler

Basit Simge

Deneyin →

Çizgi ile çizilmiş çember içinde onay işareti simgesi

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Gradyan Dolgu

Deneyin →

Doğrusal gradyanla doldurulmuş dikdörtgen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

Animasyonlu SVG

Deneyin →

SMIL animasyonu kullanan nabız gibi atan çember — Animasyonlar bayrağı yanar

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Ipuclari

  • Görüntünün temiz ölçeklenmesi için sabit width/height yerine viewBox tercih edin
  • Betikler veya Olay İşleyicileri rozetleri yanıyorsa, SVG yerleştirildiğinde kod çalıştırır — güvenmeden önce bunları kaldırın
  • Dama deseni arka plan istenmeyen saydamlığı fark etmeye yardımcı olur; farklı sayfalardaki görünümü denemek için beyaza veya siyaha geçin
  • PNG dışa aktarma 2× çözünürlükte render edilir; vektör kalitesini korumak için SVG dışa aktarmayı kullanın
  • Dış referanslar (http:// href'leri) sandbox önizlemede yüklenmez — bu kasıtlıdır
← Tum araclara don