Yücel Alkan

SVG Nedir?

Merhabalar. Bu yazımda web dünyasında kullanımı giderek artan bir dosya formatı olan SVG'den bahsedeceğim. SVG'nin açılımı Scalable Vector Graphics'tir. Türkçe'ye ise Ölçeklendirilebilir Vektör Grafikleri olarak çevrilebilir. SVG'yi anlamak için önce vektör kavramını anlamak gerekiyor.

Tasarımla ilgilenenlerin mutlaka bilmesi gereken bir kavram olan vektör; çözünürlükten bağımsız ve matematiksel ifadelerle oluşturulan grafik dosyasıdır. En büyük özelliği ve avantajı ise ölçeklendirilebilir olması yani hangi boyutta kullanılırsa kullanılsın herhangi bir detay kaybına uğramamasıdır. Örneğin; içerisinde ay ve yıldız simgelerini içeren bir vektör dosyamız varsa, bunu bir bina boyutuna bile getirsek herhangi bir bozulma olmayacaktır.

İşte SVG'nin mantığı da tam olarak budur. Elimizde bulunan bir SVG dosyasını, web sayfamız içerisinde hangi boyutta kullanırsak kullanalım herhangi bir bozulma meydana gelmeyecekktir. 

SVG hakkında bilmemiz gereken en önemli bilgi, SVG'nin XML tabanlı oluşudur. Yani aslında SVG dosyası XML yapısında yazılmış bilgileri içerir. 

SVG'nin genel özelliklerini özetle şöyle sıralayabiliriz

  • XML tabanlıdır.
  • Vektör yapısındadır. 
  • XML yapısı içinde tanımlanmış çizim bilgilerini barındırır.
  • SVG dosyası içinde belirtilmiş her element ve her özellik, hareketlendirilebilir yani animasyon haline getirilebilir.
  • Herhangi bir metin editörü yardımıyla SVG dosyası oluşturmak mümkündür. Çünkü üçüncü maddede belirttiğim gibi SVG aslında çizim bilgilerini XML yapısında barındıran bir dosyadır. Yine Adobe Illustrator gibi programlarla, oluşturduğunuz çizimleri SVG olarak kaydedebilirsiniz.
  • SVG dosyası herhangi bir boyuta ölçeklendirilebilir. Yani elinizde kalp ikonu içeren bir SVG dosyası varsa, siz bu kalp ikonunu ister 100px isterseniz 500px genişliğinde kullanabilirsiniz. Herhangi bir bozulma olmayacaktır.
  • SVG dosyaları, sayfaların yazıdırılması esnasında kayba uğramaz. 
  • Zoom yapıldığı yani yakınlaştırıldığı zaman herhangi bir bozulma olmaz.
  • Vektörel olma özelliği göz önüne alındığında kapladığı alan oldukça azdır.

Bu kadar yazıdan sonra küçük bir örnekle devam edelim. Örneğin; aşağıda yer alan cami ikonu bir SVG dosyasıdır. Flaticon.com gibi sitelerden SVG uzantılı ikonlar indirebilirsiniz. 


SVG dosyasının kullanımı, JPG, PNG gibi diğer dosya türleri ile birebir aynı yani ister arkaplan olarak isterseniz resim olarak ekleyebilirsiniz.

<img src="cami.svg" style="width: 50px" alt="" />

Ben genişliğini 50px olarak ayarladım. Siz dilerseniz bu boyutu değiştirebilirsiniz. 

Arkaplan resmi olarak kullanımı da aşağıdaki gibi. Elementin genişlik ve yüksekliğini ne yaparsanız SVG dosyası da o boyutta arkaplan resmi olacaktır. Bu da oldukça güzel bir kolaylık sunmaktadır. Örnekte bir link oluşturduk ve arkaplan resmini de SVG dosyası olarak ayarladık. Dikkat ederseniz boyutunu 200x200px yaptım. Cami ikonu bu boyutu alacaktır.

a.link { 
    display: block; width: 200px; height: 200px;
    background-image: url(cami.svg);
}
<a href="" class="link"></a>

Büyütüldüğü zaman bozulma olmadığını göstermek için özellikle kıvrımları olan bir şekil seçtim. Şimdi bu svg dosyasında yer alan camii ikonunu farklı boyutlarda kullanalım, bakalım bozulma olacak mı?

Gördüğünüz gibi aynı ikonu 50px, 100px, 250px, 500px ve 750px gibi farklı boyutlarda kullandım ve herhangi bir bozulma ya da detay kaybolması olmadı. İşte yukarıda bahsettiğimiz vektörel yapı tam olarak bunu anlatıyor.

Gelelim SVG'nin XML yapısına. Yukarıda görünen cami ikonuna sağ tıklayıp SVG dosyası olarak kaydedebilir ya da internetten herhangi bir SVG dosyası bulup, metin editörlerinden biriyle açtığınız zaman dosyanın XML kodlarını göreceksiniz. Bizim cami olarak gördüğümüz ikon, aslında aşağıdaki XML bilgilerinden oluşturuluyor.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 383.594 383.594" style="enable-background:new 0 0 383.594 383.594;" xml:space="preserve">
<path d="M375.701,201.29c0-1.98-1.078-3.693-2.668-4.629c6.516-5.986,10.561-12.909,10.561-22.79
	c0-29.125-35.504-34.861-35.504-48.258c0,13.397-35.504,19.133-35.504,48.258c0,9.88,4.044,16.803,10.561,22.789
	c-1.59,0.936-2.668,2.648-2.668,4.63c0,2.875,2.253,5.201,5.09,5.355v28.777c-2.837,0.153-5.09,2.48-5.09,5.355
	c0,2.876,2.253,5.205,5.09,5.358v15.025h-66.557v-21.915h-7.639v-15.089h-0.633c13.466-13.113,21.715-28.355,21.715-49.633
	c0-60.061-66.449-76.349-78.719-101.6c2.155,0.536,4.375,0.826,6.614,0.826c8.364,0,16.176-3.724,21.432-10.217
	c1.828-2.263,3.285-4.783,4.329-7.492l0.162-0.421l-0.379,0.246c-4.421,2.865-9.556,4.38-14.849,4.38
	c-6.209,0-12.294-2.157-17.136-6.073c-9.198-7.449-12.541-19.877-8.316-30.927l0.161-0.42l-0.378,0.245
	c-2.43,1.577-4.592,3.526-6.425,5.792c-4.631,5.72-6.758,12.9-5.987,20.219c0.77,7.319,4.347,13.9,10.068,18.53
	c2.213,1.791,4.693,3.198,7.318,4.223c-10.849,25.883-79.213,41.769-79.213,102.688c0,21.277,8.246,36.52,21.713,49.633h-0.633
	v15.089h-7.637v21.915H58.021v-15.092c2.84-0.153,5.1-2.481,5.1-5.355c0-2.875-2.26-5.203-5.1-5.355v-28.779
	c2.84-0.153,5.1-2.48,5.1-5.355c0-1.979-1.082-3.691-2.675-4.626c6.514-5.984,10.561-12.907,10.561-22.788
	c0-29.125-35.508-34.865-35.508-48.263c0,13.397-35.5,19.138-35.5,48.263c0,9.882,4.047,16.805,10.563,22.788
	c-1.592,0.936-2.672,2.647-2.672,4.626c0,2.874,2.258,5.201,5.094,5.355v28.779c-2.836,0.154-5.094,2.481-5.094,5.355
	c0,2.873,2.258,5.201,5.094,5.355v15.092h-0.031v99.607H57.18v-38.402c0-15.941,22.84-26.385,22.84-26.385
	s22.838,10.443,22.838,26.385v38.402h56.912v-54.822c0-22.352,32.027-36.995,32.027-36.995s32.025,14.644,32.025,36.995v54.822
	h56.912v-38.402c0-15.941,22.838-26.385,22.838-26.385s22.84,10.443,22.84,26.385v38.402h44.227V261.16h-0.029v-15.025
	c2.836-0.152,5.092-2.481,5.092-5.358c0-2.875-2.256-5.203-5.092-5.355v-28.776C373.445,206.493,375.701,204.165,375.701,201.29z"/>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>

Aklınıza şu soru gelmiş olabilir; eğer SVG dosyası bu şekilde XML yapısından meydana geliyorsa kendimiz de böyle bir SVG dosyası oluşturabilir miyiz? Tabi ki evet. İnternette SVG oluşturma ile ilgili araştırmalar yaparsanız bu konuda çok sayıda kaynağa erişim sağlayabilirsiniz. Ancak ben burada yazımı sonlandıracağım.

Soru, görüş ve önerilerinizi yorum olarak bırakabilirsiniz. Hayırlı çalışmalar dilerim.

31.07.2019
15462
htmlsvg
Front End HTML
Diğer İçerikler
Telefon Linki Oluşturma Telefon Linki Oluşturma
Mobil İçin Tarayıcı Rengini Değiştirme (Theme Color) Mobil İçin Tarayıcı Rengini Değiştirme (Theme Color)
FontAwesome Kullanımı FontAwesome Kullanımı
Yorumlar
Deniz AŞAR (25 Mayıs 2022 - 15:39)
Yücel Bey, Anlaşılır bir şekilde izah etmişsiniz. Teşekkürler. İki sorum olacak. 1 - Çizim yapıldıktan sonra SVG formatında kaydedilen bir program var mıdır? 2 - Bir resmi ya da çizimi SVG formatına çeviren bir program var mıdır? Teşekkürler. Deniz
Cevapla
Yorum Yapın