Loading…

Hakkında Çevrimiçi SVG Güzelleştirici & Küçültücü

Dağınık veya aşırı büyük SVG dosyalarıyla mı uğraşıyorsunuz? Kodunuzu yapıştırın veya bir `.svg` dosyası yükleyin, güzelleştirmek için **Biçimlendir** veya boyutunu küçültmek için **Küçült** seçeneğini belirleyin ve anında temiz, optimize edilmiş SVG işaretlemesi elde edin. Tasarımcılar, ön uç geliştiriciler ve hızlı, güvenli vektör optimizasyonuna ihtiyaç duyan herkes için mükemmel. 🚀

SVG Biçimlendiricimizin Temel Özellikleri

  • Akıllı girintileme, satır kaydırma ve öznitelik hizalama ile **Güzelleştirme modu**
  • Boşlukları, yorumları ve gereksiz meta verileri kaldıran **Küçültme modu**
  • Altyapıda Prettier tarzı biçimlendirme ve SVGO tarzı optimizasyon
  • Yapılandırılabilir girinti stili (boşluklar veya sekmeler) ve girinti boyutu
  • Uzun yolları ve öznitelikleri düzenli tutmak için isteğe bağlı sütun kaydırma
  • İşletim sistemleri arasında temiz farklar için tutarlı satır sonu stili (LF / CRLF)
  • 5 MB'a kadar `.svg` dosyalarını sürükleyip bırakın veya satır içi SVG işaretlemesi yapıştırın
  • %100 istemci tarafında işleme — sanat eseriniz tarayıcıdan asla ayrılmaz
  • Biçimlendirilmiş (`.formatted.svg`) veya küçültülmüş (`.min.svg`) çıktıyı tek tıkla kopyalama veya indirme
  • Dizüstü, masaüstü ve tabletlerde güzel çalışan duyarlı kullanıcı arayüzü

🔧 SVG Nasıl Biçimlendirilir veya Küçültülür: Hızlı Kılavuz for svg-formatter

1

1. SVG'yi Yapıştır veya Yükle

📥 `.svg` dosyanızı sürükleyip bırakın veya ham SVG işaretlemesini düzenleyiciye yapıştırın. Araç standart `image/svg+xml` içeriğini otomatik olarak algılar.

2

2. Biçimlendir veya Küçült Seç

✨ İnsan tarafından okunabilir işaretleme için **Biçimlendir** (incelemeler ve sürüm kontrolü için harika) veya mümkün olan en küçük dosya boyutu için **Küçült** seçin.

3

3. Biçimlendirme Seçeneklerini Ayarla

⚙️ **Girinti Stili** (boşluklar veya sekmeler), **Girinti Boyutu** ve isteğe bağlı **Satır Kaydırma / Uzunluğu**nu ayarlayın. Bunlar doğrudan temel biçimlendirici ayarlarına karşılık gelir.

4

4. Önizle & Dışa Aktar

👀 Optimize edilmiş SVG kodunu inceleyin, projenizde hızlıca test edin, ardından panonuza kopyalayın veya sonucu yeni bir `.svg` dosyası olarak indirin.

Teknik Detaylar

Güzelleştirme Motoru (Biçim Modu)

Biçim modu, SVG XML işaretlemesi için ayarlanmış Prettier tarzı bir motor kullanır. Okunabilirliğe ve kararlı, öngörülebilir farklara odaklanır.

YönDavranışNotlar
Girinti StiliBoşluklar veya Sekmeler**Girinti Stili** ile yapılandırılabilir (`indentStyle` ile eşlenir).
Girinti Boyutu1–8 boşlukBoşluk kullanırken iç içe geçme genişliğini kontrol eder (`indentSize` ile eşlenir).
Satır Kaydırma / Uzunluğu0–120 sütun`0` kaydırmayı devre dışı bırakır; aksi halde uzun satırlar seçilen sütun etrafında kaydırılır (`wrapLineLength` ile eşlenir).
Satır SonuLF (`\n`) veya CRLF (`\r\n`)İşletim sistemleri arasında satır sonlarını tutarlı tutar (`endOfLine` ile eşlenir).
Çıktı DiliXML-stili SVGGüvenli gömme için SVG uyumlu XML yapısını korur.

Küçültme İşlem Hattı (Minify Modu)

Minify modu, görsel çıktıyı korurken boyut küçültmeye odaklanan SVGO esinli bir işlem hattı kullanır.

AdımAçıklamaEtki
Yorumları kaldırRender'ı etkilemeyen `<!-- ... -->` yorum düğümlerini temizler.Daha küçük dosyalar, daha temiz farklar.
Gereksiz boşlukları atGereksiz boşlukları, sekmeleri ve satır sonlarını daraltır.Ayrıntılı editörden çıkarılmış SVG'ler için büyük kazanç.
Meta verileri temizleGüvenli olduğunda, render etmeyen meta veri düğümlerini isteğe bağlı kaldırır.Herkese açık üretim varlıkları için iyi.
Nitelikleri normalleştirNitelikleri kararlı bir şekilde basitleştirir ve yeniden sıralar.Daha kompakt çıktı, daha iyi önbelleğe alınabilirlik.

Kodlama & Uyumluluk

Çıktı, modern tarayıcılar ve araçlarla uyumlu UTF-8 SVG'dir ve SVG 2 spesifikasyonuyla uyumludur.

Performans & Sınırlar (Tipik Masaüstü Tarayıcı)

Dosya TürüGirdi BoyutuGüzelleştirme SüresiKüçültme SüresiTipik Boyut Küçülmesi
İkon5 KB⚡ < 15 ms⚡ < 20 ms≈ %25–40
İllüstrasyon100 KB⚡ < 60 ms⚡ < 90 ms≈ %40–55
Ana Görsel500 KB⏱️ < 300 ms⏱️ < 450 ms≈ %50–60
Gerçek dünya performansı işlemcinize, tarayıcınıza ve SVG karmaşıklığına bağlıdır.

Güçlü Kullanıcılar için CLI Alternatifleri

Terminal iş akışlarını veya CI entegrasyonunu mu tercih ediyorsunuz? Bu araca benzer davranış için Prettier ve SVGO'yu birleştirin:

Linux / 🍎 macOS

Prettier ile SVG'yi güzelleştir

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

SVG işaretlemenize tutarlı girinti ve satır sarma uygular.

SVGO ile SVG'yi küçült

npx svgo input.svg -o input.min.svg

Daha küçük dosyalar için yorumları, meta verileri ve gereksiz boşlukları kaldırır.

Windows (PowerShell veya CMD)

xmlstarlet kullanarak SVG'yi güzel yazdır (WSL veya yerel üzerinden)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

SVG/XML'i 2 boşluk girinti ile biçimlendirir.

SVGO ile SVG'yi küçült (global kurulum gerekmez)

npx svgo input.svg -o min.svg

Tek seferlik optimizasyonlar için SVGO'yu doğrudan `npx` üzerinden çalıştırır.

Tasarımcılar ham SVG'leri dışa aktarabilsin ve iş akışınız onları optimize tutsun diye Prettier + SVGO'yu derleme veya ön-işleme kancalarınıza ekleyin.

Pratik Uygulamalar

Web Performansı & Frontend Paketleri

  • Tasarım sistemlerinde, ikon setlerinde ve sprite sayfalarında SVG yüklerini azaltın.
  • Ekstra HTTP isteklerinden tasarruf etmek için HTML/CSS'te küçültülmüş SVG'yi satır içi kullanın.
  • Açılış sayfalarındaki ana illüstrasyonları küçülterek Core Web Vitals'ı iyileştirin.
<img src="/assets/hero.min.svg" alt="Optimize edilmiş ana grafik" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Tasarım Devri & Sürüm Kontrolü

  • Kod incelemesinden önce dışa aktarılan SVG'yi güzelleştirerek farkların okunabilir olmasını sağlayın.
  • İşbirliği için güzel bir `.formatted.svg` ve üretim için bir `.min.svg` dosyası tutun.
  • Bir tasarım sistemi boyunca tutarlı girinti ve nitelik sıralaması uygulayın.

Mobil, E-postalar & Hibrit Uygulamalar

  • HTML e-postalardaki satır içi SVG'leri küçülterek daha hafif kampanyalar oluşturun.
  • React Native / Capacitor / Ionic'te birçok ikon gönderirken uygulama paket boyutunu azaltın.
  • Yavaş veya kota sınırlı bağlantılardaki kullanıcılar için bant genişliğinden tasarruf edin.

❓ Frequently Asked Questions

❓SVG biçimlendirme nedir?

Biçimlendirme (veya güzelleştirme), SVG işaretlemenizi tutarlı girintiler, satır sonları ve öznitelik sıralamasıyla yeniden yapılandırır. Görüntünün nasıl oluşturulduğunu değil, yalnızca kodun görünümünü ve fark davranışını değiştirir.

📏Küçültme işlemi SVG'mın görünümünü değiştirir mi?

Normal durumlarda hayır. Küçültme, yorumları, gereksiz boşlukları ve oluşturulmayan meta verileri kaldırır. Görsel sonucu korurken boyutu azaltmak için tasarlanmıştır. Düzenleme araçları için özel meta verilere güveniyorsanız, orijinal dosyanın yedeğini saklayın.

🔒SVG'm bir sunucuya yükleniyor mu?

Asla. Tüm biçimlendirme ve küçültme işlemleri tamamen tarayıcınızda JavaScript/WebAssembly kullanılarak çalıştırılır. SVG dosyalarınız hiçbir sunucuya gönderilmez veya uzaktan saklanmaz.

🚀Küçültme ne kadar boyut tasarrufu sağlayabilir?

Gerçek dünyadaki tasarruflar genellikle **%30 ile %70** arasındadır, SVG'nin nasıl dışa aktarıldığına ve ne kadar meta veri veya boşluk içerdiğine bağlı olarak değişir.

⚠️`<metadata>` veya yorumların kaldırılması iş akışımı bozabilir mi?

Herkese açık web grafikleri için meta verileri ve yorumları kaldırmak genellikle güvenlidir. Ancak, tasarım araçlarınız bu bölümlerde düzenleme verileri veya lisans bilgileri saklıyorsa, gelecekteki düzenlemeler için sürüm kontrolünde orijinal, küçültülmemiş bir kopya saklayın.

Pro Tips

Best Practice

Temiz farklar için deponuzda küçültülmemiş bir `icon.formatted.svg` saklayın, ardından `icon.min.svg`'yi derleme adımınızın bir parçası olarak oluşturun.

Best Practice

SVG'lerinizi ekran okuyuculara erişilebilir tutmak için küçültmeden önce her zaman anlamlı `<title>` ve `<desc>` öğeleri ekleyin.

Best Practice

Ağır çizimler ve grafiklerden daha fazla bayt sıkıştırmak için SVG küçültmeyi HTTP sıkıştırması (Gzip/Brotli) ile birleştirin.

Best Practice

Simge setleri için bir sprite stratejisi düşünün: bir kez küçültün, ardından SVG kodunu her yerde çoğaltmak yerine `<use>` ile simgelere başvurun.

Additional Resources

W3C SVG 2 Spesifikasyonu
Documentation
MDN Web Dokümanları: SVG
Documentation
SVGO (GitHub)
Documentation
Prettier XML / SVG Biçimlendirme
Documentation

Other Tools