SVG Viewer - SVG Dosyalarını Görüntüleme, Düzenleme ve Optimize Etme Aracı

 (svgviewer.dev)
4 puan yazan GN⁺ 2024-04-28 | 1 yorum | WhatsApp'ta paylaş
  • SVG Viewer, SVG yükledikten sonra önizleme ve kod düzenlemeyi tek ekranda yapmayı sağlayan bir web aracı
  • Döndürme, yatay/dikey çevirme, boyut değiştirme, kodu düzenleme gibi temel düzenleme işlemleri doğrudan tarayıcıda yapılabiliyor
  • Optimizasyon örneği, SVG boyutunun 578 byte’tan 493 byte’a düşerek -%15 azaldığını gösteriyor
  • SVG indirmeye ek olarak React, React Native, PNG, Data URI dönüştürme yolları da sunuluyor
  • İkon listesi ile yükleme, kopyalama, indirme ve paylaşma işlemleri aynı ekranda bulunduğundan SVG’yi kontrol etmekten yeniden kullanıma hızlıca geçilebiliyor

SVG düzenleme ve optimizasyon

  • SVG Viewer, SVG dosyalarını görüntülemek, düzenlemek ve optimize etmek için kullanılan bir web aracı
  • Düzenleme ekranı SVG kodunu ve önizlemeyi birlikte göstererek kod değişikliklerinin sonucunu anında kontrol etmeyi sağlıyor

  • Sunulan işlemler

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • Örnek SVG 400px x 400px boyutunda gösteriliyor ve kod düzenleme alanında <svg> kodu görüntüleniyor
    • Optimizasyon durumu 578 byte → 493 byte, -%15 olarak gösteriliyor

İçe aktarma ve dışa aktarma

  • Dosya işlemleri Upload, Copy, Download, Share eylemlerini sunuyor
  • Dışa aktarma veya dönüştürme hedefleri:
  • Ekranda eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi gibi çeşitli SVG ikon öğeleri ve Load More SVGs gösteriliyor
  • Geri bildirim, kullanım şartları ve gizlilik politikası bağlantıları da sunuluyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-04-28
Hacker News yorumları

  • Sık kullandığım web tabanlı SVG araçlarından biri https://jakearchibald.github.io/svgomg/. Ayarları çok ince ayrıntısına kadar değiştirebildiğiniz bir SVG optimizasyon aracı

  • Hafta sonu Hacker News’te bunun bu kadar gündem olacağını beklemiyordum. Vancouver, BC’de bulunan küçük bir şirketiz ve yazılım araçları geliştiriyoruz: https://www.checkersoftware.ca/
    Sorularınız varsa söyleyin

    • Bu web uygulamasını reklam destekli tutmaya devam etmeyi mi planlıyorsunuz, yoksa yakın gelecekte ek özellikleri olan ücretli bir pro sürüm çıkacak mı merak ediyorum
    • Örneklerin çoğunda uzun sayı dizileri içeren çok sayıda path var; bu yüzden hangi pathin görüntüdeki hangi şekle karşılık geldiğini hemen anlamak zor.
      Düzenleyicide kodun üzerine gelince ilgili yolun rengini veya konturunu geçici olarak değiştirip, metin seçimi için de benzer şekilde davranmasını sağlamak mümkün olur mu merak ediyorum
    • React geliştiricisi olmadığım için tam bilmiyorum; SVG’yi React olarak dışa aktarma özelliğinin ne işe yaradığını merak ediyorum.
      Bir React geliştiricisinin SVG’yi inline koymak yerine React dışa aktarma özelliğini kullanmasının bir nedeni var mı?
    • İkonlarla çalışırken bu aracı hep kullanıyorum

  • Biraz kurcaladım; kullandığım SVG’lerde karşılaştığım ufak tefek sorunları bir gün çözmeye çalışırken çok işe yarayacak gibi görünüyor. Arayüzü anlaşılır ve değişikliklerle ilgili geri bildirim net olduğu için hemen yer imlerine ekledim.
    Bazı SVG’lerde yüklenirken sayfayı anlık olarak genişçe esnetip, çok kısa bir süre sonra amaçlanan boyuta oturma sorunu vardı. viewBox, width, height ile oynadım ama çözemedim; bu ilk esneme efektini azaltmak için ne yapmak gerekir?

    • Stiller uygulanmadan önce SVG’nin parlaması sorunu, açık bir viewBox (viewBox) ve viewport (width, height) belirtilerek düzeltilebilir: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • Tarayıcıdan daha hızlı şekilde SVG’yi başka bir biçime anında dönüştürmek mümkün mü merak ediyorum. Uzman olmayan biri olarak kulağa, bitmap’i maksimum boyutta başlatıp SVG’yi onun içine parse etmek gibi geliyor

  • Gerçekten iyi bir araç. Pek çok özellik tek yerde toplanmış. Normalde phpStorm kullanıyorum; SVGOMG tarzı optimizasyon özelliği yok ama kodu iyi düzenliyor.
    Düzenlemeye başlamak için örnekler daha iyi olsa iyi olurdu; yalnızca path değil, başka temel şekiller de kullanılsa güzel olur. Izgara da faydalı olurdu.
    Örneğin arama ikonu, viewBoxu düzgün ayarlanmış bir circle ve line ile yapılabilir. Orijini çemberin merkezine koyarsanız x, y değerlerine gerek kalmadan yalnızca yarıçap yeterli olur; bu şekilde akıl almaz ölçüde optimizasyon mümkün.
    Sıradan bir arama ikonu genelde altı ondalık basamaklı NASA sayılarından yüzlercesini içeren bir path içine ezilip geçilmiş oluyor. Oysa gerçekte tamsayılarla tanımlanmış tek bir çember yeterli; Adobe Illustrator’ın dışa aktardığı ıvır zıvıra gerek yok.
    SVG sanatsal bir ortam ve onu gerçekten seviyorum. Ama ne sanatçıların ne de geliştiricilerin ona böyle baktığını sanıyorum. Bu yüzden çoğu SVG, mümkün olanın ruhunu yakalayamıyor ve basit bir dosya biçiminden fazlası olduğu pek ortaya çıkmıyor

  • SVG gerçekten güçlü. Geçen hafta filtre drop-shadow içeren paralaks şeffaf bir görselin Mac Safari ve iOS’ta berbat görünmesi sorunu vardı; çözüm, görüntünün dış çizgisini SVG’ye dönüştürüp feGaussianBlur içeren bir SVG filtresiyle gölge vermekti.
    SVG ile yapılabileceklerin hâlâ sadece yüzeyini kazıyormuşum gibi hissediyorum. Optimizasyon için svgomg kullanıyordum, ama bu araçta daha epey faydalı özellik var gibi görünüyor

    • Qt/QML masaüstü ön ucu olarak başlayıp, ne kadar çok kısmın yalnızca SVG imagemap benzeri bir yapılandırmayla yapılabileceğini düşünmeye başladım.
      Jupyter’ı veri bağlantıları ve SVG araçlarıyla birlikte açıp denemek epey ufuk açıcı bir deneyimdi
    • Pratikte ya da politik olarak mümkün olmayabilir ama DWG, DXF, DGN yerine SVG geçse gerçekten harika olurdu. AEC sektöründeki 2D çizimlerin çoğu programda doğru düzgün kullanılamaması akıl alır gibi değil

  • Inkscape kullanıyorum; eksik kaldığı yerde Xara Xtreme’i veya Linux için eski ücretsiz sürümünü kullanıyorum.
    Peki SVG’yi optimize etmek tam olarak ne demek?

    • Gereksiz bilgileri kaldırmak demek. Inkscape çok fazla şey ekliyor. Örneğin Figma’dan basit bir SVG dışa aktarıp Inkscape’te açıp kaydettikten sonra karşılaştırırsanız farkı görürsünüz

  • Bu siteyi gerçekten seviyorum ve sayısız kez kullandım. Garip SVG öğelerini anlamak ve sonucu hızlıca görmek için çok kullanışlı

  • Birkaç yıl önce Mac’te BoxySVG’yi 10 dolara almıştım; küçük ve güvenilir bir araçtı.
    https://boxy-svg.com/

    • Artık abonelik modeline geçmiş gibi görünüyor. Yılda yalnızca birkaç kez ihtiyacım oluyor; 10 dolarsa satın alıp elimde tutmak isterdim. Monodraw’u öyle bir kez satın alıp sakladım; arada sırada kullansam da hâlâ memnun kaldığım bir araç olması güzel
    • Boxy, hızlı ve kabaca düzenleme yapmak için hafif bir SVG editörü olarak önerilebilir

  • SVG ile uğraşırken en sevdiğim kaynak ve araç. Çok aradım ama bundan daha iyisini bulamadım