Web için SVG: Vektörler Pikselleri Ne Zaman Yener — ve Ne Zaman Yenmez

Bir tasarımcı, 800 byte'lık bir SVG dosyası olabilecek 3 megabaytlık bir PNG logo gönderir. Her e-posta, her sayfa yüklemesi bu indirmenin bedelini öder — alıcının telefonu dosyayı çözer, posta istemcisi önbelleğe alır ve kimse fark etmez ki görselin tamamı bir daire, iki çizgi ve bir şekildir. Bu rehber, vektör grafiklerin aslında ne olduğunu, SVG'nin PNG'yi ne zaman gerçekten yendiğini, ne zaman tuzak olduğunu ve neden arada bir PNG'ye ihtiyaç duyacağınızı anlatır.

SVG bir tarif, resim değil

PNG bir bit eşlemidir: her biri saklanan bir değer olan renkli piksellerden oluşan bir ızgara. SVG ise — Scalable Vector Graphics — şekilleri geometriyle anlatan düz metin olan XML'dir. Bir dikdörtgen, <rect x="..." y="..." width="..." height="..."> demektir; bir daire "merkezi (12,12), yarıçapı 10" demektir; bir yol, taşıma, çizgi ve eğri komutlarından oluşan bir dizidir. Tarayıcı bu talimatları okur, geometriyi hesaplar ve ekranın gerçekten ihtiyaç duyduğu çözünürlükte çizer. Bir vektörü yakınlaştırın, bulanıklaşacak piksel yoktur; tarayıcı matematiksel işlemi daha büyük bir ölçekle yeniden yürütür.

Mavi daire içinde beyaz bir onay işareti olan rozet simgesi, eksiksiz ve gerçek bir örnektir:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#ffffff" stroke-width="2" fill="none"/>
</svg>

Dosyanın tamamı 250 byte'ın altındadır. Aynı şekli 2x PNG olarak dışa aktardığınızda 3–10 kilobayt eder; 512 piksel site logosuna büyütüldüğünde onlarca kilobayt. SVG metin olduğu için ayrıca incelenebilir ve karşılaştırılabilir: herhangi bir düzenleyicide açın, grep'leyin, git'e işleyin ve neyin değiştiğini tam olarak görün. PNG bir piksel duvarıdır; SVG ise kaynak koddur.

SVG'nin tartışmasız kazandığı durumlar

SVG birkaç durumda kesin biçimde kazanır. Görseliniz çoğunlukla düz şekiller ve temiz kenarlardan oluşuyorsa, SVG lüks değil — ölçülebilir şekilde daha hafif ve sınırsız keskinliktedir:

• Logolar ve simgeler: dolgu, kontur ve yollardan kurulu düz, geometrik işler. SVG'nin başlıca kullanım alanı.
• Her yakınlaştırmada netlik: metin ve kenarlar 4K monitörde, gösterge panelinin büyütülmüş köşesinde ya da 300dpi'de basılan bir afişte jilet gibi keskin kalır. PNG, doğal boyutunu geçtiği anda bulanıklaşır.
• Basit şekillerde küçük dosya: dosya boyutu çözünürlüğü değil karmaşıklığı izler; sıradan bir simge, aynı PNG'nin çok küçük bir kısmıdır.
• CSS ile tema: satır içi SVG currentColor değerini devralır ve üzerine gelme, odak ile karanlık mod durumlarına tepki verir. PNG dışa aktarıldığı anda donmuştur.
• Animasyon ve etkileşim: SVG öğeleri DOM'un parçasıdır — tıklayabilir, CSS veya JavaScript ile canlandırabilir, veriye bağlayabilirsiniz. Statik bir görselde bunların hiçbiri yoktur.

SVG'nin yanlış araç olduğu durumlar

SVG'yi simgelerde küçük yapan mantık, fotoğrafta onu şişmanlatır. Bir fotoğraf milyonlarca ayrı renk kararıdır; onu vektörlerle anlatmak binlerce gradyan durağı ve bulanık şekil demektir — dosya eşdeğer bir JPEG'i geçerken tarayıcı her karede zorlanır. Yumuşak gölgeler, parlama, katmanlı bulanıklık gibi ağır filtreli işler genellikle raster olarak sunulmalıdır.

Gizli maliyet işleme aşamasındadır. PNG bir kez çözülür ve ekrana yazılır; SVG ise her yerleşim geçişinde, her yakınlaştırmada, her animasyon karesinde hedef boyuta yeniden rasterize edilir. Sayfadaki tek bir karmaşık SVG sorun değildir. Ama her biri bulanıklık filtresiyle sarılı elli kar tanesi SVG'si, kaydırılan bir sayfada görünür biçimde takılmaya başlar. Gözünüze kestirdiğiniz her şeyi vektörize etmeden önce performansı ölçün:

viewBox ile genişlik ve yükseklik: boyutu kim belirler

Bir SVG dosyasının en kafa karıştırıcı kısmı, görüntü boyutu ile koordinat sistemi arasındaki farktır. width ve height öznitelikleri (ya da CSS özellikleri) görselin CSS pikseli cinsinden ne kadar büyük çizileceğini söyler. viewBox ise çizimin kendisinin ne kadar büyük olduğunu söyler: viewBox="0 0 24 24", "çalışma 24 birim genişliğinde ve 24 birim yüksekliğinde, 0,0'dan başlıyor" demektir. Tarayıcı görüntü boyutunu bu birimlere böler ve tüm çizimi buna göre ölçekler — 24 birimlik bir simgenin 200 pikselde kusursuz görünmesinin nedeni budur.

Bir viewBox varsa en-boy oranı varsayılan olarak korunur. preserveAspectRatio="xMidYMid meet" varsayılandır ve object-fit: contain gibi davranır — çalışma ortalanır, kutu oranı farklıysa kenarlarda boşluk kalır; slice kullanımı ise object-fit: cover gibi davranır. Unutmamanız gereken bir alışkanlık: dosyadan width ve height özniteliklerini silmeyin. viewBox varken modern tarayıcılar CSS'in bunları temiz biçimde ezmesine izin verir ve öznitelikleri korumak, stil sayfası gelmeden tarayıcıya içsel boyutları verir.

SVG'yi sayfaya koymak: img, satır içi ya da arka plan

SVG'yi nereye koyduğunuz, ona ne yapma izni verdiğinizi belirler. Dört yaygın kapsayıcı:

Etiket <img> işçidir: statik, önbelleklenebilir ve paralel yüklenir. Aynı zamanda bilinçli olarak atıl tutulur — üzerine gelme durumları, currentColor ya da animasyon gerektiği anda SVG'yi satıra gömmek ve HTML ağırlığını kabul etmek zorundasınız. Arka plan görselleri, erişilebilirlik ağacının hiç görmemesi gereken dekoratif, yinelenen işlerin yeridir. <object> ise betikleri ve harici kaynakları hâlâ çalıştırır — simgeler için büyük ölçüde modasının geçmiş olmasının nedeni budur.

Harici SVG tuzakları: CSP, çerezler ve betikler

SVG metindir, yani içine <script> taşıyabilir. Sonra ne olacağı, dosyayı nereye yüklediğinize bağlıdır. <img src> içinde SVG statik bir resim gibi ele alınır: betikler asla çalışmaz ve yazı tipleri, stil sayfaları, diğer görseller gibi dış referanslar güvenlik gereği yok sayılır. Güvenli kapsayıcı budur. <object>, satır içi <iframe> ya da doğrudan açılan bir belge içinde ise SVG tam teşekküllü bir belgedir: betikler çalışır, çerezler gönderilir. O konumdaki üçüncü taraf bir .svg, sayfanızdaki aktif koddur.

Content-Security-Policy her kapsayıcıyı ayrı atar. img-src, <img> ve arka plan görsellerini yönetir; object-src, <object> ile <embed> öğelerini yönetir; HTML içindeki satır içi SVG ise sayfanın kendi script-src ve style-src kurallarına tabidir. Bir politika, SVG'nin sunucusunu listelemiyorsa dosyayı doğrudan reddeder — bu da dışarıdan bağlamak yerine kendi dosyanızı barındırmanız için bir nedendir.

Erişilebilirlik: title, desc ve etiket

Bir SVG, ek bir bilgi eklemeden ekran okuyucuya hiçbir anlam taşımaz. Öğeye role="img", adı için <title>, uzun açıklaması için bir <desc> verin ve hepsini aria-labelledby ile birbirine bağlayın:

<svg role="img" aria-labelledby="badgeTitle badgeDesc" viewBox="0 0 24 24">
  <title id="badgeTitle">Doğrulanmış rozet</title>
  <desc id="badgeDesc">İçinde beyaz onay işareti bulunan mavi bir daire</desc>
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#fff" stroke-width="2" fill="none"/>
</svg>

İki alışkanlık daha kazandırır. Metni yola çevrilmiş çizgilere dönüştürmek yerine gerçek <text> öğeleri kullanın — ekran okuyucular gerçek metni okur ve metin seçilebilir, aranabilir kalır. SVG tamamen dekoratifse, aria-hidden="true" ekleyin (ya da arka plan görseli olarak bırakın) ki yardımcı teknolojiler onu tamamen atlasın.

Yine de PNG'ye rasterize etmeniz gereken durumlar

Vektör evrensel değildir. Birçok gerçek teslimat kanalı SVG'yi reddeder ya da bozar; tek güvenli cevap, doğru boyutta bir PNG'dir:

• E-posta istemcileri: Outlook — özellikle Windows işleyicisi — SVG'yi güvenilir biçimde çizmez; işlemsel e-postalar bit eşlemi tek güvenli seçenek olduğu için hâlâ PNG kullanır.
• Sosyal paylaşım kartları: Open Graph ve Twitter Card ayrıştırıcıları og:image adresinizi çeker; çoğu raster görseli güvenilir gösterirken SVG önizlemesi sık sık reddedilir ya da boş döner.
• Favicon'lar: modern tarayıcılar .svg favicon kabul eder, ama Apple touch icon ve eski araçlar PNG ister (apple-touch-icon.png) — ikisini de verirsiniz.
• Eski tarayıcılar ve WebView'lar: 2017 öncesi her şey, bazı gömülü WebView'lar ve eski kiosklar SVG'yı hiç desteklemez.
• Yükleme formları: CMS, pazar yeri ve stok tasarım platformları, addan dolayı .svg dosyasını — içinde betik olabilir diye — reddeder; PNG her doğrulayıcıdan geçer.

SVG'yi PNG'ye çevirin — tarayıcınızda, Convrs'te

En temiz iş akışı, SVG'yi kaynak doğru olarak tutup yalnızca talep eden teslimat kanalı için rasterize etmektir. Convrs'ün SVG'yi PNG'ye dönüştürme aracı herhangi bir SVG'yi tarayıcınızda keskin bir PNG'ye çevirir: dosyayı yapıştırın ya da bırakın, piksel boyutunu seçin (örneğin retina simge için 256, 512 ya da 1024) ve sonucu indirin. Dönüşüm tamamen kendi sekmenizdeki Canvas API'sinde çalışır — dosya hiçbir zaman yüklenmez, hiçbir sunucu onu görmez. Kayıt yok, kuyruk yok; güveneceğiniz tek şey, zaten elinizdeki tarayıcı.

Vektörü saklayın. Dünyanın gerektirdiği yerde rasterize edin. Ve bir tasarımcı size bir daha 3 megabaytlık logo gönderirse, tam olarak ne diyeceğinizi biliyorsunuz.