SVG Görüntüleyici - SVG dosyalarını görüntüleme, düzenleme ve optimize etme aracı

SVG görsel dosyası analizi

• 400px genişliğinde, 400px yüksekliğinde bir SVG görsel dosyası
• Temel yapı:
  • En dışta width="124", height="124" olan bir dikdörtgen bulunuyor
  • rx="24" özelliğiyle köşeler yuvarlatılmış
  • fill="#F97316" özelliğiyle turuncu arka planla doldurulmuş
• Başlıca şekiller:
  • <path> etiketiyle beyaz renkli çokgen biçimi çizilmiş
    • d özelliğinde path koordinat bilgileri yer alıyor
    • fill="white" ile beyaz renkle doldurulmuş
  • <circle> etiketiyle siyah bir daire çizilmiş
    • cx="63.2109" cy="37.5391" r="18.1641" ile konumu ve boyutu belirtilmiş
    • fill="black" ile siyah renkle doldurulmuş
  • <rect> etiketiyle yarı saydam bir dikdörtgen 45 derece döndürülerek çizilmiş
    • opacity="0.4" ile saydamlık ayarlanmış
    • fill="#FDBA74" ile açık turuncu renkle doldurulmuş
    • transform="rotate(-45 81.1328 80.7198)" ile döndürme dönüşümü uygulanmış
• Dosya boyutu optimizasyonu:
  • Orijinal 578 bytes'tan 493 bytes'a düşürülerek %15 azaltılmış

GN⁺ görüşü

• SVG bir vektör grafik formatı olduğu için büyütme/küçültmede bozulmadan net kalma avantajına sahip. Buna karşılık JPEG, PNG gibi bitmap görsellere kıyasla karmaşıklık arttığında dosya boyutu büyüyebilir.
• Dosya boyutu küçük olduğu için web'de yükleme hızının yüksek olması beklenebilir. Ancak çizim karmaşıksa PNG daha avantajlı olabilir.
• rx, circle, rotate gibi çeşitli özellikler kullanılarak sadelik içinde derinlik hissi verilmesi etkileyici.
• Turuncu arka plan üzerinde beyaz ve siyah kullanılarak renk kontrastı sağlanmış, bu da okunabilirliği artırıyor.
• Muhtemelen ikon, logo gibi amaçlarla hazırlanmış. Açık turuncu şeklin anlamı veya kullanım amacı merak uyandırıyor.

[GN⁺]

Hacker News görüşü

• SVG optimizasyon aracı SVGOMG, bir başka kullanışlı web tabanlı SVG aracı olarak tanıtılıyor
• Vancouver merkezli küçük bir şirket olan Checker Software, bu araç dahil çeşitli yazılım araçları geliştiriyor
• Arayüzün anlaşılması kolay ve yapılan değişikliklere dair net geri bildirim sağlıyor olması, SVG kullanırken ortaya çıkan küçük sorunları çözmede faydalı olacağını düşündürüyor
  • Örneğin, yüklenirken SVG'nin amaçlanan boyuttan bir anlığına büyüyüp sonra küçülmesi gibi sorunlar
• Tuvalin yakınlaştırma özelliğinde sonsuza kadar gitmeye devam eden eğlenceli bir hata(?) var
• SVG çok güçlü bir araç; yakın zamanda Safari ve iOS'ta filter: drop-shadow kullanılan paralaks şeffaf görsel işleme sorununun, SVG filtreleri ve feGaussianBlur kullanılarak çözüldüğü bir örnek de paylaşılıyor
• SVG için daha fazla ve daha iyi araca ihtiyaç duyulan bir dönemde, bu aracın gelişi memnuniyetle karşılanıyor
• Metinden SVG oluştururken bu düzenleyicinin üretilen içeriği ayrıştıramadığı, ancak CodeBeautify'nin SVG görüntüleyicisinin sorunsuz çalıştığı yönünde bir görüş de var
• Bu tür küçük araçların Hacker News (HN) ruhuna çok uygun olduğu değerlendiriliyor