SVG nedir? SVG ve PNG ne zaman kullanılır?

SVG dosyası nedir?

SVG, Scalable Vector Graphics ifadesinin kısaltmasıdır; ölçeklenebilir vektör grafikleri anlamına gelir. Yalnızca renkli piksellerden oluşan bir ızgarayı saklamak yerine şekilleri, yolları, dolguları ve metni tanımlayabilir. Tarayıcı veya çizim uygulaması bu talimatları kullanarak görseli istenen boyutta çizer. SVG oluşturmak için kod yazmanız gerekmez: bir vektör tasarım uygulaması çiziminizi SVG olarak dışa aktarabilir.

Daire biçiminde bir logo düşünün. SVG, daireyi ve rengini tanımlayabilir; PNG ise daireyi belirli bir boyutta oluşturan pikselleri saklar. SVG, kenarları düzgün kalan daha büyük bir daire çizebilir. PNG büyütüldüğünde mevcut pikseller daha geniş bir alana yayılır ve kenarlar netliğini kaybedebilir. MDN’nin SVG’ye genel bakış sayfası biçimin nasıl çalıştığını açıklar.

SVG ve PNG: kullanımda ne fark eder?

Hiçbir biçim her durumda daha küçük dosya üretmez. Binlerce yol içeren ayrıntılı bir SVG, uygun bir PNG’den daha büyük olabilir. Gerçek dosyaları karşılaştırın ve kullanılacak yerin bunları kabul ettiğini kontrol edin. Fotoğraflar için SVG’yi bir fotoğraf sıkıştırma biçimi olarak kullanmak yerine JPG, WebP veya AVIF seçeneklerini değerlendirin.

SVG ne zaman iyi bir seçimdir?

Web sitesinin üst bölümünde, bir sunumda ve büyük bir afişte kullanılan logonun vektör biçiminde bir orijinalinin bulunması yararlıdır. SVG, birden fazla boyutta kullanılacak simgeler ve basit diyagramlar için de uygundur. Yine de en küçük sürümü kontrol edin: net çizim, çok küçük yazıları okunabilir hâle getirmez veya ince çizgilerin zor seçilmesini önlemez.

Bir SVG, PNG veya JPG gibi normal bir piksel görseli içerebilir. Bu görselin çözünürlüğü değişmez. Küçük bir fotoğrafı SVG’nin içine yerleştirmek ayrıntıları geri getirmez ve fotoğrafı vektör şekillerine dönüştürmez. Bir .png dosyasının adını .svg ile bitecek şekilde değiştirmek de biçimini değiştirmez.

Boyutları, viewBox’ı ve boş alanı anlayın

Genişlik ve yükseklik görselin boyutlarını belirtir. viewBox, çizimin yerleştirildiği koordinat alanını tanımlar. Çizimin gösterileceği alana ölçeklenmesine yardımcı olur; dosya boyutunu ayarlamaz. MDN’nin viewBox belgesi bu ilişkiyi açıklar.

Logonuz büyük bir boş alanın içinde küçük görünüyorsa tasarım uygulamanızdaki çalışma alanının veya sayfanın sınırlarını kontrol edin. Tüm sayfayı dışa aktarmak, çizimin çevresindeki kullanılmayan alanı da dosyaya dahil edebilir. Gerektiğinde sayfayı çizime göre ayarlayın, ancak konturlar ve gölgeler için pay bırakın. Yalnızca görüntüleme genişliğini artırmak, boş alanı da büyütür.

Web sitesinde SVG kullanma

Normal bir web sitesi logosu, SVG görsel dosyası olarak kullanılabilir. Bilgi aktaran görsellere açıklayıcı alternatif metin ekleyin ve sayfa düzeninde doğru genişlik ve yüksekliği ayırın. Dekoratif görsellerin alternatif metni boş olmalıdır. Örnekler için alternatif metin rehberine bakın.

Bir tarayıcının SVG’yi gösterebilmesi, her içerik yönetim sisteminin veya yükleme formunun onu kabul edeceği anlamına gelmez. Son dışa aktarma biçimini seçmeden önce platformunuzun kurallarını kontrol edin. Görsel olarak kullanılan SVG, doğrudan sayfanın koduna eklenen SVG’den de farklı davranır: görsel bağlamında betikler ve harici kaynakların yüklenmesi kısıtlanır. MDN’nin SVG’yi görsel olarak kullanma rehberi bu kısıtlamaları açıklar. Güvenilir kaynaklardan gelen çizimleri ve platformunuzun desteklediği yayınlama yöntemini kullanın.

Paylaşılmaya hazır bir SVG oluşturma

• Gereksiz yere büyük bir sayfa yerine kullanmak istediğiniz çizim alanını dışa aktarın.
• Bağlantılı görselleri ve gerekli stilleri dosyaya dahil edin; ayrı dosyalara bağımlı bırakmayın.
• Yazının başka bir cihazda tam olarak aynı görünmesi gerekiyorsa tasarım uygulamanızda metni yollara dönüştürün. Düzenlenebilir bir orijinal saklayın: yollara dönüştürülmüş metin artık normal metin gibi düzenlenemez.
• Kullanılmayan nesneleri ve tasarım uygulamasının gereksiz verilerini bir kopyadan kaldırın. Orijinalin yerine koymadan önce sonucu kontrol edin.
• Dışa aktarılan SVG’yi kullanılacağı uygulamada veya web sitesinde açın; kenarları, metni, arka planı ve eksik öğeleri kontrol edin.

Metni yollara dönüştürmek yol sayısını ve dosya boyutunu artırabilir. Yolları fazla sadeleştirmek çizimi değiştirebilir. Verileri kontrol etmeden silmek yerine gerçek sonucu karşılaştırarak optimizasyonu değerlendirin. Pixilo’nun SVG’den PNG’ye dönüştürme aracı bir piksel görseli oluşturur; SVG’yi optimize etmez veya daha küçük bir SVG dosyası üretmez.

Ne zaman PNG kopyası oluşturmalısınız?

Dosyayı alacak hizmet PNG istiyorsa, ekran görüntüsüne benzer sabit bir kopya gerekiyorsa veya belirli piksel boyutları isteniyorsa PNG oluşturun. Orijinal SVG’den gerekli boyutta dışa aktarın. PNG, vektör yollarını veya etkileşimli özellikleri korumaz; sonradan büyütmek de görseli bulanıklaştırabilir. Gelecekteki dışa aktarmalar için SVG’yi saklayın.

SVG’den PNG’ye dönüştürme aracıyla piksel boyutlarını seçebilir, şeffaf alanları koruyabilir veya düz renkli bir arka plan ekleyebilirsiniz. Araç sayfasında boyut sınırları, yazı tipleri ve desteklenmeyen içerikler açıklanır. Şeffaf arka plan seçeneği mevcut şeffaflığı korur; SVG’nin içine çizilmiş bir arka plan şeklini kaldırmaz.

Görseli yayınlamadan veya göndermeden önce

1. Kullanılacağı yerin hangi biçimleri kabul ettiğini doğrulayın.
2. Vektör şekilleri ve esnek ölçeklendirme yararlıysa SVG’yi koruyun; piksel görseli gerekiyorsa PNG oluşturun.
3. Çizimin sınırlarını, yazı tiplerini ve gömülü görselleri kontrol edin.
4. Son dosyayı kullanılacağı gerçek görüntüleme boyutunda ve yer alacağı arka plan üzerinde inceleyin.
5. Yükleme hızı önemliyse dosya boyutlarını karşılaştırın ve düzenlenebilir orijinali saklayın.