SVG bir çeşit vektör imaj formatıdır. Kullanımı oldukça kolay olan SVG web sitelerinde çeşitli avantajlar sağlamaktadır. Bunlardan tek görselin farklı boyutlarda ve renklerde kullanımını bu makalede öğrenebilirsiniz.
SVG nedir?
Tam adı Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) olan bu format Adobe Illıustator ile üretilmektedir.
Neden SVG kullanmalıyım?
Bu sorunun cevabını birkaç madde ile özetlersek:
- Küçük dosya boyutuna sahip olması,
- Büyük kullanımlarda vektörel yapısından ötürü düzgün görünmesi,
- Retina display ekranlarda başarılı görünümü,
- Etkileşim ve filtreler ile tasarım yapılırken kod desteği ile kontrol edilebilmesi.
SVG ile çalışmaya başlamak
Adobe Illustrator ile herhangi bir çizim yapıyoruz. Bu dosyayı kaydederken seçeneklerden SVG formatını seçiyoruz ve aşağıdaki gibi aşağıdaki seçeneklere göre kaydediyoruz.
<img> etiketi ile SVG’nin kullanımı
<img src="bulut.svg" alt="bulut isimli görsel">
Bu kullanımda dosya boyutunuz ne ise onu alacaktır, dosya boyutunu ayarlamayı css dosyasından aşağıdaki şekilde yapabilirsiniz.
See the Pen pbsFB by ozgur ozcirpan (@renklisayfa) on CodePen
SVG formatında browser desteği
Başta Internet Explorer kullanıcıları olmak üzere çok sayıda internet kullanıcısı güncel olmayan browser kullanmakta, güncel olmayan browser’ların desteklemediği SVG için alternatif kullanım şu şekilde.
<img src="bulut.svg" onerror="this.onerror=null; this.src='bulut.png'">
Background Image olarak SVG kullanımı
bulut-bg isimli bir CSS class oluşturarak içine SVG dosyamızı background olarak atıyoruz, ayrıca background-size ile de arka plandaki svg dosyamızın boyutunu belirleyebiliyoruz, arka plan ile ilgili tüm CSS kodları SVG içinde kullanılabilinmektedir.
Buradan kullanım örneğine bakabilirsiniz.
See the Pen fbsEj by ozgur ozcirpan (@renklisayfa) on CodePen
Browser Desteği
SVG desteklemeyen browser’lar için arka planda SVG kullanmak “no-svg” class’ı ile mümkün, aşağıdaki örnekte olduğu gibi CSS dosyamızı oluşturursak, bu sorunu aşabiliriz.
.bulut-bg {
background: url(bulut.svg) no-repeat top left;
background-size: contain;
}
.no-svg .bulut-bg {
background-image: url(bulut.png);
}
SVG dosyasını CSS ile optimize etmek
SVG formatının en önemli diyebileceğimiz özelliği onun farklı renklerde kullanımıdır, özellikle ikonlarda kullanılabilecek bu özellik ile aynı ikonu tasarımdaki renklere göre farklı alternatiflerde kullanabilirsiniz.
Bunun için HTML, dosyasının içerisinde SVG konutunu kullanacağız. Bu komutu almak için CHROME’dan destek alabiliriz. Elinizdeki SVG dosyasını CHROME ile açıp, kodları görüntülerseniz orada “SVG” ve “PATH” etiketlerini görebilirsiniz. Bu kodu kopyalayarak SVG’yi kullanacağınız HTML dosyasına yapıştırmanız yeterli.
HTML dosyasını tamamladıktan sonra CSS ile renk vermek için “FILL” class’ını kullanacağız.
Son işlem ise HTML dosyasındaki “PATH” etiketine oluşturduğumuz class’ı atamak.
Aşağıda örneğini görebilirsiniz.
See the Pen rvmCs by ozgur ozcirpan (@renklisayfa) on CodePen
Bizi Facebook üzerinden takip ederek güncellemelerden haberdar olabilirsiniz…
Facebook sayfamız: https://www.facebook.com/renklisayfatasarim
