WordPress'te SVG Nasıl Kullanılır?

SVG'nin 2000'li yılların başında standart hale getirilmesine rağmen, son derece çekici görüntü formatı, zayıf tarayıcı desteği nedeniyle çok fazla gün ışığı görmedi. SVG hızla web'deki fiili görüntü formu haline geldiğinden, tüm bunlar son yıllarda büyük ölçüde değişti.

Ve SVG'ye aşık olanlar sadece grafik tasarımcılar değil, aynı zamanda genel görüntü boyutunu küçülterek bloglarını hızlandırmak isteyen WordPress kullanıcıları da. Bu gönderi, WordPress tabanlı bir sitede SVG'nin nasıl kullanılacağı konusunu keşfedecek.

SVG nedir?

SVG (Ölçeklenebilir Vektör Grafikleri), grafikleri web üzerinde ve uygulamalar içinde görüntülemek için XML tabanlı bir görüntü formatıdır. Temel olarak, bir SVG dosyası, bir SVG görüntüsü içinde kullanılan farklı şekil ve renkleri belirten bir XML kodu koleksiyonudur.

SVG dosyalarını bir metin düzenleyiciyle açabildiğiniz için, temel CSS3 ve JS kodunu kullanarak özelleştirmeler yapmak da kolaydır. Sonuç olarak, SVG'ler çok yönlü esneklikleri nedeniyle modern web kullanıcıları tarafından oldukça tercih edilmektedir.

En önemlisi, W3C, SVG'yi endüstri lideri bir standart olarak tanır. Dolayısıyla SVG, DOM, HTML ve benzeri gibi diğer Web tabanlı teknolojilerle birlikte kusursuz bir şekilde çalışır.

SVG neden önemlidir?

SVG görüntüleri vektör tabanlıdır, sonuç olarak bir SVG görüntüsü, kaliteden ödün vermeden ekran boyunca sonsuz olarak ölçeklenebilir. Bu bağlamda temel etkileşim Tarayıcı XML'dir; Tarayıcının, her artış veya azalışta XML belirtimini çizdiği yer.

SVG dosyalarının PNG veya JPEG gibi geleneksel biçimlerden çok daha esnek olduğunu söylemeye gerek yok. Ve CSS ile JavaScript arasındaki doğrudan etkileşim, hareket halindeyken SVG resimlerinizi uyarlayabileceğiniz anlamına gelir. Yeni bir tasarım üzerinde veya başka bir şekilde çalışırken bu çok önemlidir.

Performansla ilgili olarak, SVG görüntüleri, herhangi bir muadilinden önemli ölçüde daha küçük olma eğilimindedir. Sonuç olarak, illüstrasyonların, logoların ve simgelerin vektör grafikleri olarak oluşturulduğunu görmek yaygındır. Bu aynı zamanda daha sonra makalede kısaca bahsedeceğimiz birçok Icon Fonts'un geliştirilmesine de yol açmıştır.

Özetle, SVG'ler esneklik, küçültülmüş görüntü boyutu ve WordPress sitenizdeki görüntü performansını iyileştirmek için güçlü bir temel sağlar.

SVG görüntüleri nasıl oluşturulur?

SVG görüntüleri oluşturmak iki şekilde olabilir: 'kod' yazmak ve modern bir grafik tasarım yazılımı kullanmak. XML komut dosyası yazmak olan ilk yöntem, SVG dosyalarını oluşturmanın geleneksel yoludur, ancak yavaş ve verimsiz bir teknik olduğu kanıtlanabilir.

Basit bir kareler koleksiyonu, XML biçiminde şöyle görünebilir:

Gördüğünüz gibi, bunu karmaşık grafikler için tekrar tekrar yazmak, ayağınıza ateş etmekle aynı şey.

Diğer yöntem ise yazılım kullanmaktır ve bu, SVG grafikleri oluşturmanın en hızlı ve en verimli yoludur. Vektör tabanlı yazılımla, grafikler oluşturmaya ve daha sonra bunları hazır SVG dosyaları olarak dışa aktarmaya odaklanabilirsiniz.

Affinity Designer, iyi bilinen bir profesyonel vektör düzenleme programıdır, ancak Adobe Illustrator, Sketch, Figma ve Inkscape gibi yazılımlar da öyle.

Hangi yazılımı kullanmaya karar verirseniz verin, gerçekten önemli olan tek şey, oluşturmak istediğiniz grafik türü için planlarınızdır. Dışa aktarma işlevi, tüm modern programlarda aynı şekilde çalışır.

Söylemeye gerek yok, SVG her zaman aynı XML yapısıdır. Böylece, SVG görüntülerini hem Belge olarak kullanabilir hem de Satır İçi olarak ekleyebilirsiniz.

WordPress SVG'yi destekliyor mu?

Kulağa garip gelse de WordPress kapsamındaki bir platform aslında SVG dosya biçimini desteklemiyor. Ancak yalnızca ciddi güvenlik endişeleri nedeniyle.

Görüyorsunuz, PNG/JPG/GIF dosya türlerinin aksine — SVG rasterleştirilmiş bir görüntü değil, bir vektördür. Sonuç olarak, SVG, JavaScript istismarının risklerine maruz kalır ve WordPress, varsayılan olarak WordPress'te SVG'ye izin vermemeyi seçmiştir. Her açıdan mantıklı.

WordPress katkıda bulunanlar uzun yıllardır SVG hakkında konuşsalar da, güvenlik sorunlarını büyük ölçekte önlemek için ele alınması gereken çok fazla açı var.

Bu nedenle, bu sorunu çözmenin tek yolu eklentiler veya Tema İşlevlerini kullanarak SVG'yi dosya biçimi olarak etkinleştirmektir.

Bir WordPress web sitesinde SVG görüntüleri nasıl etkinleştirilir?

Eklentiler kısmına geçmeden önce, tema dizininizdeki function.php dosyası aracılığıyla WordPress'te SVG'yi etkinleştirebilirsiniz. Bu kesinlikle en hızlı yoldur, ancak aynı zamanda SVG'yi ham formatta etkinleştirdiğiniz için en az güvenlidir.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = dizi();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

$file_types döndür;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Ve diğer – daha güvenli – seçeneğiniz eklentileri kullanmaktır. İşte WordPress'te SVG'yi etkinleştirmek için en önemli eklentilerden üçü.

SVG Desteği

SVG desteği eklemek işin yarısıdır, ayrıca özel stil, animasyon efektleri eklemek ve kısıtlamaları etkinleştirmek isteyebilirsiniz. Ancak tüm bunları yapabilmek için biraz desteğe ihtiyacınız var.

SVG Desteği ile — geleneksel Resim etiketini kullanarak gönderilerinize ve sayfalarınıza SVG dosyaları eklemeye başlayabilirsiniz. Örneğin, Resimlerinize yeni bir CSS sınıfı ekleyebilirsiniz: "style-SVG", yüklediğiniz SVG resminizi getirecek ve içeriğini bir satır içi ekranda görüntüleyecektir.

Bu eklentinin ana özellikleri şunlardır:

• WordPress Medya Kitaplığı içindeki SVG dosyalarının yönetimini etkinleştirin.
• Yüklenen SVG görüntülerini satır içi koda dönüştürün.
• Tüm SVG görüntülerine Alt ve Caption etiketleri eklemek için Görüntü Widget'ını destekler.
• Özel CSS kullanarak bireysel SVG görüntülerine stil verin.
• CSS3 ve JavaScript kullanarak animasyon efektleri uygulayın.
• Eklentinin kontrol panelindeki ayrıntılı ayarlar sayfaları.
• İzin tabanlı erişimi zorunlu kılın. Örneğin, yalnızca Yönetici ayrıcalıklarına sahip hesaplara yüklemeyi kısıtlayın.

Bu eklentinin sunduklarına rağmen, SVG istismarının risklerinin oldukça gerçek olduğu konusunda dikkatli olun. Güvenmediğiniz kullanıcılar için SVG dosya yönetimini etkinleştirmeyin. Bu nedenle, ideal olarak, bu özelliği yalnızca Yönetici düzeyindeki kullanıcılar için etkinleştirirsiniz.

Yinelemek gerekirse, yükleme ayrıcalıklarına sahip olan herkes yeni SVG dosyaları yükleyebilir, ancak SVG dosyaları XML'e dayalı olduğu için kötü niyetli enjeksiyonlar ve başka yollarla istismara açıktırlar.

Güvenli SVG

Safe SVG, potansiyel güvenlik riskleri konusunda endişelenmeniz konusunda size gönül rahatlığı sağlayacak bir eklentidir. Eklenti, yeni SVG yüklemelerini temizlemek ve kötü niyetli niyeti önlemek için özel olarak oluşturulmuştur. Ayrıca, Güvenli SVG, Medya Kitaplığınız aracılığıyla ne tür SVG dosyaları yüklediğinizi görme yeteneği ekler.

50.000 aktif kullanıcıyla, güvenli performansın mükemmel bir sicilini sağlamak için Safe SVG'ye güvenebilirsiniz. Bu eklentinin iki farklı versiyonu olduğunu belirtmekte fayda var; ücretsiz ve ücretli.

Ücretsiz sürüm, yeni yüklemeleri temizleme işlevi içerir ve ayrıca Medya Kitaplığı içinde SVG görüntüleme desteği ekler.

Pro sürümü seçerseniz, SVGO Optimizasyonu gibi ek özellikler elde edersiniz. Bu optimizasyon tekniği, SVG yüklemelerinizin dosya boyutunu daha da azaltacaktır.

Ayrıca Pro ile yeni SVG dosyalarını kimlerin yükleyebileceğini veya yükleyemeyeceğini seçebilirsiniz. Sonuç olarak, erişimi yalnızca belirli kullanıcılarla sınırlayabilirsiniz. Ve son olarak, eklentiyi satın alarak premium desteğe erişirsiniz – en çok ihtiyaç duyduğunuz anda sorularınıza yanıt alın.

Tam SVG Desteği Ekle

Listelediğimiz ilk iki eklenti ile makul sonuçlar alıyor olmalısınız. Ancak, Kısa Kodları kullanarak sitenize SVG ekleme fikrini beğendiyseniz, bu eklentiye göz atın.

Bu eklenti, WordPress'inize bazı SVG işlevleri ekler ve Alexey Ten'in bir fikrine dayanan bir SVG tekniği kullanır. SVG görüntülerini HTML'ye dahil etmenin bu yolu, şu anda en iyi performans ve uyumluluk kombinasyonuna sahip gibi görünüyor.

Tam SVG Desteği Ekle, SVG yüklemeyi ve kısa kod oluşturmayı sağlar. Ayrıca, özel CSS kullanarak her SVG öğesinin stilini özelleştirebilirsiniz. Son olarak, yüklediğiniz SVG'lerin herhangi biri veya tümü için bir yedek fotoğraf belirleyebilirsiniz.

WordPress için diğer bazı yararlı SVG eklentileri nelerdir?

Bir WordPress sitesine SVG desteği eklemenin yanı sıra, sitenize fayda sağlayabilecek başka hangi eklentiler var? Herkes ve büyükannesi, önemli performans avantajları olduğunu bilir. Hem dosya boyutu hem de tarayıcının vektör grafiklerini satır içi olarak oluşturma yeteneği açısından.

WP SVG Simgeleri

Simgeler görsel bir unsurdur ve bu tür unsurlar tasarımlara yeni bir hayat verme eğilimindedir. İlginçtir ki, bu eklenti kişisel ihtiyaçtan doğmuştur. Yazar, tasarımlarında daha fazla SVG dosyası uygulamaya başlamak istedi ancak buna bir çözüm bulamadı. Bu yüzden zamanını ve emeğini aldı ve WP SVG Simgelerini yarattı.

Bu eklentinin kullanımı çok kolaydır ve sitenizdeki mevcut simgeleri yalnızca birkaç tıklamayla değiştirebilirsiniz. Hepsinden iyisi, Retina ekranlar için her görüntüyü yeniden oluşturmanız gerekmez, maksimum genişliği ayarladığınız sürece simge otomatik olarak ölçeklenir.

Tıpkı yazarların durumunda olduğu gibi, bu eklenti her türlü geliştirme, çoklu site ve müşteri çalışması için olağanüstü. Herhangi bir kısıtlama olmaksızın, tema uyumluluğu veya bu türden herhangi bir şey hakkında endişelenmenize gerek yok.

Ayrıca, özel simge yüklemelerini etkinleştiren bir özellikli, teklifte premium bir sürüm var gibi görünüyor. Yani, entegre simgelerle sınırlı değilsiniz.

SVG Sosyal Menüsü

Bu, SVG görüntüleri aracılığıyla sosyal medya simgelerini görüntülemek için bir widget olarak çalışan bir eklentidir. Bu eklentiyi çalıştırmak için tek yapmanız gereken sosyal medya profillerinize bağlantılar içeren yeni bir WordPress menüsü oluşturmak.

Ardından, özel SVG Social Menu konumunu seçin ve yeni menüyü kaydedin. Daha sonra, SVG Sosyal Menü widget'ını kenar çubuğunuzda veya blogunuzun widget'a hazır diğer alanlarında kullanabilirsiniz.

Şu anda mevcut simgeler şu siteler ve platformlar içindir: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

SVG Logosu ve Metin Efektleri

SLATE, özel SVG efektleri eklemek için kısa kod desteği sağlayan bir eklentidir. Bu eklentiyi güçlü bir marka imajını tanıtmak, CTA widget'larını vurgulamak veya öğeleri kendi yollarıyla öne çıkarmak için kullanabilirsiniz. Kısa kod desteğinin akıllı kullanımı, efektlerinizi istediğiniz zaman düzenleyebileceğiniz ve özelleştirebileceğiniz anlamına gelir.

Örneğin, farklı renkleri, yazı tiplerini, filtreleri karıştırabilir ve dikkat çekici tasarım efektleri olarak kendini gösteren çok sayıda dolgu deseni kullanabilirsiniz. SLATE, bir vektör düzenleme yazılımı kadar yaratıcı özgürlük sunar, ancak yalnızca herhangi bir yazılım kullanmanıza gerek kalmaz!

Peki, temel özelliklerden bazıları nelerdir?

• Metin. Dikkat çekici ancak SEO dostu metin efektlerinin etkilerini çoğaltabilen kısa kodlar oluşturun. Yukarıdaki anlık görüntüde gördüğünüz gibi.
• Yazı tipleri. Özel yazı tiplerini nereden alacağınızdan emin değil misiniz? SLATE, Google Fonts'un devasa kitaplığıyla önceden paketlenmiş olarak geldiğinden endişelenmenize gerek yok.
• Desenleri doldurun. Harfler, seçtiğiniz bir dolgu deseni ile doldurulur. Dolgu desenlerinin parametreleri vardır. Benzersiz varyasyonlar oluşturmak için çeşitli boyutları, mesafeleri ve renkleri kontrol edin veya varsayılanların sizin için çalışmasına izin verin.

Ve çok daha fazlası! Bu eklenti, metninizi ve logolarınızı olağanüstü bir hassasiyetle şekillendirmek için bir güç merkezidir. Ve SVG aracılığıyla, daha az değil.

SVG grafiklerini nerede bulabilirsiniz?

Vektör grafik tasarımı konusunda önceden herhangi bir uzmanlığınız yoksa ne yapabilirsiniz? Neyse ki, bu günlerde SVG'leri bulmak basit ve anlaşılır. En fazla, yalnızca grafiği oluşturan orijinal yazarla bağlantı kurmanız gerekir. Ve birçok platform, atıfta bulunma zorunluluğu olmadan ücretsiz görüntüler sağlar.

İşte ücretsiz SVG içeriği sağlayan bazı harika siteler:

• FontAwesome — Font Awesome, dünyadaki en harika font simgesi kitaplığı. Proje birkaç yıldır güçlü bir şekilde ilerliyor ve yalnızca tarayıcılar için değil, aynı zamanda belirli çerçeveler ve tasarım yazılımları için de kapsamlı bir desteğe sahip. Bu erişilebilirlik odaklı yazı tipi paketi mutlak bir katil ve kullanımı çok basit! Aslında, Font Awesome için destek sağlayan bir düzine WordPress eklentisi olduğundan eminim!
• Vecteezy — Vecteezy, tartışmasız gezegendeki en büyük vektör grafik platformudur. Özel tasarımlar, topluluk katkıları ve web tabanlı verilerle desteklenen: Vecteezy'nin her türden kategori, şekil veya biçimde kullanılabilen vektörleri vardır. Dosyaları indirmek de çok kolay. Tek yapmanız gereken dosyayı aldığınız yazar sayfasına geri bağlantı vermek. Bu, kendimi sık sık kullandığım bir site.
• SVG Backgrounds — En son web tasarım trendlerini takip ediyor musunuz? Şu anda tasarımların keşfedildiği pek çok yaratıcı alan var. Ve bu alanlardan biri de SVG arka planlarıdır. Siz de onları gördünüz. Dalgalı desenler, eğri çizgiler vb. Kolayca erişilebilir SVG arka planları oluşturmak için bu siteyi kullanın!
• SVG Grabber – Bu Chrome uzantısı, farklı web sitesi sayfalarından SVG görüntüleri almak için mutlak bir nimettir. Simgeyi tıklamanız yeterlidir; uzantı, bir sayfadaki her bir SVG dosyasını getirebilir. Tabii ki, mümkün olan her yerde telif hakkı kurallarına uymalısınız, ancak genel olarak bu, sık sık kullanmak için sağlam bir uzantı gibi geliyor.
• Vektör Logo Bölgesi — Çalıştığınız nişe bağlı olarak, dünyanın önde gelen markalarının vektör tabanlı logolarından oluşan bir koleksiyona sahip olmak yararlı olabilir. Bu dosyaları belirli duyurular veya promosyonlar yaparken de kullanabilirsiniz. Ve bu günlerde çoğu fotoğraf editörü, SVG dosyalarını PNG'lere ve başka bir şekilde dönüştürebilir.

Ve bu, gerçekten, orada olanın yüzeyine dokunan biziz. Kişisel olarak, SVG web sitesi tasarımıyla çalışma şeklimde ve hatta öne çıkan görsellerin oluşturulmasında çok fark yarattı. Bir SVG ile renk tayfı, farklı şekil hizalamaları vb. konusunda gerçekten her şeyi yapabilirsiniz.

Elbette, gerçek hayattaki güzel fotoğrafları kullanmakla aynı şey değil, ancak herhangi bir web sitesinde JPG'nin vektör grafiğiyle değiştirilebileceği birçok yer bulabilirsiniz. Ve tam olarak bu yazının amacı, size SVG'yi WordPress ile nasıl kullanacağınıza dair geniş bir genel bakış sunmaktır.

Bu hedefe ulaşmış olsak da, bunun yargıcı olmanıza izin vereceğiz. Bu gönderiye eklemek istediğiniz bir şey varsa veya paylaşacak ek kaynaklarınız varsa – lütfen yorum bölümümüzün her zaman açık olduğunu bilin.