MoreOnlineTools
ESC

SVG Kod Görüntüleyici – Temiz SVG kodunu anında yakalayın

SVG dosyanızı yükleyin, vektörü canlı görün ve biçimlendirilmiş kodu tek tıkla kopyalayın.

SVG dosyanızı yükleyin

SVG dosyanızı buraya bırakın

Sadece 5MB’a kadar olan SVG dosyaları desteklenir. Dosyanız cihazınızı terk etmez.

veya bu alana sürükleyip bırakın.

Biçimlendirilmiş SVG kodu

Kullanım Örnekleri

Basit SVG İkon

Tek bir polygon öğesiyle oluşturulmuş beş köşeli yıldız şekli.

<svg viewBox="0 0 100 100" xml...
Gradyanlı SVG Logo

Modern bir görünüm için doğrusal gradyan dolgusu kullanan daire logo.

<svg viewBox="0 0 100 100" xml...
SVG Animasyon

SVG animateTransform kullanarak dönen kare öğesi.

<svg viewBox="0 0 100 100" xml...

Neden SVG Kod Görüntüleyici?

Anında önizleme

SVG çiziminizi anında render ederek renkleri ve çizgileri kontrol edin.

Okunabilir kod

XML kodu otomatik olarak düzenleyip girintileyerek okunabilir hale getirir.

Hızlı inceleme

Path, group ve viewBox değerlerini tek bakışta gösterir.

Tamamen yerel

İşlemler tarayıcınızda yapılır, dosyalarınız sunucuya gönderilmez.

SVG kodu nasıl görüntülenir?

1

SVG yükleyin

Bir SVG dosyası seçin veya yükleme alanına bırakın.

2

Önizleme ve istatistikleri inceleyin

Canlı önizlemeyi ve eleman/path sayacı gibi bilgileri kontrol edin.

3

Kopyalayın veya indirin

Biçimlendirilmiş kodu kopyalayın veya temiz SVG’yi indirin.

Sık sorulan sorular

SVG kodunuzu kod editörüne yapıştırın ya da .svg dosyası yükleyin. Canlı önizleme paneli siz yazarken anında güncellenir. Render edilmiş grafiği ve kaynak kodu yan yana görebilirsiniz; böylece hangi elemanın hangi görsel çıktıyı ürettiğini kolayca anlayabilirsiniz.

Evet. Kod editörü tamamen düzenlenebilir; herhangi bir özellik, renk, path veya değeri değiştirdiğinizde önizleme gerçek zamanlı güncellenir. Tam vektör editörü açmadan dolgu rengi, çizgi kalınlığı veya viewBox gibi hızlı düzeltmeler yapmak için idealdir.

Tam biçimlendirilmiş kodu, tekil elemanları ve özelliklerini, viewBox, genişlik ve yükseklik ayarlarını, eleman sayısını ve SVG yapısını görebilirsiniz. Figma, Illustrator veya diğer araçlardan dışa aktarılan SVG'lerde render sorunlarını ayıklamak için çok kullanışlıdır.

En sık karşılaşılan neden, eksik ya da uyumsuz viewBox ile genişlik/yükseklik özelliklerdir. ViewBox yoksa veya boyutlar eşleşmiyorsa farklı render motorları SVG'yi farklı ölçeklendirir. Önce bu özellikleri kontrol edin. Ayrıca referans verilen fontların, harici resimlerin veya CSS stillerinin doğru şekilde gömülü ya da erişilebilir olduğunu doğrulayın.

Evet. Ham SVG kodunu otomatik girintileyen ve biçimlendiren Format düğmesini kullanın. Bu özellik, Figma veya çoğu ikon kütüphanesi gibi araçlardan sıkıştırılmış tek satır çıktı alındığında kodu okunabilir hale getirir. Ardından gereksiz özellik veya meta verileri manuel olarak kaldırabilirsiniz.

5 MB'a kadar. Bu, çoğu ikon, logo ve illüstrasyonu kapsar. Çok büyük SVG'ler (karmaşık haritalar, binlerce path düğümü içeren ayrıntılı illüstrasyonlar) bu sınıra yaklaşabilir; önce bunları sadeleştirmeniz veya optimize etmeniz gerekebilir.

Evet. Kopyala düğmesine tıklayarak tam SVG kodunu panonuza kopyalayabilirsiniz. Düzenlenen dosyayı .svg dosyası olarak kaydetmek için İndir düğmesini de kullanabilirsiniz.

Hayır. Tüm işlemler JavaScript kullanılarak tarayıcınızda yerel olarak gerçekleşir. SVG kodunuz ve dosyalarınız hiçbir sunucuya iletilmez veya herhangi bir yerde saklanmaz.

SVG Kod Görüntüleyici Nedir?

SVG dosyasını sürükle-bırak yapın, kodunu düzgün biçimlendirilmiş olarak görün ve canlı önizlemeyle kontrol edin. Figma, Illustrator veya başka bir araçtan dışa aktardığınız ikonları masaüstü yazılım açmadan saniyeler içinde inceleyebilirsiniz.

Ne İşe Yarar?

Dışa aktarılan SVG dosyaları genelde gereksiz group, metadata ve editör kalıntılarıyla dolu olur. Bu araçla kodu tarayarak neyin temizlenmesi gerektiğini hemen görürsünüz. ViewBox ve boyut değerlerini de yayına almadan kontrol edebilirsiniz.

Kimler Kullanır?

Frontend geliştiriciler, ikon kütüphanesi hazırlayanlar, tasarım sistemlerinde çalışanlar. SVG kodunu projeye yapıştırmadan önce son bir göz atmak isteyenler için birebir.

Gizlilik

Dosyanız tarayıcınızda işlenir, sunucuya hiçbir şey gönderilmez. İnterneti kesin, araç yine çalışır.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme

SVG Kod Görüntüleyici - SVG Kodunu Online İncele ve Önizle
İlgili Blog Yazısı
SVG Kod Görüntüleyici - SVG Kodunu Online İncele ve Önizle

SVG kodunun ne olduğunu, nasıl okunacağını ve ücretsiz online SVG görüntüleyici ile anında önizleme, formatlama ve kopyalamanın nasıl yapıldığını öğrenin.

Yazıyı Oku 8 dk okuma

Sonraki Adım

SVG Optimize Edici

SVG dosyalarını optimize edin ve küçültün

SVG'den Görsel Dönüştürücü

SVG dosyalarını PNG, JPG, GIF veya WebP formatlarına dönüştürün

İlişkili Araçlar

HTML Tablo Oluşturucu

Görsel HTML tablo oluşturucu

Rewrite Kural Oluşturucu

Apache (.htaccess), Nginx ve IIS (web.config) için redirect/rewrite kuralları ol...

Renk Kontrast Denetleyicisi

Renk kontrast oranını ve WCAG 2.1 AA/AAA uyumluluğunu kontrol edin. Erişilebilir...

YAML Biçimlendirici

YAML kodunu güzelleştirin ve doğrulayın

SEO Analiz Aracı

Web sayfalarının SEO performansını kapsamlı olarak analiz edin ve 100 üzerinden ...

Meta Etiket Oluşturucu

SEO için HTML meta etiketleri oluşturun

MoreOnlineTools'ta Daha Fazlası

Ücretsiz Online Araçlar

Metin, görsel, güvenlik, geliştirici için 109 araç

Tüm Araçlara Göz At →
Geliştirici Kopya Kâğıtları

Regex, Git, HTTP kodları, CSS, Markdown için hızlı referans

Kopya Kâğıtlarına Göz At →
Online Hesap Makineleri

VKİ, kredi, yüzde, bahşiş, yaş ve daha fazla hesap makinesi

Hesap Makinelerine Göz At →
Araç Koleksiyonları

Derlenmiş iş akışları: API geliştirme, görsel boru hattı, güvenlik denetimi ve daha fazlası

Koleksiyonlara Göz At →