Front-end
Mart 8, 2023
HTML’de İkon Eklemenin Modern Yöntemleri
Yazar:
Burak Özkıran
Son yıllarda kullanımı gittikçe artan ve sunduğu avantajlarıyla SVG, Ölçeklenebilir Vektör Grafikleri (Scalable Vector Graphics) anlamına gelir. Bu vektör görüntü formatı JPEG, PNG ve GIF gibi diğer görüntü formatlarına kıyasla çok daha az yer kaplar. Aynı zamanda SVG’ler herhangi bir kalite kaybı olmadan ölçeklendirilebilir ve CSS aracılığıyla özelleştirilebilir. Küçük boyutlu olması sebebiyle web sayfalarının daha performanslı çalışmasını sağlar. Böylece SEO ( Search Engine Optimization ), kullanıcı deneyimi gibi konularda açısından avantaj sağlamış oluruz. Bu özellikleriyle yazılım projelerinde tasarım ve geliştirme süreçlerinin vazgeçilmez bir parçası haline gelmeye başlayan SVG teknolojisi front-end geliştirme aşamasında birkaç farklı metod ile kullanılabilir.
Bu yazımızda HTML’de SVG ikonu ekleme işlemi için aşağıdaki yöntemleri inceleyeceğiz:
Yöntem 1: Background-Image Olarak Ekleme
Yöntem 2: IMG Etiketi Kullanarak Ekleme
Yöntem 3: SVG’yi Doğrudan HTML’e Ekleme
Yöntem 4: Font-Family Olarak Ekleme
“Background-image” olarak ekleme yöntemi Bootstrap 5.0’da da aktif olarak kullanılan güncel bir metottur.
Yapacağımız işlem span objesinin “::before” pseudo class’ını kullanıp, 20px’lik bir alana background image eklemek olacak. Böylece tüm span’lara aynı background image’ı atamış olacağız.
Span etiketi kullanarak bir örnek yapalım:
<span>Örnek Span </span>
Style bölümünde öncelikle span etiketine aşağıdaki kodları tanımlayalım. Span etiketinin varsayılan display property’sinin default value’su inline olduğu için (“display:inline”), “display:flex” tanımlaması yapmamız gerekiyor. Flex value’su ile “::before” ve span’in yan yana görünmesini sağlayacağız. “gap:10px” ise “::before” ve span arasına 10px’lik boşluk bıracak.
span {
display: flex;
gap: 10px;
}
Bir sonraki adımda ise span’a “::before” tanımlaması yapalım. Aşağıdaki kodlar ile Span’dan önce oluşan kısma boş bir 20px’lik alan tanımladık. Şuan tek yapmamız gereken şey, SVG kodunu “background-image” alanına eklemek.
span::before {
content: "";
background-image: ;
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
}
Bu işlem için aşağıdaki SVG grafiği kullanabiliriz. CSS’de “background-image” alanına SVG kodu eklememiz için SVG kodunu DATA URI formatına dönüştürmek gerekir. Bu işlem için arama motoruna “svg to data image” yazdığınızda çok fazla alternatif tool bulabiliriz.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><g fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#212121"></path></g></svg>
SVG kodunu URL-encoder for SVG adresindeki Insert SVG alanına yapıştıralım ve Ready for CSS alanında bize üretilen CSS kodunu alıp CSS’deki ilgili alana yapıştıralım.
HTML dosyamızın son hali aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span>Örnek Span </span>
<style>
span {
display: flex;
gap: 10px;
}
span::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
}
</style>
</body>
</html>
Browser’da görünen hali ise aşağıdaki gibi olacaktır.
Mouse ile “Örnek Span” üzerine gelindiğinde aşağı ok ikonunun yukarı doğru dönmesi için gereken işlemleri yapalım.
Span’a hover olduğunda “::before” alanının yönünü 180 derece değiştirecek kodu aşağıdaki gibi uygulayalım.
span:hover::before {
transform: rotate(180deg);
}
Böylece ikinci SVG ikonuna gerek kalmadan sadece rotate komutu ile ikonun yönünü değiştirdik. Ek olarak ikon yukarı doğru dönerken, transition komutu ile güzel bir geçiş animasyonu uygulamış olduk.
transition: .5s ease-in-out;
“Ease-in” etkisi, sadece başlangıçta yumuşak bir geçiş yaratır. “Ease-out” ise sadece animasyon sonunda yumuşak bir geçiş sağlar. “Ease-in-out” ise hem başlangıçta hem de sonunda yumuşak bir geçiş efekti uygular. İlgili animasyonumuz iki yönlü olacağı için “Ease-in-out” seçeneğinin kullanılması daha güzel bir deneyim yaratır.
“ease-in-out” kodunu eklediğimizde HTML dosyamızın son hali aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span>Örnek Span </span>
<style>
span {
display: flex;
gap: 10px;
}
span::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
transition: 0.5s ease-in-out;
}
span:hover::before {
transform: rotate(180deg);
}
</style>
</body>
</html>
IMG Etiketi kullanarak SVG eklemek çok tercih edilmeyen bir yöntemdir. HTML dosyamızda tekrarlı kullanım olmayacaksa bu yöntem tercih edilebilir. Aşağıdaki kullanım ile IMG etiketi olarak nasıl SVG eklendiğini görüyoruz. Fark edeceğiniz gibi PNG veya JPG eklemekten çok bir farkı bulunmuyor.
<img src=”./path/icon.svg” >
Bu durumda aşağıdaki gibi görünecektir.
SVG görselimizi metin editörü ile açtığımızda yada bir browserda açarak kaynak kodlarını incelediğimizde SVG’nin kodlardan oluşan yapısını görüntüleyebiliriz. Bu şekilde SVG dosyasının içerisindeki tüm kodu alıp HTML sayfamıza ekleyebiliriz.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><g fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#212121"></path></g></svg> </body> </html>
Bu durumda aşağıdaki gibi görünecektir.
Bootstrap Icons ya da Font Awesome gibi hazır kütüphane ve hazır ikonlar kullanmak isterseniz hali hazırda SVG formatında ikon setler mevcut. Bunlar kullanılabilir.
Ancak özel tasarım SVG dosyalarını font family’e dönüştürmek istersek Nucleo, Icomoon v.b araçları kullanmak gerekir.
Kullanım kolaylığı nedeniyle Front-end developerların daha çok tercih ettiği Nucleo uygulamasıdır. Nucleo ile nasıl font family oluşturulur konusu başlı başına ele alınması gerektiği için ayrı bir yazıda ele aldık.
Nucleo ile SVG’lerimizi font family’e dönüştürme rehberi için Nucleo İle Font Family Oluşturma sayfamızı ziyaret edebilirsiniz.
Dipnot: SVG dosyalarının içerisine script komutları yazılabildiği için Script Injection riski bulundurur. Bu sebeple kullanıcıların SVG dosyalarını doğrudan yüklemesine izin vermek risklidir.