SVG Yakalayıcı bir web sayfasındaki her SVG'yi keşfeder — satır içi SVG öğeleri, harici .svg dosya referansları, SVG sprite'ları (use/symbol kalıpları) ve SVG veri URI'leri. Her SVG'yi farklı boyutlarda önizleyin, şeffaflığı açık ve koyu arka planlara karşı kontrol edin, ham SVG biçimlendirmesini kopyalayın veya optimize edilmiş SVG dosyalarını indirin.
SVG'ler modern web sitelerinde her yerdedir — logolar, simgeler, illüstrasyonlar, dekoratif grafikler, veri görselleştirmeleri — ancak bunları çıkarmak şaşırtıcı derecede zordur. Satır içi SVG'ler doğrudan HTML'e gömülüdür ve "resim olarak kaydedilemez." SVG sprite'ları bağımsız dosyalara çözülmeyen use/symbol referansları kullanır. Img src veya CSS aracılığıyla yüklenen harici SVG'ler ağ sekmesi açılmadan incelenemez. SVG Yakalayıcı tüm bu kaynakları otomatik olarak işler. DOM'u satır içi SVG'ler için tarar, sprite referanslarını eksiksiz sembol tanımlarına çözer, harici SVG URL'lerini bulur ve SVG veri URI'lerini çözer. Her SVG canlı bir önizleme ile galeride görüntülenir ve şeffaflığı doğrulamak için açık, koyu ve dama tahtası arka planları arasında geçiş yapabilirsiniz. Bileşenlerinize satır içi koymak için ham SVG kodunu kopyalayın veya projenizde kullanıma hazır bir dosya olarak SVG'yi indirin.
Sayfadaki her kaynaktan SVG'leri bulur: DOM'daki satır içi <svg> öğeleri, img veya object etiketleri aracılığıyla yüklenen harici .svg dosyaları, CSS background-image SVG'leri, use/symbol sprite referansları (tam SVG'lere çözüldü) ve base64 veri URI kodlu SVG'ler.
Her SVG'yi üç arka plana karşı farklı boyutlarda (orijinal, 2x, 4x) önizleyin: koyu, açık (beyaz) ve dama tahtası. Dama tahtası, tek renkli bir arka planda görünmez olabilecek şeffaflık alanlarını ortaya çıkarır.
Tam SVG biçimlendirmesini almak için "SVG'yi Kopyala"ya tıklayın — viewBox, yollar, gruplar ve tüm öznitelikler dahil. Doğrudan HTML'nize, JSX'nize, Vue şablonunuza veya SVG sprite dosyanıza yapıştırın. Kod temiz ve düzgün biçimlendirilmiş.
Tek tek SVG'leri uygun XML bildirimleri ve kodlama ile .svg dosyaları olarak indirin. Dosyalar genel "download.svg" adları değil, SVG'nin ID'sine, sınıf adına veya aria-label'ine göre adlandırılır.
Her SVG, kaynak türünü (satır içi, harici, sprite, veri URI), viewBox boyutlarını, dosya boyutunu ve DOM'da nerede bulunduğunu gösterir. Sitenin SVG stratejisini nasıl uyguladığını anlamak için yararlıdır.
Bir sayfa use href="#icon-name" referanslarıyla SVG sprite'ları kullandığında, SVG Yakalayıcı her referansı tam sembol tanımına çözer — size sadece use öğesini değil, tam bağımsız SVG'yi verir.
Harika bir simge sistemine sahip bir web sitesini ziyaret edin ve tüm SVG simge setini yakalayın. SVG Yakalayıcı simgeleri sprite'larda, satır içi SVG'lerde ve harici dosyalarda bulur — nasıl uygulandığından bağımsız olarak tam simge kütüphanesini toplar.
Bir ortaklık sayfası, vaka çalışması veya basın kiti için bir şirketin SVG logosuna mı ihtiyacınız var? Modern web sitelerindeki çoğu logo SVG'dir. SVG Yakalayıcı onları orijinal vektör kalitesinde bulur ve çıkarır — sonsuz ölçeklenebilir.
Üretim web sitelerinin karmaşık SVG illüstrasyonları, animasyonları veya veri görselleştirmelerini nasıl uyguladığını incelemek. Yolların nasıl yapılandırıldığını, viewBox'un nasıl yapılandırıldığını ve CSS animasyonlarının nasıl uygulandığını incelemek için ham SVG kodunu kopyalayın.
Yeni bir simge sistemine mi geçiyorsunuz? Referans siteden SVG'leri alın, SVG sprite'ınıza veya bileşen tabanlı simge sisteminize bırakın. Entegrasyona hazır, uygun viewBox değerlerine sahip temiz SVG kodu.
Sitenizde SVG'lerin nasıl uygulandığını inceleyin — satır içi mi (manipülasyon için iyi), harici mi (önbelleğe alma için iyi), yoksa sprite'lar mı (verimlilik için iyi)? SVG Yakalayıcı her SVG için kaynak türünü göstererek SVG stratejinizi optimize etmenize yardımcı olur.
DevSuite Pro yüzen yuvasını açın ve SVG Yakalayıcı simgesine tıklayın. Araç sayfayı tüm SVG kaynakları için tarar ve galeriyi oluşturur.
Sayfada bulunan her SVG'yi gösteren bir SVG küçük resim ızgarası belirir. Her giriş SVG adını, kaynak türünü ve viewBox boyutlarını gösterir.
Daha büyük bir önizleme açmak için herhangi bir SVG'ye tıklayın. Koyu, açık ve dama tahtası arka planları arasında geçiş yapın. SVG'nin nasıl ölçeklendiğini görmek için önizlemeyi yeniden boyutlandırın.
Kodunuza satır içi eklemek için ham biçimlendirmeyi almak üzere "SVG'yi Kopyala"ya tıklayın veya cihazınıza bağımsız bir .svg dosyası olarak kaydetmek için "İndir"e tıklayın.
Daha fazla SVG keşfetmek için galeriye geri dönün. Sayaç rozeti sayfada bulunan toplam sayıyı gösterir.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
