Divi web sitesi tasarımınıza özel grafikler ve resimler eklemek, görsel çekiciliği artırmaya gerçekten yardımcı olabilir. Ancak doğru görsel öğelerini bulmak veya bir tasarımcıyı işe almak her zaman mümkün olmayabilir. Neyse ki Divi, kendi vektör görsellerinizi ve illüstrasyonlarınızı doğrudan oluşturucunun içinden oluşturmanızı kolaylaştırıyor.
Bu kılavuzda, web sitenizden ödün vermeden SVG'yi gerçekte nasıl uygulayacağınızı keşfedeceğiz.
Tasarım deneyiminiz olmasa bile Divi web sitenizi görsel olarak gerçekten bir sonraki seviyeye taşımak için profesyonel, yüksek kaliteli vektör görseller oluşturabilirsiniz.
SVG'ye Giriş ve Kullanımları
SVG, Ölçeklenebilir Vektör Grafikleri anlamına gelir. İki boyutlu vektör grafiklerini tanımlamak için tasarlanmış, yaygın olarak kullanılan XML tabanlı bir vektör görüntü formatıdır. Görüntüleri temsil etmek için piksel kullanan raster görüntü formatlarından (JPEG veya PNG gibi) farklı olarak SVG, şekilleri, çizgileri ve renkleri tanımlamak için matematiksel denklemler kullanır; bu da onu çözünürlükten bağımsız ve yüksek düzeyde ölçeklenebilir bir format haline getirir.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başlaWeb sitesi tasarımında SVG'nin bazı önemli kullanımları şunlardır:
- Duyarlı Grafikler: SVG görüntüleri çözünürlükten bağımsızdır; bu, kalite kaybı olmadan ölçeklendirilebilecekleri veya küçültülebilecekleri anlamına gelir. Bu, onları içeriğin farklı ekran boyutlarına ve çözünürlüklere uyacak şekilde ayarlandığı duyarlı web tasarımı için mükemmel kılar.
- Simgeler ve Logolar: SVG, web sitelerindeki simgeler, logolar ve diğer grafik öğeler için yaygın olarak kullanılır. SVG dosyaları küçük boyutlu olduğundan ve CSS ve JavaScript ile kolayca özelleştirilip canlandırılabildiğinden, etkileşimli ve görsel olarak çekici kullanıcı arayüzleri oluşturmak için popüler bir seçimdir.
- Retina ve Yüksek DPI Ekranlar: SVG, geleneksel taramalı görüntülerin büyütüldüğünde pikselli görünebileceği Retina ekranlar gibi yüksek DPI (inç başına nokta sayısı) ekranlarda net ve keskin grafikler görüntülemek için idealdir.
- Animasyon: SVG, CSS animasyonları gibi araçları veya Snap.svg ve GreenSock Animasyon Platformu (GSAP) gibi JavaScript kitaplıklarını kullanarak doğrudan XML kodu içinde karmaşık animasyonlar oluşturulmasına olanak tanır. Bu, bir web sitesine dinamik ve etkileşimli öğeler eklemeyi mümkün kılar.
- Erişilebilirlik: SVG görüntülerine ekran okuyucular ve yardımcı teknolojiler tarafından kolayca erişilebilir çünkü temeldeki XML yapısına açıklayıcı metinler eklenebilir ve bu da web sitelerini engelli kişiler için daha kapsayıcı ve kullanışlı hale getirir.
- SEO Faydaları: Arama motorları, SVG dosyalarındaki içeriği ayrıştırabilir ve dizine ekleyebilir; bu, arama motoru tarayıcılarına daha fazla bağlam sağlayarak arama motoru optimizasyonunu (SEO) geliştirebilir.
- Etkileşimli Veri Görselleştirme: SVG, bir web sitesinde bilgilerin etkili bir şekilde iletilmesine yardımcı olabilecek çizelgeler ve grafikler gibi etkileşimli veri görselleştirmeleri oluşturmak için kullanılabilir.
Özetle SVG, web sitelerinde vektör grafikleri oluşturmak ve görüntülemek için çok yönlü ve güçlü bir formattır. Sorunsuz bir şekilde ölçeklenebilme, çeşitli ekran boyutları ve çözünürlüklerle iyi çalışabilme yeteneği ve animasyon ve etkileşim desteği, onu modern web tasarımı ve geliştirmede değerli bir araç haline getirmektedir.
WordPress ile Vektör Görsellerini Güvenle Kullanmanın Yolları
Bu bölümde WordPress'te güvenli SVG kullanmanın iki yöntemine bakacağız: manuel olarak ve eklentiler aracılığıyla. İhtiyaçlarınıza en uygun seçim daha sonra seçim için size sunulacaktır. Şimdi başlayalım!
SVG Desteğini Manuel Olarak Ekleyin ve Kodunuzu Temizleyin
Küçük bir kod parçasıyla WordPress'e birkaç dakika içinde SVG desteği eklenebilir. Bu sizi daha önce vurguladığımız olası güvenlik endişeleriyle karşı karşıya bırakacaktır. SVG'yi daha güvenli bir şekilde uygulamak için aşağıdaki eylemler gereklidir:
- SVG desteğini etkinleştirmek için Function.php dosyanızda değişiklikler yapın.
- İstenilen kullanıcı rollerinin svg dosyalarını WordPress'e yüklemesine izin vermeyin.
- Herhangi bir SVG dosyasını yüklemeden önce hepsini sterilize edin.
Genel olarak birinci ve ikinci adımları tamamlamak zor değil. İlk adım, Dosya Aktarım Protokolü'nü (FTP) kullanarak web sitenize bağlanmak ve WordPress'in kök klasörünü bulmaktır. Function.php dosyanızı orada bulun, açın ve aşağıdaki kodu içine yapıştırın.
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );Bununla SVG dosyalarını WordPress'e yükleyebilir ve bunları medya kitaplığınızda görebilirsiniz, bu iki amaca hizmet eder. Kodu ekledikten sonra, Function.php dosyanızı kapatın ve değişiklikleri kaydedin.
Artık yüklemelerine güvenmediğimiz kişilerin bozulmasını engellememiz gerektiğine göre işler biraz daha zorlaşıyor. Örneğin, editörlerinizin ve yazarlarınızın doğru dosyalar yükleyeceğine güvenebilirsiniz, ancak katkıda bulunanlarınıza güvenemezsiniz. Burada uygulayabileceğiniz iki yaklaşım vardır:
- Medya Kitaplığına erişimi kısıtlı olan veya erişimi olmayan kullanıcılar için benzersiz kullanıcı rolleri oluşturun.
- Her kullanıcı rolünün yükleyebileceği dosya türlerini kısıtlamak için WP Upload Restriction gibi bir eklenti yükleyin.
Her iki stratejinin de dezavantajları olduğu doğrudur ve bu, SVG'nin manuel olarak uygulanmasının zor olmasının nedenlerinden biridir. Ancak kötü amaçlı SVG yüklemelerini durdurmaya yönelik bir strateji seçerseniz, bunu yanlışlıkla kullanmadığınızdan da emin olmanız gerekir.
İdeal olarak, web sitenize herhangi bir SVG yüklemeden önce bir temizleme aracı kullanmalısınız. Bu, dosyanızı alacak, şüpheli bir şey içerip içermediğini kontrol edecek ve eğer varsa onu silecektir. Sonunda WordPress'e gönderebileceğiniz düzenli bir SVG dosyanız olacak.
Güvenli SVG Eklentisini Kullanma
Yukarıda belirtilen yöntemi kullanarak güvenli SVG uygulamasının ne kadar zor olabileceğini göstermeyi amaçladık. Bu, Safe SVG eklentisinin performansını tam olarak anlayabilmeniz için gereklidir.
Güvenli SVG eklentisi. Özetle, daha önce belirttiğimiz zorlukların tümü bu eklenti tarafından giderilmektedir:
- SVG'leri yüklemenizi mümkün kılıyor.
- SVG'lerinizin Medya Kitaplığı'nda görünür olduğu doğrulanıyor.
- Güvenlik kusurlarını önlemek için yüklediğiniz her SVG'nin kaynak kodunu temizliyoruz. Bu eklenti, doğası gereği tak ve çalıştır özelliğine sahiptir ve WordPress'te SVG uygulamasını güvenli hale getirmek için en basit yolu kullanır. SVG kullanmaya kararlıysanız bunu denemenizi öneririz.
CSS ve Eklentileri Kullanarak SVG'leri Canlandırma
SVG'leri WordPress'e entegre etme işine giderseniz, şüphesiz yatırım getirinizi en üst düzeye çıkarmak isteyeceksiniz. Bu, uygun olduğunda SVG'lerinizi CSS kullanarak canlandırmanız gerektiği anlamına gelir. Daha önce tartıştığımız iki yaklaşım vardır:
- SVG'ler, tıpkı diğer öğeler gibi CSS ile manuel olarak canlandırılabilir.
- SVG'ler oluşturmak ve canlandırmak için SVGator gibi programları kullanın.
Yeni şeyler denemeye istekliyseniz, oraya buraya birkaç animasyon eklemek, web sitenizdeki kullanıcı deneyimini büyük ölçüde geliştirebilir. Ancak mobil cihazlar için video veya GIF eklemek, bunu başarmak için SVG ve CSS kullanmaktan çok daha kötü olacaktır.
Çözüm
Doğrudan Divi oluşturucuda özel vektör grafikleri oluşturma yeteneği sayesinde, herhangi bir tasarım uzmanlığına ihtiyaç duymadan siteniz için illüstrasyonlar ve simgeler oluşturmanın güçlü bir yoluna sahip olursunuz. Bu orijinal grafikleri uygulamak, sayfalarınıza ve yayınlarınıza daha benzersiz, kişiselleştirilmiş bir estetik kazandırabilir. DIY vektör grafiklerinizin ne kadar profesyonel görünebileceğine şaşıracaksınız!
