SVG dosyası nedir (ve SVG’yi WordPress’e nasıl yüklersiniz)?

SVG dosyalarının ana nedeni, geliştiriciler ve tasarımcılar arasında çok popülerdir, çünkü görüntü formatının boşaltılabilmesi, genellikle daha küçük (bazen oldukça küçük) ve retina ekranında paketlenmemesidir. WordPress varsayılan olarak, esas olarak güvenlik sorunları nedeniyle SVG dosya biçimini yüklemenize izin vermez.
Bugün SVG’nin ne olduğunu, nasıl yararlı olabileceğini ve WordPress SVG desteğini nasıl etkinleştirebileceğinizi keşfedeceğiz. Vektör görüntü formatına geçmeye karar verirseniz tarayıcı desteğini ve bazı uyarıları da tartışacağız.
Umarım bir gün WordPress Core’un bir parçası olarak SVG’ye sahip olacağız, ancak orada yeterli değiliz.
SVG dosyası nedir? SVG (ölçeklenebilir vektör grafikleri), web siteleri ve markalar tarafından web sitelerinde logolar ve simgeler 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 tanımlar: SVG (Ölçeklenebilir Vektör Grafikleri), etkileşim ve animasyon desteğine sahip iki boyutlu grafikler için XML tabanlı bir vektör görüntü biçimidir. SVG spesifikasyonları, 1999’dan beri World Wide Web Konsorsiyumu (W3C) tarafından geliştirilen açık standartlardır. SVG dosyalarını metin kodunuz veya düzenleyicinizle bile manipüle edebilirsiniz. SVG şu anda tüm web sitelerinin% 33’ü tarafından kullanılmaktadır ve aşağıda görebileceğiniz gibi, evlat edinme seviyesi hızla gelişmektedir. Google, Reddit, Dropbox, ESPN ve hatta SVG kullanarak Kinsta’daki kendi web sitemiz gibi popüler siteler.

SVG kullanan istatistikler Nisan 2020 – Nisan 2021 SVG Dosya Dosya Desteği şu anda mobil tarayıcılar dahil tüm ana tarayıcılar tarafından desteklenmektedir. Karşılaşabileceğiniz tek sorun, IE8 için hala desteğe ihtiyacınız varsa, umduğumuz şey değildir. IE8, tarayıcı pazar payının yalnızca% 0,36’sına sahiptir ve artık desteklenmemektedir. İşte Lubos’tan geliştiricilerin neden IE8, IE9 ve IE10’u desteklemeyi bırakması gerektiği konusunda iyi bir makale. İş açısından bakıldığında, bu her zaman mümkün olmayabilir, ancak bazı iyi noktalar ortaya koydu. Umutsuzluk nedenleriyle hala IE8 desteğine ihtiyacınız varsa, SVG görüntüsünüz için geriye doğru görüntüyü (PNG veya JPG) belirleyebilirsiniz, ancak bugün tartışmayacağız. Aşağıda desteklenen tarayıcıların bir listesi bulunmaktadır: Internet Explorer 9, 10, 11+ ve Edge
Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10+
iOS Safari 3.2+
Android Tarayıcı 3+
Android 86+ için Firefox
Opera Mini (hepsi)
Opera hücresel 12+
Android 89+ için Chrome
Android 12.12+ için UC tarayıcısı
Samsung Internet 4+
QQ tarayıcı 10.4
Baidu Tarayıcı 7.12
Kaios Browser 2.5
SVG Tarayıcı, SVG dosyasını kullanmanın avantajını destekler SVG dosyası vektör biçimidir, yani dosyanın tarayıcı ve fotoğraf düzenleme aracında otomatik olarak boşaltılabileceği anlamına gelir. Bu, grafik tasarımcılar ve web için iyi olur. Genellikle Photoshop, Sketch veya Boya gibi araçlarda PNG veya JPG’yi düzenlemeye çalıştığınızda, piksel olmadan artıramazsınız. SVG ile sınırsız miktarda artırabilirsiniz ve herhangi bir zamanda mükemmel piksel (veya mükemmel vektörler demeliyiz) görüneceklerdir. Bu yüzden retina için kullanım için iyi bir görüntü formatıdır. Dosyanın kendisine bağlı SVG içeriği dizine eklenecek ve Google’ın resim aramasında görünecektir. Bunu doğrudan Kinsta’da daha fazla resim arayarak kullandığımız SVG illüstrasyonuyla görebilirsiniz. NOT: Sıradaki SVG veya daha doğrusu yalnızca koddan oluşan, genellikle dizine eklenmez. SVG geleneksel olarak (her zaman değil) dosya boyutlarında PNG veya JPG’den daha küçük. SVG kullanarak, genel sayfa boyutunu azaltacağınız için WordPress sitenizi gerçekten hızlandırabilirsiniz. Genki, SVG ve PNG ile JPEG boyutunu karşılaştırdığı iyi bir makale yazdı ve bu bizim JPG’ye karşı JPEG karşılaştırmamız. Aşağıda, üç farklı görüntü türünü karşılaştırdığı testten bazı sonuçlar verilmiştir.

Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Nowjpg abone olun (optimize edilmiş boyut: 81.4 kb)
JPG PNG görüntüsü (optimize edilmiş boyut: 85.1 kb)
PNG görüntüsü SVG (optimize edilmiş boyut: 6.1 kb)
SVG görüntüsü yukarıda gördüğünüz gibi, SVG dosya boyutunu JPG’ye kıyasla% 92.51 oranında azalttı. Ve PNG ile karşılaştırıldığında%92.83. Bu, dosya boyutunda oldukça etkileyici bir farktır. Bununla birlikte, daha ayrıntılı görüntüleri test ettiğinde bir uyarı var, SVG sonunda JPG veya PNG’den daha büyük hale geldi.

SVG’nizi ele almaya hazır olmaları için tüm sunucularımızda GZIP’yi etkinleştirdik. Ücretsiz Kinsta’yı deneyin.

Bu nedenle birçok site, logolar, simgeler, vb. Gibi daha az ayrıntılı görüntüler için SVG’yi kullanır. Çünkü dosya boyutunda önemli bir düşüş görecekler. Ancak daha fazla resim için ayrıntılı olarak, belki blogunuzu “Üstün Görüntü” yayınlamak gibi, PNG veya JPG kullanmaya devam etmek isteyebilirsiniz, ancak yine de optimize edebilirsiniz. Birçok web sitesi, her iki dosya türünü de aynı anda makul bir yerde kullanarak hibrit bir yaklaşım kullanır.

Ayrıca, Facebook ve Twitter gibi sosyal medya ağlarının SVG’yi paylaşmak için desteklemediğini belirtmek önemlidir. Üstün görüntünüz için SVG kullanıyorsanız, Yoast SEO özelliğinden yararlanmalı ve OG ve Etiket Meta için PNG veya JPG yüklemelisiniz, eğer değilse, üstün görüntünüzün hiç görünmediği riskini alabilirsiniz. SVG güvenliği neden önemlidir SVG’nin WordPress Core’un bir parçası olmamasının nedeni, ele alınması gereken güvenlik sorunlarının olmasıdır. 2013 yılında başlayan WordPress’in (#24251) özünde SVG hakkında aktif bir tartışmaya katılabilirsiniz. SVG, normalde etkilenmeyen görüntü formatları etkilenmeyen farklı güvenlik açıkları için doğal olarak açan bir XML dosyasıdır. Bu, XML (XXE) harici varlık saldırıları, bomba -nesting varlıkları ve XSS.Mario Heiderich’in saldırılarını içerir. Verilen bir örnek, JavaScript’in SVG’ye gömülmesi ve aslında Mario’yu Skype’da aramayı başarmasıdır. Bu biraz korkutucu! Secuppress, WordPress güvenlik eklentisi yazarı, WordPress’e SVG eklerken de dikkate alındı ve bunu doğru şekilde yapmanın önemi. Birçok SVG eklentisi, aşağıdaki kodu kullanan depolardır, bu da yalnızca MIME Türünün SVG’nin WordPress Media Kütüphanesine yüklenmesine izin vermesine izin verir. Bu bunu yapmanın güvenli bir yolu değil! Yani, gitmeyin ve gördüğünüz ilk ücretsiz SVG eklentisini indirin veya bu kodu kopyalayın ve bunu yapmaya hazır olduğunuzu düşünüyorsunuz.
İşlev cc_mime_types ($ mimes) {$ mimes [‘svg’] = ‘image/svg+xml’; $ Mimes dön; } add_filter (‘upload_mimes’, ‘cc_mime_types’); Çözüm, SVG’nin sterilize edilmesi gerektiğidir. Sanitasyon temel olarak güvenlik sorunlarını (kod enjeksiyonu gibi), kod çatışmalarından ve hatalardan kaçınmak için kod veya girdiyi temizlemektir. Bu, kodlama verilerini kodlama, tellerin filtreleme ve doğrulaması vb. Gibi şeyleri içerebilir. SVG-sanitizer Daryll Doyle Kütüphanesi, “PHP’de iyi bir SVG temizleyici inşa etme çabaları” olarak adlandırdığı bir rol oynuyor. SVG Temizlik Gösterisine bakınız. SVG Temizleme Demoları, sitenizde SVG’yi yüklemek için erişimi olanın kim olduğunu düşünmek için de önemlidir. Örneğin, çok yazar bir sitede iseniz, diğer insanların yükleyebileceğini bilmiyorsunuz, sitenizi gösterin. SVG yüklemelerini yöneticilere ve bazı güvenlik sorunlarını anlayanlara sınırlandırılması önerilir. SVG WordPress Desteği Nasıl Etkinleştirilir Güvenle Daryll, SVG görüntülerini WordPress Medya Kütüphanenize yüklerken SVG-Sanitizer Kütüphanesini kullanan bir WP SVG (SAFE SVG olarak da bilinir) geliştirdi. Bu eklenti ayrıca medya kütüphanesinde her zamanki gibi SVG’yi görmenizi sağlar.
WP SVG eklentiniz, WordPress deposundan ücretsiz olarak güvenli SVG’yi indirebilir veya “Yeni Ekle” eklentisi altındaki WordPress kontrol panelinizde arayarak indirebilir. Kalkabilir ve birkaç basit tıklamayla gidebilirsiniz. Bu eklenti bilgisi en son güncellemeleri almadı, bu nedenle üretim sitenize yüklemeden önce performans sitesinde test ettiğinizden emin olun. Ayrıca, belirli kullanıcıları SVG ve ek SVG optimizasyonunu yüklemek için sınırlamanızı sağlayan wpsvg.com adresinde bulunan birinci sınıf bir sürüm de vardır. Aşağıdaki örnekte, yalnızca ücretsiz sürümü kullanacağız. Alternatif bir eklenti olarak, SVG desteğini görmek isteyebilirsiniz. SVG’nizi ele almaya hazır olmaları için tüm sunucularımızda GZIP’yi etkinleştirdik. Ücretsiz Kinsta’yı deneyin.

SVG dosyanızı yüklemeden önce, resimden biraz farklı davrandıklarını anlamak önemlidir. SVG’yi fotoğraf düzenleme cihazınızdan dışa aktarırken, metni bir eğri olarak dışa aktarmak (veya bir taslak yapmak) isteyeceksiniz, eğer değilse, çeşitli tarayıcılarda biraz farklı olabilir.
Affinity Designer – SVG eğrisi olarak metni dışa aktarma eklentisini yükledikten sonra ayar yok, yüklendiğinde yalnızca SVG’nizi temizleyecektir. Aşağıdaki test sitemizde, logomuzu SVG dosyalarıyla değiştirmemizi görebilirsiniz, medya kütüphanesinde her zamanki gibi görülebilir.
WordPress Media Kütüphanesi’ndeki SVG, WordPress başlığımızdaki logoyu SVG dosyamıza değiştirmek için tema kontrol panellerimizi kullanmamızı sağlar. Aşağıda .svg dosyasını gerçekten sunarken görebilirsiniz. Ve şimdi retina ekranında güzel görünüyor.

SVG WordPress başlığında yapmamız gereken bir ek ince ayar var. IE9-11’de masaüstü ve hücresel SVG dosyası doğru şekilde geri çağrılmamıştır. Yükseklik ve genişlik ekleyin Bu sorunu düzeltin. Bu tema başına farklı olabilir, ancak test sitemizde sadece header.php dosyalarımızı değiştirir ve bu özel boyutu ekleriz. Bazı WordPress temaları, performans nedenleriyle iyi olmayan ölçeklendirmeyi değiştirmek için CSS kullanır, ancak bu nedenle SVG IE ölçeklendirme problemi için değiştirilen IE.File Header.php problemini düzeltmek için ek kodlar eklemeniz gerekebilir! Şimdi SVG WordPress desteğini güvenli bir şekilde etkinleştirdiniz. Bu eklenti ve / veya yöntem WordPress Core tarafından desteklenmez veya desteklenmez, bu nedenle elbette kendi risklerinizle kullanın. Ancak, SVG’yi yalnızca mime tipi parçalarla yüklediyseniz, bu şekilde yapın. Ayrıca, daha önce hiç SVG kullanmadıysanız, “Image/SVG+XML” dosya türü için sunucunuzda GZIP’yi etkinleştirdiğinizden emin olun. Bu, sıkıştırıldıklarından emin olacak ve en kısa sürede yüklenecektir. Bazen Sysadmin yalnızca daha standart dosya türlerini etkinleştirir. Not: GZIP, SVG için tüm Kinsta sunucularında etkinleştirildi. SVG Özeti, sitenizin görünümünü iyileştirmenin iyi bir yoludur! En iyi performansı elde etmek için SVG, PNG ve JPG’yi birlikte kullanmanızı öneririz, çünkü çok ayrıntılı görüntüler SVG formatında olduğu kadar iyi görünmeyecektir. SVG, her ekranda simgelerle birlikte mükemmel piksel göründüğünden emin olmak için logonuz için mükemmeldir. Ne düşünüyorsun? SVG’yi WordPress sitenizde kullandınız mı?

SVG dosyası nedir (ve SVG'yi WordPress'e nasıl yüklersiniz)?