SVG Dosyası Nedir (Ve SVG'leri WordPress'e Nasıl Yüklersiniz)?

SVG dosyalarının geliştiriciler ve tasarımcılar arasında özellikle popüler olmasının ana nedeni, ölçeklenebilir bir görüntü formatı olmaları, genellikle dosya boyutunun daha küçük olması (bazen oldukça fazla) ve retina ekranlarında pikselleşmemeleridir. WordPress varsayılan olarak, esas olarak güvenlik endişeleri nedeniyle SVG dosya biçimini yüklemenize izin vermez.

Bugün SVG'lerin ne olduğuna, nasıl faydalı olabileceklerine ve WordPress SVG desteğini nasıl güvenli bir şekilde etkinleştirebileceğinize bakacağız. Vektör görüntü formatına geçmek istediğinize karar verirseniz, tarayıcı desteğinin yanı sıra bazı uyarıları da tartışacağız.

Umarım bir gün WordPress çekirdeğinin bir parçası olarak SVG'ye sahip oluruz, ancak henüz tam olarak orada değiliz.

SVG Dosyası Nedir?

SVG (Ölçeklenebilir Vektör Grafikleri), web siteleri ve markalar tarafından web sitelerinde logo ve simgeleri görüntülemek için yaygın olarak kullanılan XML tabanlı bir vektör görüntüsüdür . Wikipedia, SVG'yi şu şekilde tanımlar:

Bir SVG (ölçeklenebilir vektör grafikleri), etkileşim ve animasyon desteği ile iki boyutlu grafikler için XML tabanlı bir vektör görüntü formatıdır. SVG spesifikasyonu, 1999'dan beri World Wide Web Consortium (W3C) tarafından geliştirilen açık bir standarttır.

SVG dosyalarını kod veya metin düzenleyicinizle bile değiştirebilirsiniz. SVG'ler şu anda tüm web sitelerinin %33'ü tarafından kullanılıyor ve aşağıda görebileceğiniz gibi, benimseme oranı hızla artıyor. Google, Reddit, Dropbox, ESPN ve hatta Kinsta'daki kendi web sitemiz gibi popüler siteler SVG'leri kullanır.

SVG Dosya Tarayıcı Desteği

SVG dosyaları şu anda mobil tarayıcılar dahil tüm büyük tarayıcılar tarafından desteklenmektedir. Karşılaşabileceğiniz tek sorun, IE8 için hala desteğe ihtiyacınız olup olmadığıdır, umarız istemezsiniz. IE8 yalnızca yaklaşık %0,36 tarayıcı pazar payına sahiptir ve artık desteklenmemektedir. İşte geliştiricilerin neden IE8, IE9 ve IE10'u desteklemeyi bırakmaları gerektiğine dair Lubos'un harika bir makalesi. İş açısından bu her zaman mümkün olmayabilir, ancak bazı iyi noktalara değiniyor. Umutsuz bir nedenle hala IE8 desteğine ihtiyacınız varsa, SVG resimleriniz için bir geri dönüş resmi (PNG veya JPG) tanımlayabilirsiniz, ancak bugün buna girmeyeceğiz. Aşağıda desteklenen tarayıcıların bir listesi bulunmaktadır:

• Internet Explorer 9, 10, 11+ ve Edge
• Firefox 2+
• Krom 4+
• Safari 3.1+
• Opera 10+
• iOS Safari 3.2+
• Android Tarayıcı 3+
• Android 86+ için Firefox
• Opera Mini (tümü)
• Opera Mobil 12+
• Android 89+ için Chrome
• Android 12.12+ için UC Tarayıcı
• Samsung İnternet 4+
• QQ Tarayıcı 10.4
• Baidu Tarayıcı 7.12
• KaiOS Tarayıcı 2.5

SVG Dosyalarını Kullanmanın Faydaları

SVG dosyaları bir vektör biçimidir, yani hem tarayıcılarda hem de fotoğraf düzenleme araçlarında otomatik olarak ölçeklenebilirler . Bu onları hem grafik hem de web tasarımcıları için harika kılar. Normalde bir PNG veya JPG'yi Photoshop, Sketch veya Paint gibi bir araçta düzenlemeye çalıştığınızda, bunları pikselleştirme olmadan yükseltemezsiniz. SVG'lerle, onları sonsuz bir miktara yükseltebilirsiniz ve her seferinde piksel mükemmel (veya vektör mükemmel demeli miyiz) görüneceklerdir. Bu nedenle retina ekranlar için harika bir görüntü formatıdır.

Google, SEO amaçları için harika bir haber olan SVG'leri dizine ekler . Bir dosyanın kendisine bağlı olan SVG içeriği dizine eklenecek ve Google görsel aramasında görünecektir. Bunu, gelişmiş bir görsel arama yaparak Kinsta'da kullandığımız SVG illüstrasyonları ile ilk elden görebilirsiniz. Not: Satır içi SVG'ler veya daha doğrusu yalnızca koddan oluşanlar genellikle dizine eklenmez.

SVG'ler geleneksel olarak (her zaman değil) dosya boyutu olarak PNG'lerden veya JPG'lerden daha küçüktür . SVG'leri kullanarak, genel sayfa boyutunuzu küçülteceğiniz için WordPress sitenizi gerçekten hızlandırabilirsiniz. Genki, SVG ile PNG ve JPEG boyutunu karşılaştırdığı harika bir makale yazdı ve işte JPG ve JPEG karşılaştırmamız. Aşağıda, üç farklı görüntü türünü karşılaştırdığı testinden birkaç çıkarım bulunmaktadır.

JPG (optimize boyut: 81,4 KB)

PNG (optimize boyut: 85,1 KB)

SVG (optimize boyut: 6,1 KB)

Yukarıda görebileceğiniz gibi, SVG, JPG ile karşılaştırıldığında dosya boyutunda %92.51'lik bir azalmadır . Ve PNG ile karşılaştırıldığında, %92.83 . Bunlar oldukça etkileyici dosya boyutu farklılıkları. Bununla birlikte, bir uyarı var, daha ayrıntılı görüntüleri test ettiğinden, SVG'lerin boyutu sonunda JPG veya PNG'den daha büyük hale geldi.

Bu nedenle birçok site, dosya boyutlarında önemli bir azalma göreceklerinden logolar, simgeler vb. gibi daha az ayrıntılı görüntüler için SVG'leri kullanır. Ancak, belki de blog yayınınız "özellikli resimler" gibi çok ayrıntılı daha fazla resim için bir PNG veya JPG'ye bağlı kalmak isteyebilirsiniz, ancak yine de bunları optimize edebilirsiniz. Birçok web sitesi, mantıklı olduğu yerde her iki dosya türünü birlikte kullanarak karma bir yaklaşım kullanır.

Ayrıca, Facebook ve Twitter gibi sosyal medya ağlarının paylaşım için SVG'leri desteklemediğini de belirtmek önemlidir. Bu nedenle, öne çıkan görselleriniz için SVG kullandıysanız, Yoast SEO özelliğini kullanmanız ve OG ve meta etiketler için bir PNG veya JPG yüklemeniz gerekir, aksi takdirde öne çıkan görselinizin hiç görünmemesi riskini alabilirsiniz.

SVG Güvenliği Neden Önemlidir?

SVG'nin henüz WordPress çekirdeğinin bir parçası olmamasının nedeni, ele alınması gereken güvenlik endişelerinin olmasıdır. SVG'lerle ilgili aktif tartışmayı 2013'te başlatılan WordPress çekirdeğinde (#24251) takip edebilirsiniz. SVG, normal görüntü biçimlerinin etkilenmediği farklı güvenlik açıklarına kendi başına açan bir XML dosyasıdır. Bunlar, XML harici varlık saldırılarını (XXE), iç içe bomba varlıklarını ve XSS saldırılarını içerir.

Mario Heiderich, SVG dosyalarıyla aktif içerik enjeksiyonundan kaynaklanan güvenlik riskleri hakkında bilgilendirici bir sunum yayınladı. Verilen bir örnek, JavaScript'in bir SVG'ye gömülü olması ve aslında Mario'yu Skype'ta aramayı başarmasıydı. Bu biraz korkutucu! Bir WordPress güvenlik eklentisinin yazarları olan SecuPress, WordPress'e SVG eklerken dikkatli olunması konusuna ve bunu doğru şekilde yapmanın önemine de değindi.

Depodaki birçok SVG eklentisi, MIME türünün SVG'lerin WordPress medya kitaplığına yüklenmesine izin vermesini sağlayan aşağıdaki kodu kullanır. Bunu yapmanın güvenli yolu bu değil! Bu yüzden gidip gördüğünüz ilk ücretsiz SVG eklentisini indirmeyin veya bu kodu kopyalayıp yapıştırın ve hazır olduğunuzu düşünün.

 function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types');

Çözüm, SVG'lerin sterilize edilmesi gerektiğidir . Temizleme, temel olarak güvenlik sorunlarından (kod yerleştirme gibi), kod çakışmalarından ve hatalardan kaçınmak için kodun veya girdinin temizlenmesidir. Bu, verileri kodlama, dizeleri filtreleme ve doğrulama gibi şeyleri gerektirebilir. Daryll Doyle'un "PHP'de iyi bir SVG temizleyici oluşturma girişimi" olarak adlandırdığı SVG-Sanitizer kitaplığı burada devreye giriyor. Eylem halinde görmek için SVG dezenfektanının demosuna göz atın.

Ayrıca sitenizde kimlerin SVG yükleme erişimine sahip olduğunu düşünmeniz de önemlidir. Örneğin, çok yazarlı bir sitedeyseniz, başka birinin sitenizi açığa çıkararak ne tür SVG yükleyebileceği hakkında hiçbir fikriniz yoktur. SVG yüklemelerinin yöneticilere ve bazı güvenlik endişelerini anlayanlara kısıtlanması tavsiye edilir.

WordPress SVG Desteğini Güvenle Etkinleştirme

Daryll, WordPress medya kitaplığınıza SVG görüntüleri yüklerken SVG -Sanitizer kitaplığını kullanan WP SVG (Güvenli SVG olarak da bilinir) adlı bir eklenti geliştirdi. Eklenti ayrıca medya kitaplığındaki normal resimler gibi SVG'leri görüntülemenizi sağlar.

Güvenli SVG'yi WordPress deposundan ücretsiz olarak veya WordPress kontrol panelinizde “Yeni Ekle” eklentileri altında arayarak indirebilirsiniz. Birkaç basit tıklama ile kalkıp gidebilirsiniz.

Ayrıca, wpsvg.com'da bulunan ve belirli kullanıcıların SVG'leri yüklemesini ve ek SVG optimizasyonunu kısıtlamanıza izin veren bir premium sürüm de bulunmaktadır. Aşağıdaki örnekte, sadece ücretsiz sürümü kullanacağız.

Alternatif bir eklenti olarak SVG Desteğine göz atmak isteyebilirsiniz.

SVG dosyanızı yüklemeden önce, resimlerden biraz farklı davrandıklarını anlamanız önemlidir. Fotoğraf düzenleme aracınızdan bir SVG'yi dışa aktarırken, metni eğriler olarak dışa aktarmak (veya bir anahat oluşturmak) isteyeceksiniz, aksi takdirde çeşitli tarayıcılarda biraz farklı olabilir.

Eklentiyi yükledikten sonra hiçbir ayar yoktur, yükleme sırasında SVG'lerinizi sterilize eder. Aşağıdaki test sitemizde logomuzu bir SVG dosyasıyla değiştirdiğimizi görebilirsiniz, medya kitaplığında normal şekilde görüntülenebilir.

Bu ayrıca WordPress başlığımızdaki logoyu SVG dosyamıza değiştirmek için temamızın kontrol panelini kullanmamıza izin verdi. Aşağıda gerçekten .svg dosyasını sunduğunu görebilirsiniz. Ve şimdi retina ekranlarda çok güzel görünüyor.

Yapmamız gereken ek bir tweak var. IE9-11'de masaüstü ve mobil cihazlarda henüz SVG dosyalarını düzgün şekilde ölçeklendirmez. Yükseklik ve genişlik eklemek bu sorunu giderir. Bu, temaya göre değişebilir, ancak test sitemizde header.php dosyamızı değiştirdik ve bu özel boyutları ekledik. Bazı WordPress temaları, ölçeklemeyi değiştirmek için CSS kullanır, bu performans açısından iyi değildir, ancak bu nedenle IE sorununu çözmek için ek kod eklemenizi gerektirebilir.

Ve bu kadar! Artık WordPress SVG desteğini güvenle etkinleştirdiniz. Bu eklenti ve/veya yöntem WordPress çekirdeği tarafından desteklenmemektedir veya desteklenmemektedir, bu nedenle elbette riski size ait olmak üzere kullanın. Ancak, zaten yalnızca MIME türü snippet ile SVG'leri yüklüyorsanız, lütfen bunu bu şekilde yapın.

Ayrıca, daha önce hiç SVG kullanmadıysanız, "image/svg+xml" dosya türü için sunucunuzda GZIP'nin etkinleştirildiğinden emin olun. Bu, sıkıştırılmalarını sağlayacak ve mümkün olduğunca hızlı yüklenecektir. Bazen sistem yöneticileri yalnızca daha standart dosya türlerini etkinleştirir. Not: GZIP, halihazırda SVG'ler için tüm Kinsta sunucularında etkinleştirilmiştir.

Özet

SVG'ler, sitenizin görünümünü iyileştirmenin harika bir yoludur! En iyi performansı elde etmek için SVG'leri, PNG'yi ve JPG'leri birlikte kullanmanızı öneririz, çünkü çok ayrıntılı görüntüler SVG formatında o kadar iyi performans göstermez. SVG'ler, simgelerle birlikte her ekranda mükemmel piksel görünmesini sağlamak için logonuz için harikadır.

Düşüncelerin nelerdir? WordPress sitenizde henüz SVG'leri kullandınız mı?