Hizmetlerimiz için
Kurumsal Hizmetlerimiz..(!)
Faaliyet alanlarımıza göz atabilirsiniz.
# Web | # SEO | # Makale | # Backlink

Bu alana reklam verebilirsiniz. Ak Web Medya Reklamcılık Hizmetleri.

SVG Nedir? Siteye Nasıl Eklenir?

SVG Nedir? Siteye SVG Nasıl Eklenir?


SVG (Scalable Vector Graphics), XML tabanlı bir vektör grafik biçimidir. Bu format, grafiklerin tarayıcıda dinamik olarak görüntülenmesini, yeniden boyutlandırılmasını ve animasyon yapılmasını sağlar. SVG, özellikle web tasarımında ve grafiklerinde yaygın olarak kullanılır.
Ak Web TR - SEO
Ak Web - SEO

SVG dosyaları, piksel tabanlı (raster) grafik formatlarının aksine, görüntü kalitesini kaybetmeden ölçeklendirilebilir, bu da onları logo, ikon ve diğer grafik öğeleri için ideal hale getirir. SVG ile ilgili konuya göz atabilirsiniz. SVG



SVG'nin Özellikleri:

1. Ölçeklenebilirlik: 

Herhangi bir boyutta görüntü kalitesini kaybetmez.

2. Küçük Dosya Boyutu: 

Genellikle vektör formatında olduğu için piksel tabanlı görüntülere göre daha küçük dosya boyutuna sahiptir.

3. XML Tabanlı:

Metin tabanlı bir format olduğundan düzenlenmesi ve okunması kolaydır.

4. Dinamizm ve Animasyon:

CSS ve JavaScript ile stil ve animasyon eklenebilir.

5. SEO Dostu: 

Metin olarak depolandığı için arama motorları tarafından okunabilir.

Blogger Sitelerine SVG Nasıl Eklenir?


SVG'leri Blogger sitenize eklemenin birkaç yolu vardır. İşte en yaygın yöntemler:

1. Doğrudan HTML Koduyla Ekleme

SVG dosyanızı doğrudan Blogger'ın HTML koduna yerleştirebilirsiniz.

1. Blogger Yönetici Paneli:

Blogger kontrol panelinize gidin ve "Tema" veya "Düzen" sekmesine tıklayın.

2. HTML Düzenleyici: 

"HTML'yi Düzenle" seçeneğini seçin.

3. SVG Kodu Yapıştırma:

SVG kodunuzu HTML dosyanıza yapıştırın. Örneğin:

``svg width="100" height="100">
circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
``/svg>


2. SVG'yi CSS ile Arka Plan Olarak Kullanma


SVG'yi bir arka plan resmi olarak CSS ile kullanabilirsiniz.

1. HTML'de Eleman Belirleme:

SVG'nin kullanılacağı HTML elemanını belirleyin.

2. CSS Kodu: 

Bu elemanın CSS stiline SVG'nin URL'sini ekleyin.
   ```css
   .my-svg-background {
       background-image: url('path/to/your/image.svg');
       background-size: contain;
       width: 200px;
       height: 200px;
   }
   ```

3. Blogger Postuna SVG Yükleme


Eğer SVG'yi bir blog yazısında kullanmak istiyorsanız:

1. Blogger Yazı Düzenleyici: 

Yeni bir blog yazısı oluşturun veya mevcut bir yazıyı düzenleyin.

2. HTML Moduna Geçin: 

Yazı düzenleyici alanında "HTML" moduna geçin.

3. SVG Kodu Yapıştırma: 

SVG kodunuzu doğrudan yazının HTML içeriğine yapıştırın.

4. Üçüncü Taraf Barındırma Kullanımı


SVG dosyalarını bir üçüncü taraf barındırma hizmetine yükleyip, bu dosyaya bağlantı verebilirsiniz.

1. SVG Dosyasını Yükleme:

Dropbox, Google Drive veya başka bir barındırma hizmetine SVG dosyanızı yükleyin.

2. Dosya URL'sini Alma: 

Yüklediğiniz dosyanın doğrudan URL'sini alın.

3. HTML veya CSS Kodu: 

URL'yi kullanarak HTML veya CSS kodunda SVG'yi çağırın.

   ```html
   <img src="https://your-hosted-url.com/image.svg" alt="SVG Image">
   ```

Dikkat Edilmesi Gerekenler

Güvenlik: 

SVG dosyaları içinde kötü niyetli kodlar bulunabilir. Yalnızca güvenilir kaynaklardan gelen SVG'leri kullanın ve mümkünse dosyaları gözden geçirin.

Tarayıcı Uyumluluğu: 

SVG'ler çoğu modern tarayıcı tarafından desteklenir, ancak eski tarayıcılarda görüntüleme sorunları olabilir.

Dosya Optimizasyonu: 

SVG dosyalarını optimize ederek daha küçük boyutlu hale getirebilir ve yükleme hızını artırabilirsiniz. Bunun için SVGO gibi araçlar kullanılabilir.

Bu yöntemlerle, Blogger sitenize kolayca SVG ekleyebilir ve sitenizin görsel kalitesini artırabilirsiniz.


Ak.web.TR


Yazar Hakkında

Ben Zara, CSS Tasarım Uzmanıyım. Ak. WEB

1 yorum

  1. Anlatımınız çok sade ve çok güzel. Açıklayıcı. Ellerinize sağlık.
AkWEB (ak.web.tr)
Bu konular dikkatinizi çekebilir

Reklamınızın burada yer almasını istiyorsanız iletişime geçin.

Reklamınızın burada yer almasını istiyorsanız iletişime geçin.

Reklamınızın burada yer almasını istiyorsanız iletişime geçin.

Tekrarlanan Reklamlar.
Reklamınızın burada yer almasını istiyorsanız iletişime geçin.

Çerez Onayı
Trafiği analiz etmek, tercihlerinizi hatırlamak ve deneyiminizi optimize etmek için bu sitede çerezler sunuyoruz.
Detay Bilgi
Bağlantı Sorunu!
İnternet bağlantınızla ilgili bir sorun var gibi görünüyor. Lütfen internete bağlanın ve tekrar göz atmaya başlayın.
Ak.web.TR
Reklam Engelleyici Algılandı!
Tarayıcınızda reklam engelleme eklentisi kullandığınızı tespit ettik.
Reklamlardan elde ettiğimiz gelir bu web sitesini yönetmek için kullanılıyor, sizden sitemizi reklam engelleme eklentinizde beyaz listeye almanızı rica ediyoruz.
WhatsApp iletişim Hoş geldiniz.
Merhaba; Nasıl Yardımcı Olabilirim?
Mesajınızı yazın.