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 - 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