Vektör mü Raster mı? SVG'ye Gerçekten Ne Zaman İhtiyaç Var?

Vektör ve raster görseller arasındaki fark, aslında bir resmin nasıl saklandığıyla ilgili. Raster bir görsel (PNG, JPG, WebP) renkli piksellerden oluşan sabit bir ızgaradır. Vektör bir görsel (SVG) ise bir dizi çizim talimatıdır: koordinatlarla tanımlanmış şekiller, çizgiler, eğriler ve dolgular. Her birinin neyde iyi olduğunu bu tek fark belirliyor. Vektörler her boyutta net kalır; logolar, simgeler ve diyagramlar için idealdir. Rasterlar ise bir fotoğraftaki sonsuz ince ayrıntıyı yakalar. Bu rehberde SVG'yi ne zaman kullanmanız gerektiğini, ne zaman yanlış seçim olduğunu ve ikisi arasında dönüştürme yaptığınızda gerçekte ne olduğunu anlatıyoruz.

Raster görsel aslında nedir?#

Raster görsel, her biri kendi rengine sahip piksellerden oluşan bir dikdörtgendir. 1200 × 800 boyutundaki bir fotoğraf tam olarak 960.000 renkli kareden oluşur; ne bir eksik ne bir fazla. PNG, JPG, WebP, GIF ve HEIC'in hepsi raster formatlardır. Aralarındaki fark temel fikirde değil, bu pikselleri nasıl sıkıştırdıklarındadır. (En yaygın iki format arasında seçim yapıyorsanız, PNG mi JPG mi rehberimiz bu konuyu anlatıyor.)

Piksel sayısı sabit olduğu için raster görselin doğal bir boyutu vardır. Küçülttüğünüzde fazla pikseller atılır. Büyüttüğünüzde ise yazılım aradaki pikselleri kendisi uydurmak zorunda kalır. Küçük bir logoyu koca bir afişe yaydığınızda bulanık ya da kare kare görünmesinin sebebi budur. İşin iyi tarafı, bir piksel ızgarası kameranın gördüğü her şeyi kaydedebilir: ten, yapraklar, sis, gölgeler ve aradaki her renk geçişi.

Vektör görsel aslında nedir?#

Vektör görsel hiç piksel saklamaz. Onun yerine bir tarif saklar, kabaca şöyle: "Buraya şu yarıçapta bir daire çiz, içini mor yap, sonra şu noktalardan geçen bir eğri çiz." SVG (Scalable Vector Graphics), web'in vektör formatıdır. W3C SVG spesifikasyonu ile tanımlanır ve MDN'nin SVG belgelerinde anlatıldığı gibi tüm modern tarayıcılar tarafından desteklenir. Perde arkasında bir SVG dosyası, metin düzenleyicide açabileceğiniz düz bir metindir (XML).

Pikseller ancak görsel ekranda gösterildiği anda ortaya çıkar; tarayıcı ya da uygulama bu talimatları o an ihtiyaç duyduğu boyutta çizer. Vektörlerin netliğini kaybetmeden büyüyebilmesinin nedeni de budur: Bir daire ve birkaç eğriyle çizilmiş bir logo; telefonda, 4K monitörde ya da basılı bir posterde kusursuz netlikte yeniden çizilir. Basit vektör grafiklerin çoğu zaman çok küçük dosyalar olmasının sebebi de aynı: Birkaç şekli tarif etmek yalnızca birkaç satır metin tutar. Formatın kendisine daha ayrıntılı bir giriş için SVG dosyası nedir yazımıza göz atabilirsiniz.

Vektör ve raster: doğrudan karşılaştırma#

SVG'ye gerçekten ne zaman ihtiyacınız var?#

Görsel gerçek dünyadan yakalanmış değil de şekillerden oluşuyorsa ve birden fazla boyutta doğru görünmesi gerekiyorsa vektör formatı seçin:

• Logolar. Aynı logo küçücük bir favicon, bir web sitesi başlığı ve basılı bir afiş olarak karşınıza çıkar. Tek bir SVG hepsini karşılar.
• Simgeler ve arayüz grafikleri. Yüksek yoğunluklu ekranlarda net görünürler ve basit simgeler çoğu zaman SVG olarak PNG'den daha küçüktür.
• Grafikler, diyagramlar ve illüstrasyonlar: düz renkli ve temiz çizgili olanlar.
• Bir makineyi yönlendiren her şey. Kesim makineleri, folyo kesiciler ve lazer kazıyıcılar yolları takip eder; bu yüzden piksel değil vektör çizgiler isterler.
• Düzenlemeye devam edeceğiniz grafikler. Bir vektörü yeniden renklendirmek ya da boyutlandırmak, kaç kez yaparsanız yapın onu bozmaz.

Raster ne zaman doğru seçim?#

Görsel bir fotoğrafsa ya da fotoğraf ayrıntısı içeriyorsa raster bir format kullanın:

• Her türlü fotoğraf. Gerçek dünya sahneleri birbirinden hafifçe farklı milyonlarca renkten oluşur. Bu, piksel ızgarasının iyi kaydettiği, şekillerin ise verimli biçimde tarif edemediği bir şeydir.
• Ekran görüntüleri. Zaten pikseldirler, PNG onları birebir korur.
• Taramalar ve dokular: kâğıt, kumaş ya da boyalı resimler gibi, dokunun asıl mesele olduğu görseller.
• SVG'nin kabul edilmediği her yer. Pek çok yükleme formu, sosyal medya platformu ve ofis uygulaması, logo bile olsa PNG ya da JPG ister.

Pratik kural şu: Görsel çizildiyse vektörü düşünün, fotoğrafı çekildiyse raster olarak bırakın.

Vektör ve raster arasında dönüştürme#

İki yön birbirinin aynası değil ve kafa karışıklığının çoğu buradan çıkıyor.

Vektörden rastere dönüştürmek kolaydır ve pratikte kayıpsızdır. SVG bir talimat dizisi olduğu için dönüştürücü onu istediğiniz piksel boyutunda çizebilir; böylece tam ihtiyaç duyduğunuz boyutta net bir sonuç alırsınız. SVG'den PNG'ye dönüştürücümüz bir ölçek ya da tam genişlik ve yükseklik seçmenize izin verir, şeffaflığı korur ve tamamen tarayıcınızda çalışır. SVG'yi PNG'ye dönüştürdüğünüzde ne olur rehberimiz, çıktı boyutunun nasıl belirlendiği gibi ayrıntıları anlatıyor.

Rasterdan vektöre dönüştürmek ise iz sürmedir (tracing), pikselleri geri almak değil. Hiçbir şey bir PNG ya da JPG'den orijinal vektör dosyasını geri getiremez; görsel piksele dönüştüğü anda o bilgi kaybolur. İz sürme aracının yaptığı şey, benzer renkteki pikselleri düz bölgeler halinde gruplamak ve her bölgenin etrafına bir çizgi çizmektir. Zaten birkaç düz şekilden oluşan bir logoda sonuç kusursuza çok yakın olabilir. PNG'den SVG'ye dönüştürücümüz tam olarak bunun için tasarlandı: logolar, çizimler ve basit illüstrasyonlar.

Fotoğrafta ise iz sürme kötü sonuç verir. 14,1 KB'lık bir fotoğrafı JPG'den SVG'ye dönüştürücümüzden geçirdiğimizde, 607 yoldan oluşan 151,5 KB'lık bir SVG elde ettik: on kattan daha büyük ve orijinalinin yanında gözle görülür şekilde lekeli. Araç artık önce görselinizdeki renkleri sayıyor ve bir fotoğraf bu sonuca doğru gidiyorsa sizi uyarıyor. Boyutun neden bu kadar şiştiğini merak ediyorsanız, iz sürülmüş SVG neden PNG'den büyük yazımız bunu adım adım anlatıyor.

Sık sorulan sorular#

Vektör ve raster görseller arasındaki temel fark nedir? Raster görsel renkli piksellerden oluşan sabit bir ızgara saklar, vektör görsel ise ekranda gösterildiği anda çizilen şekilleri ve çizgileri matematiksel talimatlar olarak saklar. Vektörlerin her boyutta net kalması, rasterların ise doğal çözünürlüklerinin ötesine büyütüldüğünde bulanıklaşması bu yüzdendir.

SVG, PNG'den daha mı iyi? SVG logolar, simgeler ve basit düz grafikler için PNG'den daha iyidir; PNG ise ekran görüntüleri, fotoğraflar ve karmaşık ayrıntılı her şey için daha iyidir. Genel olarak biri diğerinden üstün değildir, farklı türde görseller için tasarlanmışlardır.

Bir fotoğrafı SVG'ye dönüştürebilir miyim? Bir fotoğrafı iz sürerek SVG'ye dönüştürebilirsiniz, ancak sonuç genellikle orijinalinden çok daha büyük olur ve lekeli görünür, çünkü fotoğraftaki yumuşak renk geçişleri yüzlerce düz şekle dönüşür. Fotoğrafları JPG, PNG ya da WebP olarak tutun.

PNG'yi SVG'ye dönüştürmek onu sınırsız ölçeklenebilir yapar mı? PNG'yi SVG'ye dönüştürmek, onu ancak görsel temiz biçimde iz sürülebilecek kadar basitse (logo ya da çizim gibi) ölçeklenebilir yapar. İz sürme aracı pikselleri şekiller olarak yeniden çizer; temiz bir iz iyi ölçeklenir, dağınık bir iz ise yalnızca dağınık şekilleri büyütür.

SVG'yi PNG'ye dönüştürmek kalite kaybına yol açar mı? SVG'yi PNG'ye dönüştürmek, dışa aktardığınız boyutta kalite kaybına yol açmaz, çünkü vektör tam o piksel boyutunda sıfırdan çizilir. Ancak PNG daha sonra SVG gibi büyütülemez; bu yüzden ihtiyaç duyacağınız en büyük boyutta dışa aktarın.

Logom SVG mi olmalı, PNG mi? Logonuzun ana dosyası SVG olmalı, çünkü favicon'dan reklam panosuna kadar her boyuta temiz şekilde ölçeklenir. SVG kabul etmeyen platformlar ve formlar için bu SVG'den PNG kopyalar dışa aktarın.

Kısaca#

• Raster (PNG, JPG, WebP) sabit bir piksel ızgarasıdır: fotoğraflar, ekran görüntüleri ve taramalar için doğru seçim.
• Vektör (SVG) bir çizim talimatları dizisidir: logolar, simgeler, diyagramlar ve kesim dosyaları için doğru seçim.
• SVG'yi SVG'den PNG'ye ile istediğiniz boyutta piksele dönüştürün. Basit grafikleri PNG'den SVG'ye ya da JPG'den SVG'ye ile vektöre dönüştürün, fotoğrafları ise fotoğraf olarak bırakın.
• Daha fazla karşılaştırma dosya formatı rehberlerimizde, tüm görsel araçlarını ise görsel araçları sayfasında bulabilirsiniz.