WordPress’te SVG nasıl kullanılır

SVG 2000’li yılların başlarında standartlaştırılmış olmasına rağmen, kötü tarayıcı desteği nedeniyle çok ilginç bir görüntü formatı çok fazla talep edilmedi. Tüm bunlar son yıllarda büyük ölçüde değişti, çünkü SVG hızla web’de fiili bir görüntü formu haline geldi. Ve sadece SVG’ye aşık olan grafik tasarımcılar değil, aynı zamanda genel görüntü boyutunu azaltarak bloglarını hızlandırmak isteyen WordPress kullanıcıları. Bu yazı, SVG’nin WordPress bazlı sitelerde nasıl kullanılacağı konusunu araştıracaktır. SVG nedir? SVG (ölçeklenebilir vektör grafikleri), web’de ve uygulamada grafikleri görüntülemek için XML tabanlı bir görüntü biçimidir. Temel olarak, SVG dosyası yalnızca SVG görüntüsünde kullanılan çeşitli şekilleri ve renkleri belirleyen XML kodlarının bir koleksiyonudur.
SVG dosyalarını metin editörleriyle açabileceğiniz için ayarlamaları CSS3 ve JS temel kodlarını da kullanmayı kolaylaştırır. Sonuç olarak, SVG çok yönlü esnekliği nedeniyle modern web kullanıcıları arasında çok popülerdir. En önemlisi, W3C SVG’yi önde gelen bir endüstriyel standart olarak tanır. Bu nedenle, SVG DOM, HTML ve benzeri diğer web tabanlı teknoloji ile birlikte mükemmel bir şekilde çalışır. SVG neden önemlidir? Vektör tabanlı SVG görüntüleri, sonuç olarak, SVG görüntüleri kalite kaybetmeden ekran boyunca sınırsız olarak boşaltılabilir. Bu durumda çekirdek etkileşim XML tarayıcısıdır; Burada tarayıcı, her bir artış veya azalma ile XML özelliklerini çizdi.
SVG dosyaları PNG veya JPEG gibi geleneksel formatlardan çok daha esnektir. Ve CSS ve JavaScript arasındaki doğrudan etkileşim, seyahat ederken SVG görüntülerini uyarlayabileceğiniz anlamına gelir. Bu, yeni bir tasarım üzerinde çalışırken çok önemlidir veya tam tersi. Neredeyse her şeyi tasarlamak için SVG’yi kullanabilirsiniz! İsterseniz animasyonlu bir davul kiti bile. Eyleme bakın: https://codepen.io/iamjoshellis/pen/kvdqqm Performans açısından, SVG görüntüleri tüm meslektaşlarından önemli ölçüde daha küçük olma eğilimindedir. Sonuç olarak, illüstrasyonlar, logolar ve simgeler genellikle vektör grafikleri olarak yapılır. Bu aynı zamanda daha sonra makalede kısaca bahsedeceğimiz birçok simge yazı tipinin geliştirilmesine neden olur.

Kısacası, SVG, WordPress sitenizdeki görüntü performansını artırmak için esneklik, daha küçük görüntü boyutu ve güçlü temel sağlar. SVG görüntüsü nasıl yapılır? SVG görüntüleri yapmak iki şekilde yapılabilir: ‘kodu’ yazmak ve modern grafik tasarım yazılımı kullanmak. İlk yöntem, yani XML komut dosyaları yazmak, SVG dosyaları oluşturmanın geleneksel bir yoludur, ancak yavaş ve verimsiz bir teknik olduğu kanıtlanmıştır. Basit kutulardan oluşan bir koleksiyon XML formatında böyle görünebilir:
Gördüğünüz gibi, bunu karmaşık grafikler için tekrar tekrar yazmak, kendinizi çekmekle aynıdır.

Başka bir yöntem yazılımı kullanmaktır ve bu, SVG grafiklerini oluşturmanın en hızlı ve en etkili yoludur. Vektör tabanlı yazılımla, grafik yapmaya ve daha sonra hazır bir SVG dosyası 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. Hangi yazılımı kullanmaya karar verirseniz verin, gerçekten önemli olan tek şey yapmak istediğiniz grafik türü için planınızdır. İhracat işlevselliği tüm modern programlarda işbirliği yapar. SVG’nin her zaman aynı XML yapısıdır. Böylece, SVG görüntülerini hem belge olarak kullanabilirsiniz hem de satır içi ekleyebilirsiniz. WordPress SVG’yi destekliyor mu? Kulağa garip gelse de, WordPress kapsama alan platform aslında SVG dosya biçimini desteklemez. Ancak sadece korkunç güvenlik sorunları nedeniyle. PNG/JPG/GIF dosya türünün aksine – SVG bir raster görüntüsü değil bir vektör. Sonuç olarak, SVG JavaScript sömürüsü riskine maruz kalır ve WordPress varsayılan olarak WordPress’te SVG’ye izin vermemeyi seçmiştir. Tüm açılardan mantıklı.

WordPress katkıda bulunanlar yıllardır SVG hakkında konuşmuş olsa da, büyük ölçekli güvenlik sorunlarını önlemek için ele alınması gereken çok fazla açı var. Dolayısıyla, bunu aşmanın tek yolu eklentiler yoluyla veya tema işlevini kullanarak SVG’yi dosya biçimi olarak etkinleştirmektir. WordPress web sitesinde SVG görüntülerini nasıl etkinleştirebilirim? Eklenti bölümünü girmeden önce, tema dizininizdeki functions.php dosyası aracılığıyla WordPress’te SVG’yi etkinleştirebilirsiniz. Bu açıkça en hızlı yoldur, aynı zamanda en güvensizdir, çünkü SVG’yi ham formatta etkinleştirirsiniz.
// wordpress yükler için svg dosya biçimini etkinleştir add_file_types_to_uploads ($ file_types) {$ new_filetypes = array (); $ new_filetypes [‘svg’] = ‘image/svg+xml’; $ file_types = array_merge ($ file_types, $ new_fileTypes); Dönüş $ file_types; } Add_action (‘upload_mimes’, ‘add_file_types_to_uploads’); Ve diğer seçenekleriniz – daha güvenli – eklentileri kullanıyor. WordPress’te SVG’yi etkinleştirmek için en önemli üç eklenti. SVG Desteği SVG desteğinin mücadelenin yarısı olduğunu ekler, ayrıca özel stiller, animasyonlu efektler eklemek ve kısıtlamaları etkinleştirmek isteyebilirsiniz. Ama tüm bunları yapmak için desteğe ihtiyacınız var.

SVG Desteği ile – Geleneksel resim etiketlerini kullanarak yayınlarınıza ve sayfalarınıza SVG dosyaları eklemeye başlayabilirsiniz. Örneğin, “Style-SVG” resminize yeni bir CSS sınıfı ekleyebilirsiniz, bu da içeriğini bir satırda yüklediğiniz ve oluşturduğunuz SVG görüntülerini çekecektir. Bu eklentinin ana özellikleri:
WordPress Medya Kütüphanesi’ndeki SVG dosyalarının yönetimini etkinleştirin.

Yüklenen SVG görüntüsünü bir satır koduna dönüştürün.
Tüm SVG görüntülerine Alt ve Altyazı Etiketleri eklemek için görüntü widget’larını destekler.
Bireysel SVG görüntü stili özel CSS kullanır.
CSS3 ve JavaScript kullanarak animasyon efektleri uygulayın.
Gösterge Tablosu eklentisindeki ayrıntılı ayarlar sayfası.
İzin tabanlı erişim uygulayın. Örneğin, yüklemeyi yalnızca yönetici ayrıcalıklarına sahip hesaplarla sınırlayın.
Eklentinin ne sunduğuna bakılmaksızın, SVG sömürüsü riskinin oldukça gerçek olduğu uyarısı. Güvenmediğiniz kullanıcılar için SVG dosya yönetimini etkinleştirmeyin. İdeal olarak, bu özelliği yalnızca yönetici düzeyinde kullanıcılar için etkinleştireceksiniz. Tekrarlamak gerekirse, yükleme hakkı olan herkes yeni bir SVG dosyası yükleyebilir, ancak SVG dosyası XML’ye dayandığı için – tehlikeli yollardan sömürmeye açıktır. enjeksiyonlar ve diğerleri. SVG güvenlidir
SAFE SVG, güvenlik riskleri potansiyeli konusunda endişelenmek açısından size gönül rahatlığı sağlayacak eklentilerden biridir. Bu eklenti, yeni SVG yüklemelerini temizlemek ve kötü niyetleri önlemek için özel olarak yapılır. Ayrıca, SAFE SVG, kütüphane ortamınız aracılığıyla yüklediğiniz SVG dosya türünü görme olanağı ekler. 50.000 aktif kullanıcı ile güvenli bir performans sicili sağlamak için SAFE SVG’ye güvenebilirsiniz. Bu eklenti için iki farklı sürüm olduğu belirtilmelidir; ücretsiz ve ücretli.
Ücretsiz sürüm, yeni yüklemeleri temizlemek için işlevsellik içerir ve ayrıca medya kitaplığındaki SVG ekranına destek ekler.
Pro sürümünü kullanırsanız, SVGO Optimizasyonu gibi ek özellikler elde edersiniz. Bu optimizasyon tekniği, SVG yükleme dosyanızın boyutunu daha da azaltacaktır. Ayrıca, Pro ile yeni bir SVG dosyasını kimin yükleyebileceğini veya yükleyemeyeceğini seçebilirsiniz. Sonuç olarak, belirli kullanıcılara erişimi sınırlayabilirsiniz. Ve son olarak, bir eklenti satın alarak premium desteğe erişirsiniz – en çok ihtiyacınız olduğunda sorularınıza cevap alın. Tam SVG desteği ekle
Kayıt ettiğimiz ilk iki eklenti ile makul sonuçlar almalısınız. Ancak, bir kısa kod kullanarak sitenize SVG ekleme fikrini seviyorsanız, bu eklentiyi kontrol edin. Bu eklenti, WordPress’inize birkaç SVG işlevi ekler ve Alexey Ten’in fikirlerine dayanan SVG teknikleri kullanır. Bu HTML’ye SVG görüntüleri nasıl eklenir, şu anda performans ve uyumluluk en iyi kombinasyonu ile bir yol gibi görünmektedir. Tam SVG desteği ekleyin, SVG yüklemesine izin verir ve kısa kodlar oluşturur. Ardından, her bir SVG öğesinin stilini özel bir CSS kullanarak ayarlayabilirsiniz. Son olarak, yüklediğiniz bir veya tüm SVG için bir yedek fotoğraf belirleyebilirsiniz. WordPress için diğer yararlı SVG eklentileri nelerdir? WordPress sitesine SVG desteği eklemenin yanı sıra, siteniz için başka neler eklentisi olabilir? Herkes ve büyükanneleri önemli performans faydaları olduğunu biliyorlar. Hem dosya boyutu açısından hem de vektör grafiklerini satırda hale getirme özelliği. WP SVG simgesi

Simge görsel bir unsurdur ve bu tür öğeler yeni bir yaşam tasarımı verme eğilimindedir. Oldukça ilginç olan, bu eklenti kişisel ihtiyaçlardan doğdu. Yazar, tasarımında daha fazla SVG dosyası uygulamaya başlamak istiyor, ancak bunun için bir çözüm bulamıyor. Böylece zamanını ve enerjisini aldı ve WP SVG simgesini yaptı. Bu eklentinin kullanımı çok kolaydır ve sitenizdeki simgeleri yalnızca birkaç tıklamayla değiştirebilirsiniz. En iyisi, retina ekranı için her görüntüyü yeniden oluşturmanız gerekmez, maksimum genişliği ayarladığınız sürece, simge otomatik olarak boşaltılır. Tıpkı yazarın söz konusu olduğu gibi, bu eklenti her türlü geliştirme, çoklu site ve müşteri çalışması için olağanüstü. Kısıtlamalar olmadan, bu tür temaların veya şeylerin uyumluluğu konusunda endişelenmenize gerek yoktur. Ayrıca özel simge yüklemesine izin veren özelliklerle sunulan premium bir sürüm de vardır. Yani, entegre simgelerle sınırlı değilsiniz. Svgini’nin sosyal menüsü, SVG görüntüleri aracılığıyla sosyal medya simgelerini görüntülemek için bir widget olarak işlev gören bir eklentidir. Böylece bu eklenti çalışır, tek yapmanız gereken sosyal medya profilinize bağlantı içeren yeni bir WordPress menüsü oluşturmaktır. Bundan sonra, SVG Sosyal Menü konumunu seçin ve yeni bir menü kaydedin. Bundan sonra, hem yanda hem de blogunuzda widget’lara hazır olan diğer alanlarda SVG Social Menü widget’ını kullanabilirsiniz. Mevcut simgeler aşağıdaki 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 efekti
Slate, özel SVG efektleri eklemek için kısa kod desteğinin sağlanmasına izin veren bir eklentidir. Bu eklentiyi güçlü bir marka imajını tanıtmak, CTA widget’ı vurgulamak veya öğeleri kendi yollarında öne çıkarmak için kullanabilirsiniz. Kısa kod desteğinin akıllı kullanımı, efektlerinizi belirli bir zamanda düzenleyebileceğiniz ve ayarlayabileceğiniz anlamına gelir. Örneğin, çeşitli renkleri, yazı tiplerini, filtreleri birleştirebilir ve dikkat çeken bir tasarım etkisi olarak ortaya çıkan çeşitli içerikleri kullanabilirsiniz. Slate, vektör düzenleme yazılımı kadar yaratıcı olma özgürlüğü sunar, ancak yalnızca herhangi bir yazılım kullanmanız gerekmez! Peki, ana özelliklerden bazıları nedir? Metin. Dikkat çeken ancak dost SEO olan metnin etkisini çoğaltabilen kısa bir kod üretin. Tıpkı yukarıdaki anlık görüntüde gördüğünüz gibi.

yazı tipi. Özel bir yazı tipi nereden alacağınızdan emin değil misiniz? Endişelenmeyin, çünkü Slate daha önce büyük bir Google yazı tipi kütüphanesi ile paketlenmiştir.

Dolgu deseni. Harfler seçtiğiniz desenle doludur. Alanın deseninin bir parametresi vardır. Benzersiz varyasyonlar üretmek için çeşitli boyutları, mesafeleri ve renkleri kontrol edin veya varsayılan işi sizin için bırakın.

Ve daha fazlası! Bu eklenti, metninizi ve logonuzu olağanüstü bir hassasiyetle düzenlemek için bir elektrik santralidir. Ve SVG aracılığıyla, daha az değil. SVG grafiklerini nerede bulabilirsiniz? Vector grafik tasarımında daha önce uzmanınız yoksa ne yapabilirsiniz? Neyse ki, son zamanlarda SVG bulmak basit ve kolaydır. En fazla, sadece grafikleri yapan orijinal yazara geri dönmeniz gerekir. Ve birçok platform, ilişkilendirme gereksinimleri olmadan ücretsiz resimler sağlar. İşte ücretsiz SVG içeriği sağlayan bazı olağanüstü siteler: Fontawesome – Font Awesome Library dünyanın en şaşırtıcı yazı tipi simgesi. Bu proje birkaç yıldır güçlü çalışıyor ve sadece tarayıcılar için değil, aynı zamanda özel çerçeve ve tasarım yazılımı için derinlemesine desteğe sahip. Bu erişilebilirlik odaklı yazı tipi paketi mutlak bir katildir ve kullanımı çok kolaydır! Aslında, Font Awesome için destek sağlayan bir düzine WordPress eklentisi olduğundan eminim!

Vecteezy – Vecteezy, tartışmasız bu gezegendeki en büyük vektör grafik platformudur. Özel tasarımlar, topluluk katkıları ve web tabanlı verilerle teşvik edilir: Vecteezy, herhangi bir kategoride, şekil veya formda mevcut olan herhangi bir vektöre sahiptir. Ve dosyaları indirmek de çok kolaydır. Tek yapmanız gereken, bir dosya aldığınız yazarın sayfasına geri dönmektir. Bu sık sık kullandığım bir site.

SVG Arka Plan – En son web tasarım trendlerini takip ediyor musunuz? Tasarımın şimdi keşfedildiği çok sayıda yaratıcı alan var. Ve bunlardan biri SVG’nin arka planı. Sen de onları gördün. Dalgalı desenler, kavisli çizgiler vb. Kolay erişilebilir bir SVG arka planı üretmek 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 hediye. Simgeyi tıklayın ve uzantı sayfadaki her SVG dosyasını alabilir. Tabii ki, olabildiğince nerede olursa olsun telif hakkı kurallarına uymalısınız, ancak genel olarak sık sık kullanılacak sağlam bir uzatma gibi hissediyor.
Vector logo bölgesi, çalıştığınız nişe bağımlı olarak, dünyanın önde gelen markalarından vektör tabanlı bir logo koleksiyonuna sahip olmak için yararlı hissedebilirsiniz. Belirli bir duyuru veya promosyon yaparken bu dosyayı da kullanabilirsiniz. Ve çoğu fotoğraf editörü artık SVG dosyalarını PNG’ye dönüştürebilir ve tersi de geçerlidir.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir