SVG'den WebP'ye Dönüştürücü

Vektör dosyanızı, sayfa düzeninizin gerektirdiği piksel genişliğinde bir WebP'ye dönüştürün. Bir CMS SVG yüklemeyi kabul etmediğinde, sosyal medya önizlemesi bitmap istediğinde ya da bir çizim tarayıcının yavaş çizeceği kadar çok yol içerdiğinde işinize yarar.

veya JPG, JPEG, JPE … dosyaları buraya bırakın ·

Dosya başına en fazla 95 MB· En fazla 20 dosya· 30 dakika sonra silinir

Çıktı

Dönüştürülecek biçim

Dosyalar sunucularımızda işlenir ve 30 dakika sonra silinir.

Bu aracı nasıl kullanırsınız

1
SVG dosyasını yükleyin
Figma, Illustrator, Inkscape veya bir grafik kütüphanesinden dışa aktardığınız en fazla 20 adet .svg dosyası ekleyin; her biri en fazla 95 MB olabilir.
2
Çıktı genişliğini belirleyin
Çıktı resmini yeniden boyutlandır 1200 px genişlikle başlar; bunu resmin sayfada kaplayacağı genişliğin iki katına ayarlayın. Kalite 90'dır; düz renkli logolar ve simgeler için Gelişmiş ayarlar altından Kayıpsız seçeneğini işaretleyin.
3
WebP'ye dönüştürün
WebP biçimine Dönüştür → düğmesine basın ve dosyaları ya da tek bir ZIP'i indirin. Saydam alanlar saydam kalır.

Yanıt

SVG'yi belirli bir boyutta WebP'ye nasıl dönüştürürüm?

SVG'yi yükleyin, Çıktı resmini yeniden boyutlandır alanını ihtiyacınız olan piksel genişliğine ayarlayın (varsayılan 1200 px) ve WebP biçimine Dönüştür → düğmesine basın. Vektör o genişlikte yeniden çizilir; yani hiçbir şey büyütülmez veya bulanıklaşmaz.

SVG ne zaman WebP'ye dönüştürülmeli?

SVG, 2001'de W3C Tavsiyesi oldu ve çoğu logo ile simge için doğru biçimdir: her yakınlaştırmada net kalan, birkaç kilobaytlık metin. Sorun, dosya kendi kodunuzun dışına çıktığında başlar. WordPress ve barındırılan birçok mağaza oluşturucu SVG yüklemelerini reddeder, Facebook, LinkedIn ve X'teki bağlantı önizlemeleri bitmap olarak alınır, tasarım araçları da illüstrasyonları gömülü raster efektlerle dışa aktararak vektör dosyasını birkaç megabaytlık işaretlemeye çevirir.

Google'ın 2010'da yayımladığı ve Safari'nin 2020'de 14. sürümle nihayet desteklediği WebP, bu iş için üretilmiş bitmap'tir: aynı görünümde PNG'den küçüktür ve gerçek bir alfa kanalı vardır. SVG'yi doğrudan son boyutunda WebP'ye çizmek, büyük bir PNG dışa aktarımı üzerinden dolanmayı ortadan kaldırır. Tersini de merak ediyorsanız WebP'den SVG'ye sayfamız, bu yönün neden dönüştürme değil izleme gerektirdiğini açıklıyor.

Yaygın web alanları için SVG'den WebP'ye ölçüler

40:21

1200 × 630 px

Open Graph bağlantı önizlemesi

Sayfa paylaşıldığında gösterilen resim

16:9

1920 × 1080 px

Tam genişlikte hero illüstrasyonu

1× ile çoğu masaüstü ekranı kaplar

16:9

1600 × 900 px

2× blog sütunu resmi

800 px'lik içerik sütunu için

4:1

400 × 100 px

2× üst bilgi logosu

200 × 50 px'lik logo alanı için

SVG

Scalable Vector Graphics

SVG, W3C'nin 2001'de standartlaştırdığı XML tabanlı bir vektör biçimidir. Piksel yerine şekilleri, yolları ve metni tanımlar; bu yüzden her boyutta keskin kalır ve logolar ile simgeler için genellikle çok küçüktür. Saydamlığı, CSS stillendirmesini, betik çalıştırmayı ve animasyonu destekler; her tarayıcı onu yerel olarak işler. SVG fotoğraflar için uygun değildir ve karmaşık çizimlerin işlenmesi yavaşlayabilir. Illustrator, Inkscape, Figma ve tarayıcılar onu açıp düzenleyebilir.

Sıkıştırma: –
Saydamlık: Evet
Animasyon: Evet
Çıkış yılı: 2001 · W3C

SVG dönüştürücü

WEBP

WebP resim

WebP, Google'ın web sayfalarını daha hızlı yüklemek için 2010'da yayımladığı bir resim biçimidir. Hem kayıplı hem kayıpsız sıkıştırmayı, alfa saydamlığını ve animasyonu tek biçimde destekler. Kayıplı WebP dosyaları, benzer görsel kalitedeki JPEG'lerden genellikle %25–35 daha küçüktür; kayıpsız WebP ise genellikle PNG'den küçüktür. Güncel tüm tarayıcılar destekler, ancak bazı eski masaüstü yazılımlar, baskı hizmetleri ve yükleme formları hâlâ reddeder. Windows, macOS ve çoğu modern görüntü düzenleyici WebP dosyalarını açabilir.

Sıkıştırma: Kayıplı veya kayıpsız
Saydamlık: Evet
Animasyon: Evet
Çıkış yılı: 2010 · Google

WEBP dönüştürücü

İnsanlar SVG'yi WebP'ye, vektör dosyalarını kabul etmeyen ya da yavaş çizen yerler (CMS, sosyal medya önizlemesi, yoğun bir açılış sayfası) için hafif, sabit boyutlu bir bitmap elde etmek amacıyla dönüştürür; WebP'den SVG'ye geçmek ise biçim değiştirme değil, izleme işidir.

SVG nasıl rasterleştirilir ve nelere dikkat edilmeli?

Dönüştürücü SVG'nin kendi width, height ve viewBox değerlerini okur, ardından her yolu belirlediğiniz genişlikte çizer; yükseklik en boy oranını izler. Çizim son boyutta yapıldığı için ince çizgiler ve küçük metinler doğru ölçekte yalnızca bir kez yumuşatılır. Küçük bir PNG'yi sonradan büyütmek hiçbir zaman bu kadar temiz görünmez.

Yazı tipleri alışılmış sürprizdir. SVG, gömülü olmayan veya dış çizgiye çevrilmemiş bir yazı tipi belirtiyorsa yedek yazı tipi kullanılır ve satır uzunlukları değişir. Dışa aktarmadan önce tasarım aracınızda metni dış çizgiye çevirin. SVG içinde URL ile bağlanan harici resimler alınmaz; bunları gömün ya da önce çizimi düzleştirin.

SVG'den WebP'ye dönüştürücü: yapılması ve kaçınılması gerekenler

Yapın	Yapmayın
Gösterilen CSS genişliğinin 2 katında oluşturun	SVG olarak daha küçük olan basit satır içi simgeleri dönüştürmeyin
Az renkli düz logolar için Kayıpsız seçeneğini kullanın	600 px'lik alan için 4000 px'te oluşturmayın
Gelecekteki boyutlar için SVG ana dosyasını saklayın	E-posta bültenlerinde WebP göndermeyin
Düzen kaymasını önlemek için WebP'yi width ve height öznitelikleriyle sunun	Canlı metin beklemeyin: WebP pikseldir, seçilebilir yazı değildir

SVG'den WebP'ye dönüştürme hakkında sorular

SVG'yi WebP'ye dönüştürürken hangi piksel genişliğini kullanmalıyım?

Resmin CSS pikseli olarak gösterildiği genişliği alıp ikiyle çarpın; böylece yüksek yoğunluklu telefon ve dizüstü ekranlarında net kalır. 800 px'lik bir sütunda gösterilen illüstrasyon 1600 px olarak oluşturulmalıdır. Web'de 3× nadiren işe yarar, çünkü dosya büyür ama gözle görülür kazanç azdır.

Bir web sitesi için WebP mi daha iyi, SVG mi?

Basit logolar, simgeler ve diyagramlar için hayır: temiz bir SVG çok küçüktür ve her boyutta nettir, o yüzden SVG olarak kalsın. WebP; gradyan, filtre veya binlerce yol içeren karmaşık illüstrasyonlarda ve sosyal medya önizlemeleri ya da SVG desteklemeyen bir CMS gibi yalnızca bitmap kabul eden yerlerde öne çıkar.

WebP, SVG'mdeki şeffaf arka planı korur mu?

Evet. WebP, hem kayıplı hem kayıpsız modda tam alfa kanalına sahiptir; bu yüzden SVG'de dolgusu olmayan alanlar saydam kalır. Şekillerin kenarları saydamlığa karşı yumuşatılır, bu da her arka plan renginde doğru görünür.

Vektörel çizimler için kayıplı mı kayıpsız WebP mi?

Kayıpsız, birkaç düz renkten oluşan logolar, simgeler ve grafikler için uygundur; bunlar çok iyi sıkışır ve kenarları tamamen temiz kalır. 85–90 kalitede kayıplı mod ise gradyan, gölge veya doku içeren illüstrasyonlara uygundur; bunlarda kayıpsız dosyalar ağırlaşır. Aynı dosyada ikisini de deneyin ve temiz görünen küçük olanı tutun.

WordPress'e neden SVG yükleyemiyorum?

WordPress, bir SVG betik taşıyabileceği için SVG'yi izin verilen yükleme türlerinin dışında tutar. WebP'yi ise 2021'de çıkan 5.8 sürümünden beri kabul eder; dönüştürünce güvenlik eklentisi olmadan medya kitaplığının kabul ettiği bir dosya elde edersiniz. Gerçek vektör gerekiyorsa SVG desteği yine temizleyici bir eklentiyle eklenebilir.

WebP'yi e-posta bülteninde kullanabilir miyim?

Kullanmayın. Windows için masaüstü Outlook dahil birçok e-posta istemcisi WebP'yi göstermez, Gmail de SVG'yi görüntülemez. E-posta için çizimi bunun yerine SVG'den PNG'ye dönüştürerek oluşturun.

Biçimler Açıklanıyor
AVIF, HEIC ve WebP Farkı: Modern Resim Formatları
11 dk okuma
Resim Araçları
PNG'yi SVG'ye Dönüştürme: Logo ve İkon Vektörleştirme
12 dk okuma