SVG Kullanımı

SVG Nedir?

SVG kullanımı, web tasarımının vazgeçilmez grafik yöntemlerinden biridir. SVG, açılımı Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) olan bir vektör imaj formatıdır. Kullanımı oldukça kolay olan SVG, web sitelerinde çeşitli avantajlar sağlar. Bunlardan en önemlisi, tek bir görselin farklı boyutlarda ve renklerde kullanılabilmesidir. Bu yazıda SVG kullanımı ile ilgili temel bilgileri ve pratik örnekleri bulabilirsiniz.

Bu yazı 2013 yılında, SVG'nin tarayıcı desteğinin yeni yaygınlaştığı bir dönemde hazırlanmıştı. O günlerde Internet Explorer kullanıcıları için çeşitli alternatifler gerekliydi; günümüzde ise SVG tüm modern tarayıcılar tarafından tam desteklenmektedir. Yine de SVG kullanımı ile ilgili temel prensipler değişmedi.

Neden SVG Kullanmalıyım?

SVG kullanımı birçok açıdan avantajlıdır. Bu sorunun cevabını birkaç madde ile özetleyebiliriz:

• Küçük dosya boyutuna sahiptir ve sayfa yükleme hızını olumlu etkiler.
• Vektörel yapısından ötürü her boyutta düzgün görünür, piksellişme yaşanmaz.
• Retina ve yüksek çözünürlüklü ekranlarda net bir görüntü sunar.
• CSS ve JavaScript ile kontrol edilebildiği için etkileşimli tasarımlara olanak tanır.

Ayrıca SVG dosyaları metin tabanlı olduğu için arama motorları tarafından taranabilir ve erişilebilirlik açısından da avantaj sağlar. Günümüzde modern web tasarımında SVG kullanımı, logo ve ikon gibi grafik öğeler için standart bir tercih haline gelmiştir.

SVG ile Çalışmaya Başlamak

SVG dosyaları genellikle Adobe Illustrator gibi vektör çizim araçlarıyla üretilir. İstediğiniz çizimi yaptıktan sonra dosyayı kaydederken SVG formatını seçmeniz yeterlidir. Aşağıda bir bulut çizim örneği ve Illustrator'da SVG kaydetme ekranı görülüyor.

Dosyayı kaydettikten sonra SVG kullanımı için birkaç farklı yöntem mevcuttur. Bunları projenizin ihtiyaçlarına ve hedef kitlenize göre seçebilirsiniz.

<img> Etiketi ile SVG Kullanımı

En basit SVG kullanımı yöntemi, <img> etiketi ile görseli eklemektir:

<img src="bulut.svg" alt="bulut isimli görsel">

Bu kullanımda görsel kendi dosya boyutunda gösterilir. Boyut ayarını CSS dosyasından kolayca yapabilirsiniz. Bu yöntem, hem basit hem de performanslıdır; modern tarayıcıların tamamında çalışır.

Background Image olarak SVG Kullanımı

SVG kullanımı yalnızca <img> ile sınırlı değildir. Arka plan görseli olarak da kullanılabilir. Örneğin bulut-bg isimli bir CSS sınıfı oluşturup içine SVG dosyamızı background olarak atayabiliriz:

.bulut-bg {

background: url(bulut.svg) no-repeat top left;
background-size: contain;
}

Arka planla ilgili tüm CSS özellikleri SVG için de geçerlidir. background-size ile boyutu, konumlandırma özellikleriyle yerleşimi kontrol edebilirsiniz.

Eski Tarayıcı Desteği (Arşiv Notu)

2013 yılında SVG desteklemeyen tarayıcılar için no-svg sınıfı ile yedek PNG görsel kullanılıyordu:

.no-svg .bulut-bg {

background-image: url(bulut.png);
}

Bugün bu tür yedek çözümler gereksizdir; tüm modern tarayıcılar SVG'yi desteklemektedir. Bu arşiv notu, SVG kullanımı ile ilgili tekniklerin nasıl evrildiğini göstermek için korunmuştur.

SVG Dosyasını CSS ile Renklendirmek

SVG kullanımı ile ilgili en değerli özelliklerden biri, aynı görselin farklı renklerde kullanılabilmesidir. Özellikle ikonlarda bu özellik sayesinde aynı ikonu tasarımınızdaki renklere göre farklı alternatiflerde kullanabilirsiniz.

Bunun için SVG kodunu doğrudan HTML dosyasına yerleştirmek gerekir. Elinizdeki SVG dosyasını tarayıcıda açıp kaynak kodunu görüntüleyerek "SVG" ve "PATH" etiketlerini kopyalayabilirsiniz. Ardından CSS ile renk vermek için fill özelliğini kullanabilirsiniz.

Bu yöntem, MDN'nin SVG dokümantasyonu gibi kaynaklarla desteklendiğinde oldukça güçlüdür. Renk ve tasarım uyumu hakkında daha fazla bilgi için web tasarımında renk psikolojisi yazımıza göz atabilirsiniz.

SVG Kullanımı ile İlgili Sonuç

SVG kullanımı, modern web tasarımının vazgeçilmez bir parçasıdır. Küçük dosya boyutu, ölçeklenebilirlik ve CSS ile kontrol edilebilirlik; SVG'yi logo, ikon ve illüstrasyonlar için ideal hale getirir. 2013'teki tarayıcı uyumluluk endişeleri tarihe karışmış olsa da, SVG kullanımı ile ilgili temel prensipler bugün de geçerliliğini koruyor. Ayrıca SVG'nin metin tabanlı yapısı, arama motorları ve erişilebilirlik açısından ek avantajlar sunar; bu da sitenizin görünürlüğünü artırır.

Profesyonel bir web sitesinde doğru görsel formatlarını kullanmak, performans ve kullanıcı deneyimi açısından kritiktir. SVG ve diğer modern formatların doğru uygulanması, sayfa hızınızı ve dönüşüm oranlarınızı doğrudan etkiler. Bu konuda uzman desteği almak isterseniz web tasarım hizmetlerimiz veya Ankara web tasarım sayfamızdan bize ulaşabilirsiniz. Ayrıca flat web sitesi tasarım yazımız, sade ve modern tasarımlar için size ilham verebilir.

Güncelleme: Bu yazı ilk olarak 2013 yılında yayınlandı ve Ağustos 2026'da güncellenerek genişletildi.