- SVG, çizimi komutlarla tarif eden bir metin dosyasıdır; büyütünce keskin kalır, piksel ızgarası olan PNG ise bulanıklaşır.
- Program SVG'yi açmıyorsa ya da yer yalnız PNG ve JPG kabul ediyorsa SVG'den PNG'ye çevirme aracını kullan, logolarda Saydam arka planı seç.
- PNG'yi sonradan büyütmek kaliteyi düşürür; ihtiyacın olan en büyük ölçüyü baştan seç, sunum logosu için 1.000-2.000 piksel genişlik yeter.
- Yazı tipini internetten çeken SVG'de yazılar farklı görünebilir; dışa aktarmadan önce yazıları eğriye çevir ve orijinal SVG'yi sakla.
Bir logo ya da simge indirdiğinde dosyanın uzantısı .svg çıkabilir. Bilgisayarda açmaya çalıştığında bir tarayıcı sekmesinde açılır, bir sunuma ya da belgeye eklemek istediğinde program dosyayı tanımayabilir. SVG web için çok iyi bir biçimdir, ama her yerde çalışmaz. Bu yazıda SVG'nin ne olduğunu, PNG'den nasıl ayrıldığını ve PNG'ye çevirirken nelere dikkat etmen gerektiğini anlatıyorum.
SVG nedir?
SVG, "ölçeklenebilir vektör grafiği" anlamına gelen bir dosya biçimidir. Bir fotoğraf ya da PNG gibi noktalardan oluşmaz. İçinde, bir çizimin nasıl yapılacağını tarif eden komutlar bulunur: şu koordinattan başlayan bir daire, şu noktalardan geçen bir eğri, içi şu renkle dolu bir dikdörtgen.
SVG aslında bir metin dosyasıdır. Bir metin düzenleyicide açtığında okunabilir satırlar görürsün. Bu yapı sayesinde birkaç kilobaytlık bir SVG, ekranın tamamını kaplayacak ölçüde bile keskin görünür, çünkü çizim her seferinde istenen ölçüde yeniden hesaplanır.
SVG genellikle şu işler için kullanılır:
- Logolar ve marka işaretleri
- Web sitelerindeki ve uygulamalardaki simgeler
- Diyagramlar, grafikler ve haritalar
- Düz renkli çizimler ve illüstrasyonlar
Fotoğraflar için uygun değildir. Bir fotoğrafın milyonlarca farklı renk tonunu çizim komutlarıyla tarif etmek pratik olmaz; fotoğraflar JPG, WEBP ya da HEIC gibi piksel biçimlerinde saklanır.
SVG ile PNG arasındaki fark
PNG bir piksel ızgarasıdır. 500 × 500 bir PNG, her biri tek renk olan 250.000 noktadan oluşur. Bu resmi 2.000 piksele büyüttüğünde yeni ayrıntı ortaya çıkmaz; program aradaki noktaları tahmin eder ve kenarlar bulanıklaşır.
| Özellik | SVG | PNG |
|---|---|---|
| Yapı | Çizim komutları (vektör) | Piksel ızgarası |
| Büyütünce | Keskin kalır | Bulanıklaşır, tırtıklanır |
| Fotoğraf için | Uygun değil | Uygun, ama dosya büyük olur |
| Saydamlık | Var | Var |
| Destek | Web'de yaygın, birçok programda sınırlı | Neredeyse her yerde |
| İçerik | Betik ve dış bağlantı içerebilir | Yalnız görüntü |
PNG'nin saydamlık desteği, onu SVG'nin en doğal karşılığı yapar. JPG saydamlık taşımadığı için bir logoyu JPG'ye çevirdiğinde çevresi beyaz ya da başka bir renkle dolar. Biçimlerin genel karşılaştırması için WEBP nedir, JPG ve PNG farkı yazısına bakabilirsin.
SVG'yi ne zaman PNG'ye çevirmelisin?
Web sitende ya da SVG'yi destekleyen bir yerde kullanıyorsan çevirmene gerek yok; SVG daha küçük ve daha keskindir. PNG'ye çevirmen gereken durumlar genellikle şunlardır:
- Sunum, kelime işlemci ya da tablo programına logo eklerken program SVG'yi açmıyorsa
- Profil resmi, kapak görseli ya da form alanı yalnız PNG ve JPG kabul ediyorsa
- Mesajlaşma uygulamasında logoyu görsel olarak göndermek istiyorsan
- Bir matbaaya ya da tasarımcıya belirli piksel ölçüsünde dosya vermen gerekiyorsa
- Bir sistem güvenlik nedeniyle SVG yüklemeye izin vermiyorsa
Son madde sık görülür. SVG içine betik konabildiği için birçok site SVG yüklemesini kapatır. Bu durumda PNG en kolay çözümdür.
Doğru ölçüyü seçmek
PNG'nin bir piksel ölçüsü vardır ve bu ölçü bir kez belirlendiğinde sonradan büyütmek kaliteyi düşürür. Bu yüzden çevirirken ihtiyacın olan en büyük ölçüyü baştan seçmek gerekir.
SVG'lerin de bir başlangıç ölçüsü olur. Bu ölçü dosyanın içinde width ve height değerleriyle ya da viewBox denilen koordinat alanıyla belirtilir. Simge setlerinde 24 × 24 ya da 48 × 48 sık görülür. Bu ölçüde bir PNG çok küçük kalır; bir sunumda kullanmak için birkaç katına çıkarmak gerekir.
Kabaca şöyle düşünebilirsin:
- Web ya da uygulama simgesi: 1x, 2x ve 3x olmak üzere birkaç kopya
- Sunum ya da belgeye logo: 1.000–2.000 piksel genişlik
- Profil resmi: yüklediğin yerin önerdiği ölçü; bilmiyorsan 1.000 piksel civarı
- Baskı: matbaanın istediği ölçü; yoksa baskı genişliği (inç) × 300
Piksel ölçüsü büyüdükçe PNG'nin dosya boyutu artar. Dosya boyutunu sonradan düşürmek için resim küçültme aracını kullanabilirsin; bu konudaki ayrıntılar fotoğraf boyutu nasıl küçültülür? yazısında.
Adım adım çevirme
SVG'den PNG'ye çevirme aracıyla işlem şöyle:
- SVG dosyalarını alana sürükle ya da "Dosya seç" ile ekle. Tek seferde 50 dosyaya kadar ekleyebilirsin, her SVG en fazla 10 MB olabilir.
- Bir küçük resme dokun. Panelde SVG'nin kendi ölçüsü ve çıkacak PNG ölçüsü yazar, örneğin "logo.svg: 24 × 24 (viewBox) → PNG 96 × 96".
- "Boyut" bölümünde Ölçek (1x, 2x, 3x, 4x) ya da Genişlik seç. Genişlikte 1 ile 8.192 piksel arasında bir değer yazarsın, yükseklik oranla hesaplanır.
- "Arka plan" bölümünde Saydam, Beyaz, Siyah, Açık gri ya da Özel renk seç. Logolar için genellikle Saydam doğru seçimdir.
- Çevir ve sonuç kartından "İndir" ile al. Birden fazla dosyada "Hepsini ZIP olarak hazırla" işini kolaylaştırır.
Dosya adları ayara göre verilir: ölçek seçtiysen "logo@2x.png", genişlik seçtiysen "logo-1024px.png" gibi. SVG hedef ölçüde yeniden çizildiği için kenarlar o ölçüde keskin olur.
Yazılar ve resimler neden eksik çıkabilir?
SVG'den PNG'ye çevirme aracı çizmeden önce SVG'yi temizler. Betikler, onload ve onclick gibi olay öznitelikleri, foreignObject, iframe ve embed öğeleri, javascript: bağlantıları ve dışarıya giden başvurular (internetten yüklenen resim ve yazı tipleri, CSS içindeki url() ve @import) kaldırılır. Kaldırılan öğeler panelde "1 betik kaldırıldı" ya da "2 dış bağlantı çizilmedi" gibi satırlarla listelenir.
Bu temizliğin bir yan etkisi var. SVG'n bir yazı tipini internetten çekiyorsa PNG'de yazılar farklı bir yazı tipiyle görünebilir ya da hiç görünmeyebilir. Dışarıdan bağlantıyla eklenmiş bir resim de çizilmez. Çözüm, SVG'yi hazırladığın çizim programında dışa aktarmadan önce yazıları eğriye (path) çevirmek ve resimleri dosyanın içine gömmektir. Hazır logo dosyalarında yazılar çoğu zaman zaten eğriye çevrilmiş olur.
Çevirdikten sonra
PNG'yi bir yerin istediği tam ölçüye getirmen gerekirse resim boyutlandırma aracını kullanabilirsin, ama küçültmek sorun değilken büyütmek kaliteyi düşürür. Büyük bir ölçü gerekiyorsa SVG'den yeniden, daha büyük çevirmek daha iyi sonuç verir. Bu yüzden orijinal SVG dosyasını silme; ileride farklı bir ölçüye ihtiyacın olduğunda ona döneceksin. Boyutlandırmanın ayrıntıları resim boyutu nasıl değiştirilir? yazısında.
Dosyaların nasıl işlendiğini Gizlilik Politikası sayfasında anlattık.
Sıkça sorulan sorular
SVG dosyasını nasıl açarım?
Bilgisayardaki tarayıcılar SVG'yi doğrudan açar; dosyayı bir tarayıcı penceresine sürüklemen yeterli. Düzenlemek için vektör çizim programı gerekir. Yalnız görüntü olarak kullanacaksan PNG'ye çevirmek en kolay yoldur.
SVG'yi PNG'ye çevirince kalite düşer mi?
Seçtiğin ölçüde düşmez, çünkü SVG o ölçüde yeniden çizilir. Kalite kaybı PNG'yi sonradan büyütürsen ortaya çıkar.
Saydam arka planlı PNG nasıl elde edilir?
Çevirirken arka plan olarak Saydam'ı seç. SVG'de çizim olmayan alanlar PNG'de saydam kalır.
SVG mi PNG mi daha küçük?
Logo ve simgelerde SVG genellikle çok daha küçüktür. Ama karmaşık, çok ayrıntılı çizimlerde SVG büyüyebilir; böyle durumlarda PNG daha pratik olabilir.
PNG'yi SVG'ye çevirebilir miyim?
Bu işlem iz sürme denilen ayrı bir teknik ister ve sonuç asıl vektör çizimin aynısı olmaz. Elinde SVG varsa onu saklamak en iyisidir.
