WordPress sitenize SVG dosyaları eklemek, resimlerinizin keskin ve net görünmesini sağlayabilir.
Ancak, WordPress resim, ses ve video gibi birçok dosya türünü yüklemenize izin verirken, kutudan çıktığı haliyle SVG dosyalarını desteklememektedir.
Bunun nedeni, SVG dosyalarının güvenlik riskleri oluşturabilmesidir. Ama endişelenmeyin. SVG kullanmanın güvenli yolları var.
Bu makalede, SVG resim dosyalarını WordPress'e kolay ve güvenli bir şekilde nasıl ekleyeceğinizi göstereceğiz.
SVG nedir?
Ölçeklenebilir Vektör Grafikleri (SVG), vektör grafiklerini XML işaretleme dilini kullanarak tanımlayan bir dosya biçimidir. Ana faydası, kalite kaybı veya piksellenme olmadan görüntüleri büyütmenize olanak tanımasıdır.
SVG nasıl çalışır?
Ölçeklenebilir Vektör Grafikleri (SVG), XML kullanarak iki boyutlu çizimleri görüntüleyen bir teknolojidir. PNG, GIF veya JPG gibi yaygın olarak kullanılan resim formatlarından farklıdır.
Bir PNG veya JPG resim dosyasını alıp yakınlaştırırsanız, görüntünün bulanıklaşacağını ve pikselli hale geleceğini fark edeceksiniz.
Vektör grafikleri piksel kullanmaz.
Bunun yerine, görüntülediğiniz grafiği koordinatlar olarak tanımlayan 2 boyutlu bir harita kullanırlar. Yakınlaştırdığınızda görüntü pikselli hale gelmez çünkü bunu yapamaz.
Bu, vektör grafiklerini kalite kaybı olmadan büyütebilmenizi sağlar. En önemlisi, SVG görüntüleri PNG veya JPG dosyalarından çok daha küçük dosya boyutlarına sahip olabilir, bu da onları görüntü biçimlendirmesi için harika bir seçim haline getirir.
Vektör grafikleri yaygın olarak simgeler, ikon fontları, web sitesi logoları ve marka görselleri için kullanılır. Şirket logonuz, simgeleriniz veya diğer grafikleriniz için WordPress'e SVG dosyaları eklemek isteyebilirsiniz.
Ancak, SVG dosyaları biraz güvensiz olabilir. Bu yüzden WordPress varsayılan olarak SVG dosyası yüklemelerini desteklemez.
WordPress'e bir SVG görüntüsü yüklerseniz, şu hata mesajını görürsünüz: 'Üzgünüz, güvenlik nedenleriyle bu dosya türüne izin verilmiyor.'
WordPress'te SVG ile İlgili Güvenlik Sorunları
SVG dosyaları, HTML'ye benzer bir işaretleme dili olan XML kodunu içerir. Tarayıcınız veya SVG düzenleme yazılımınız, çıktıyı ekranda görüntülemek için XML işaretleme dilini ayrıştırır.
Ancak bu, web sitenizi olası XML güvenlik açıklarına maruz bırakır. Kullanıcı verilerine yetkisiz erişim sağlamak veya kaba kuvvet saldırıları veya siteler arası betik saldırılarını tetiklemek için kullanılabilir.
Bu makalede paylaşacağımız yöntemler, SVG dosyalarını daha güvenli hale getirmek için temizlemeye çalışacaktır. Ancak bu eklentiler, kötü amaçlı kodun yüklenmesini veya enjekte edilmesini tamamen engelleyemez.
En iyi çözüm, yalnızca güvenilir kaynaklar tarafından oluşturulan SVG dosyalarını kullanmak ve SVG yüklemelerini güvenilir kullanıcılara kısıtlamaktır. Güvenlik hakkında daha fazla bilgi edinmek için yeni başlayanlar için eksiksiz WordPress güvenlik rehberimize göz atabilirsiniz.
Bunu akılda tutarak, WordPress'te SVG dosyalarını 3 yöntemle kolayca ve güvenli bir şekilde nasıl kullanacağınızı göstereceğiz. Belirli bir yöntemle ilgileniyorsanız, aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:
- Yöntem 1. WPCode Kullanarak WordPress'te SVG Dosyalarına İzin Verin (Önerilen)
- Yöntem 2. SVG Desteği Kullanarak WordPress'e SVG Dosyaları Yükleme
- Yöntem 3. Safe SVG Kullanarak WordPress'e SVG Dosyaları Yükleyin
Uzman İpucu: SVG resim dosyalarını kullanmaya karar vermeden önce, dosya boyutlarını sıkıştırmak ve WordPress hızınızı ve performansınızı artırmak için resim düzenleme araçlarını da kullanabileceğinizi unutmayalım.
Hazır mısınız? Bir video eğitimle başlayalım.
Video Eğitim
Yazılı talimatları tercih ederseniz, okumaya devam edin.
Yöntem 1. WPCode Kullanarak WordPress'te SVG Dosyalarına İzin Verin (Önerilen)
WordPress'e güvenli bir şekilde SVG yüklemelerine izin vermenin en basit yolu, mevcut en güçlü kod parçacığı eklentisi olan WPCode kullanmaktır.
WPCode, sitenizdeki birçok tek kullanımlık eklentinin yerini alabilen geniş bir önceden yapılandırılmış kod parçacığı kitaplığına sahiptir. Eki sayfalarını devre dışı bırakma, Klasik Gönderi Düzenleyiciyi tutma ve web sitenizi bozma riskleri olmadan SVG dosyası yüklemelerine izin verme gibi parçacıkları içerir.
Başlamak için, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Ayrıntılı talimatlar için lütfen WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Etkinleştirildiğinde, WordPress yönetici panelinizdeki Kod Parçacıkları » Parçacık Ekle bölümüne gitmek isteyeceksiniz. Sadece 'svg' diye arayın ve 'SVG Dosyalarını Yüklemeye İzin Ver' üzerine fareyle gelin.
Göründüğünde 'Snippet Kullan' düğmesine tıklayın.
Ardından, WPCode'un kodun çalışması için gereken tüm ayarları zaten yapılandırdığı ‘Snippet Düzenle’ sayfasına geleceksiniz.
Tek yapmanız gereken anahtarı ‘Aktif’ konumuna getirmek ve ardından ‘Güncelle’ düğmesine basmaktır.
Artık WordPress size bir hata veya uyarı mesajı vermeden SVG dosyaları yükleyebilirsiniz.
Ardından, onu WordPress web sitenizde diğer herhangi bir resim gibi kullanabilirsiniz.
Varsayılan olarak, WPCode snippet'i yalnızca ‘Yönetici’ rolüne sahip kullanıcıların WordPress'e SVG eklemesine izin verir.
Ayrıca 14-16 numaralı kod satırlarını silerek diğer tüm kullanıcı rollerine izin verebilirsiniz. Ardından, 11-13 numaralı satırların başına iki eğik çizgi, '//' ekleyerek bunları 'yorum satırı haline getirebilir', açık bir ten rengine dönüştürebilirsiniz.
WPCode, yorum olarak gördüğü kodun hiçbir parçasını çalıştırmaz. Bunu aşağıdaki resimde görebilirsiniz.
Her iki durumda da, kod kaldırıldığında, tüm kullanıcılar sitenize SVG dosyaları yükleyebilir. Yaptığınız değişiklikleri kaydetmek için 'Güncelle'ye tıkladığınızdan emin olun.
Yöntem 2. SVG Desteği Kullanarak WordPress'e SVG Dosyaları Yükleme
Bu ikinci yöntem SVG Support eklentisini kullanır. SVG'leri WordPress gönderileri ve sayfaları içinde göstermenize ve kimlerin yükleyebileceğini kontrol etmenize olanak tanır.
Öncelikle, SVG Support eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakabilirsiniz.
Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Ayarlar » SVG Desteği bölümüne gitmek isteyeceksiniz.
Ayarlar sayfasında, 'Yalnızca Yöneticilere Kısıtla?' seçeneğinin yanındaki kutuyu işaretlemeniz yeterlidir. Bu, WordPress'te yalnızca bir site yöneticisinin SVG dosyaları yüklemesine izin verecektir.
Bir sonraki adım gelişmiş modu açmaktır. Yalnızca CSS animasyonları ve satır içi SVG oluşturma gibi gelişmiş özellikleri kullanmak istiyorsanız bu seçeneği işaretlemeniz gerekir.
Ayarlarınızı kaydetmek için lütfen ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.
Artık yeni bir gönderi oluşturabilir veya mevcut bir gönderiyi düzenleyebilirsiniz. Gönderi düzenleyicide, SVG dosyanızı başka herhangi bir resim dosyasını yükler gibi yükleyebileceksiniz.
Düzenleyiciye basitçe bir resim bloğu ekleyin ve ardından SVG dosyasını yükleyin.
Yöntem 3. Safe SVG Kullanarak WordPress'e SVG Dosyaları Yükleyin
Bu yöntem ayrıca bir eklenti kullanır ve WordPress'e yüklenen SVG dosyalarını temizlemenize olanak tanır.
Yapmanız gereken ilk şey, Safe SVG eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, lütfen WordPress eklentisi yükleme konusundaki adım adım kılavuzumuza bakın: WordPress eklentisi yükleme adım adım kılavuzu.
Eklenti kutudan çıktığı gibi çalışır ve yapılandırmanız gereken herhangi bir ayar yoktur. Doğrudan SVG dosyaları yüklemeye başlayabilirsiniz.
Dezavantajı, bu eklentinin WordPress sitenizde gönderi yazabilen tüm kullanıcılar tarafından SVG yüklemelerine izin vermesidir. Kimlerin dosya yükleyebileceğini kontrol etmek için eklentinin premium sürümünü satın almanız gerekir.
Bu makalenin WordPress'e güvenli bir şekilde SVG dosyaları eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca web sitesi başlığınıza bir widget ekleme kılavuzumuzu ve yeni başlayanlar için kullanışlı kod parçacıkları hakkındaki uzman seçimlerimizi de görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Dennis Muthomi
Bir müşteriyi PNG'den SVG logolarına geçirdim. Özellikle mobilde hız farkı inanılmazdı!
Deneyimlerimden hızlı bir ipucu: Her zaman bir PNG yedeği oluşturun ve kodunuzda 'picture' öğesini kullanın. Bu sayede, modern tarayıcılarda tüm SVG avantajlarından yararlanırken eski tarayıcılarla da uyumlu olursunuz.
Güvenlik ipuçları için de gerçekten minnettarım – müşteri siteleriyle çalışırken bunlar çok önemli!
Jiří Vaněk
Bir zamanlar SVG dosyalarının neden tehlikeli olabileceği hakkında ilginç bir makale okumuştum. Ancak, o bilgiyi edinmeden önce, sürekli olarak WordPress ile mücadele ediyordum, SVG'leri yüklemeyi reddediyordu ve oldukça sinirliydim. Web için SVG formatında simgelerim var. Ancak, WPCode ve basit bir kod parçacığı bana gerçekten yardımcı oldu. Bu, tam bir acemi bile herkesin halledebileceği, anlaşılır ve işlevsel bir çözümdür.
Eugene Velasquez
Tüm SVG eklentilerini ekledim ancak kendi oluşturduğum ve bu nedenle herhangi bir risk veya kötü amaçlı kod içermeyen SVG'leri eklemem hala engelleniyor. WordPress'e SVG dosyaları eklemenin başka bir yolu var mı?
WPBeginner Desteği
Eklentiler bile sitenize SVG eklemenize izin vermiyorsa, WordPress'inizi geçersiz kılacak bir güvenlik ayarı olmadığından emin olmak için barındırma sağlayıcınızla iletişime geçmenizi öneririz.
Yönetici
Felix Krusch
Blokların başlangıcından beri, 'Özel HTML Bloğu' içine SVG kodu ekleyebilirsiniz. Artık snippet eklentisine gerek yok.
WPBeginner Desteği
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Yönetici
sn
Merhaba,
Makaleleriniz için teşekkürler.
Genellikle sitenize başvuruyorum ve oradan birçok şey öğreniyorum.
Burada web sitelerinde svg dosyaları kullanmanın güvenli olmadığını yazdınız.
Sorunum şu ki, eğer svg dosyasını kendim adobe illustrator veya benzeri bir yazılımdan oluşturursam,
web siteme koymak yine de güvensiz midir?
ve safe svg eklentisini kullanmalı mıyım?
Teşekkürler!
WPBeginner Desteği
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Yönetici
sn
Bu durumda herhangi bir güvenlik açığı olmayacağı anlamına mı geliyorsunuz?
WPBeginner Desteği
Endişelenmeniz gereken güvenlik açıkları, kötü amaçlı kod eklemiş olabilecek bilinmeyen bir kaynaktan SVG eklemeniz durumunda ortaya çıkar.
sn
Cevabınız için çok teşekkür ederim.
Bay Waghela
paylaştığınız için teşekkürler efendim en iyi bilgi
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Alan Smith
Thanks a lot
WPBeginner Desteği
You’re welcome
Yönetici
Amandine
Merhaba, SVG eklentisini başarıyla yükledim ve SVG dosyamı yükleyebiliyorum ancak logo kırpma noktasında, kırpamıyorum ve bu nedenle web sitemde görünmüyor. Sol taraftaki özelleştirme panelinde güzel ve net görünüyor ancak web sitesinde görünmüyor. PNG dosyası yüklediğimde ise kırpma çalışıyor ve hem özelleştirme panelinde hem de web sitesinde görünüyor. SVG logomun web sitesinde görünmesi için yapmam gereken bir şey olup olmadığını bana bildirebilir misiniz? Teşekkür ederim.
WPBeginner Desteği
İstediğiniz boyuta kırpmak için SVG'nizi WordPress siteniz dışındaki bir şeyle düzenlemeniz gerekir
Yönetici
pushkraj
svgz (sıkıştırılmış svg) yüklemek istiyorum ancak güvenlik nedenleriyle bir hata alıyorum. SVG formatını sorunsuz bir şekilde yükleyebiliyorum ancak dosya boyutunu küçültmek için svgz'ye ihtiyacım var. Lütfen sorgumla ilgili bana yardımcı olun.
Teşekkürler.
WPBeginner Desteği
Bu dosya türüne izin vermek için buradaki kılavuzumuza bakmak isteyebilirsiniz: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Yönetici
Brian
Merhaba WPBeginner,
Web siteme Safe SVG eklentisini ekledim ancak SVG dosyalarım yüklenirken bozuluyor gibi görünüyor. Onları kullanamıyorum. Bu nasıl mümkün olabilir?
WPBeginner Desteği
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Yönetici
Huu Tai
Tamamen kapsamlı bilgi için teşekkürler,
Web logosunu yüklemek için SVG Desteği'ni kullanıp kullanamayacağımı merak ediyorum?
WPBeginner Desteği
Tema bu durumu özel olarak geçersiz kılmadığı sürece, yapabilmelisiniz.
Yönetici
Scott
Piksel görüntüleri matematiksel olarak dönüştürmenin karmaşıklığını anlıyorum.
JPEG ve .png resimlerini SVG'ye dönüştürmek için oldukça basit veya otomatik bir yöntem veya program var mı?
Yayın Kadrosu
Merhaba Scott,
Bildiğimiz kadarıyla henüz yok.
Yönetici
Cactoos
Deneyebildiğim kadarıyla inkscape tam olarak bunu yapabiliyor. Ücretsizdir ve windows, Mac ve Linux'ta çalışır.
Gimp, illustrator ve tam emin değilim ama belki krita da bunu yapabilir.
Gimp ve krita da ücretsiz ve çoklu işletim sistemine sahiptir.
Gerçekten de oldukça büyük ve yüksek kaliteli bir fotoğrafı svg'ye dönüştürdüm (önceki jpg görüntüsü doğrudan fotoğraf makinesinden) ve kusursuz çalıştı, zaman aldı ama çalışıyor. Bunun nedeni muhtemelen oldukça zayıf bir sistemde olmam.
Salman Ravoof
Neredeyse tüm vektör düzenleme yazılımları bu işlevselliğe sahiptir. Hem Inkscape hem de Illustrator bunu yapabilir. Ancak, karmaşık şekilleriniz ve çok sayıda renginiz varsa (tüm gerçek yaşam görüntüleri buna dahildir) sonuçlar o kadar iyi olmayacaktır. Bu işlevsellik en iyi 4 renkten az olan görüntüler için kullanılır, ne kadar az o kadar iyi.