WordPress Siteye Svg Nasıl Yüklenir ?

Svg Dosya Formatı: SVG, Xml tabanlı vektör grafik formatıdır. Web’de ve diğer dijital ortamlarda çeşitli grafikleri görüntülemek amacıyla kullanılmaktadır. W3C standarlarında olup Javascript, Dom, Css ve Html gibi standart diller ve teknolojilerde kolaylıkla çalışmaktadır. WordPress siteye svg eklemenin sırrını aşağıda bulabilirsiniz.

Logo ve İkonlar İçin Vazgeçilmeziniz Svg ?

Evet, SVG (Scalable Vector Graphics) formatı, logolar ve ikonlar gibi grafik öğeler için vazgeçilmez bir tercihtir. Neden SVG’nin logolar ve ikonlar için tercih edilen bir format olduğu aşağıda açıklıyoruz.

SVG dosyalarının avantajları:

• Ölçeklenebilirlik: SVG dosyaları vektörel tabanlı olduğundan, boyutları değiştirmek görüntü kalitesini etkilemez. Bu, logoların ve ikonların farklı ekran boyutlarına ve çözünürlüklere uyum sağlamasını sağlar. Mobil cihazlardan masaüstü bilgisayarlara kadar çeşitli ekranlarda mükemmel görüntü kalitesi sunar.
• Düşük Dosya Boyutları: SVG dosyaları genellikle resim formatlarına (örneğin, JPEG veya PNG) kıyasla daha küçük dosya boyutlarına sahiptir. Bu, web sitenizde yüklenme süresini optimize etmek ve kullanıcı deneyimini artırmak için önemlidir. Svg formatlı dosyayı web’de ne kadar küçük veya büyük hale getirirseniz getirin kaliteden ödün vermeden en yüksek kaliteyi sunacaktır. Vektörel tabanlı dosya olduğu için en yüksek kaliteyi svg formatı ile alabilirsiniz.
• Düzenlenebilirlik: SVG dosyaları metin tabanlıdır, bu da onları kolayca düzenlenebilir kılar. Bir metin düzenleyici veya SVG düzenleme aracı kullanarak renkleri, şekilleri ve diğer özellikleri kolayca değiştirebilirsiniz. Bu, logo veya ikonunuzu güncellemek veya kişiselleştirmek için kolaylık sağlar. Ayrıca Illustrator pragramı ile dosyayı kolaylıkla düzenleyebilirsiniz.
• Tarayıcı Desteği: SVG, modern web tarayıcıları tarafından geniş bir şekilde desteklenir. Bu, web sitenizde SVG logoları ve ikonları kullanırken uyumluluk sorunları yaşamadan geniş bir kullanıcı kitlesine erişebilirsiniz.
• İşlevsellik: SVG dosyaları, animasyonlar, interaktivite ve filtreler gibi çeşitli özellikleri destekler. Bu, logoların ve ikonların daha dinamik ve etkileyici olmasını sağlar. Örneğin svg içerisinde bir katmana css ile hareket katabilirsiniz.
• SEO İçin Faydalı: SVG dosyaları, içerik metinlerine kolayca entegre edilebilir. Bu, arama motorlarının içeriği okumasına ve anlamasına yardımcı olabilir, bu da SEO açısından faydalıdır.

Bu nedenlerden dolayı, logolar ve ikonlar gibi grafik öğeler için SVG formatı tercih etmekte fayda var. Hem görüntü kalitesi hem de performans açısından avantajlar sunar ve web sitenizde daha kaliteli bir görünüm elde etmesine yardımcı olur.

İLGİNİZİ ÇEKEBİLİR

WordPress Tema Nasıl Yapılır?

Görüntüle

SVG dosyaları ne için kullanılır?

Web Sitesi İkonları ve Logoları

Tasarımcılar svg dosyaları ikon, buton ve şirket logolarını göstermede kullanılır. Bu format kaliteden taviz vermeden yukarı aşağı ölçeklendirme ve farklı boyutlarda görüntüleme için kullanılmaktadır. Web tasarım çalışmalarında büyük bir avantaj sağlayacaktır.

İnfografikler ve İllüstrasyonlar

Svg formatlarında xml kullanıldığından Google arama motoru, metin çizelgelerini ve grafikleri okuyabilmektedir. Bu sebepten Google aramalarda görünmek için idealdir.

WordPress Siteye Svg Yükleyebilmek İçin Gerekli Kodlar

WordPress için jpg, png gibi dosyaları kolaylıkla yükleyebilmekteyiz. Bunun yanı sıra günümüzde popüler ve popüler olmaya devam eden yüksek görüntü kalitesi sunan vektör tabanlı svg formatlı dosyaları yükleyebilmemiz varsayılan olarak gelen WordPress‘de mümkün görünmüyor.

Ancak bu durumu değiştirmenin çok kolay bir yöntemi var. Bunun için eklenti kullanmanızı tavsiye etmemek ile birlikte functions.php dosyasına bazı müdahalelerde .svg uzantılı dosyaları kolaylıkla yükleyebilmemiz mümkün.

WordPress sitenizin functions.php dosyasına ulaşmak için 2 yöntem mevcuttur.

1. Yöntem: WordPress panelde Görünüm menüsünde Tema Düzenleyiciye tıkladığınızda sağ menüden Tema İşlevleri (functions.php) dosyasına ulaşabilirsiniz.
2. Yöntem: Cpanel’e giriş sağladıktan sonra sitenizin ana dizini Wp-content/themes/tema-adı/functions.php şeklinde dosyaya ulaşabilirsiniz.

Functions.php dosyasının en alt satırına kodu yapıştırıp kaydettikten sonra WordPress panelinizde Ortam Kütüphanesine gelerek dilediğiniz svg dosyasını yükleyebilirsiniz.

// Svg Dosyalarına İzin Verme
function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
// Svg Dosyalarına İzin Verme

Bu kodu temanızın functions.php dosyasına eklemeniz gerekir.

WordPress Sitede Svg Güvenliği Sağlama Nasıl Yapılır ?

Svg dosyalarının risklerini ortadan kaldırmak için çok basit bir kaç yöntemi takip ederek daha güvenli hale getirebilirsiniz.

SVG Güvenlik Ayarlarını Kontrol Edin

SVG dosyalarını güvenli bir şekilde işlemek için WordPress’inizin SVG güvenlik ayarlarını kontrol edin. SVG dosyaları için varsayılan olarak izin verilen etiketler ve öznitelikler genellikle güvenlik açıklarına neden olabilir. SVG dosyalarını işlerken sadece güvenli etiketlere ve özniteliklere izin vermek için bir SVG filtresi kullanın.

// Svg Güvenlik Ayar Kontrolü
function allow_svg_upload( $mimes = array() ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_upload' );

function svg_mime_type( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'mime_types', 'svg_mime_type' );
// Svg Güvenlik Ayar Kontrolü

Bu kodu temanızın functions.php dosyasına eklemeniz gerekir.

SVG Dosyalarını Filtreleyin

SVG dosyalarını yüklerken ve gösterirken filtreler kullanarak içeriği güvenli hale getirin. Bu, SVG dosyalarında kötü niyetli kodları engellemeye yardımcı olabilir.

Bu kod, yüklenen SVG dosyalarının içeriğini güvenli etiketlere ve özniteliklere indirger.

// Svg Güvenliği Filtreleme
function filter_svg_uploads( $file ) {
  // Yüklenen dosya SVG dosyası mı?
  if ( 'image/svg+xml' === $file['type'] ) {
    // SVG içeriğini filtreleyin
    $svg_file = $file['tmp_name'];
    if ( is_file( $svg_file ) && is_readable( $svg_file ) ) {
      $svg_content = file_get_contents( $svg_file );
      // Potansiyel olarak zararlı içeriği temizleyin
      $svg_content = wp_kses( $svg_content, array(
        'svg' => array(
          'xmlns' => true,
          'width' => true,
          'height' => true,
          'viewBox' => true,
        ),
        'g' => array(),
        'path' => array(
          'fill' => true,
          'd' => true,
        ),
      ) );
      // Temizlenmiş içeriği tekrar dosyaya yazın
      file_put_contents( $svg_file, $svg_content );
    }
  }
  return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'filter_svg_uploads' );
// Svg Güvenliği Filtreleme

Bu kodu temanızın functions.php dosyasına eklemeniz gerekir.

Merak Edilen Sorular ?