SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics-Ölçeklenebilir Vektör Grafikleri) 2 boyutlu grafik tanımlamak için yaratılan bir XML dilidir.

Bugün bir çok grafik programı SVG tipini desteklemektedir. SVG web sayfalarına koyulabilir. Gelecekte tüm browser'lar SVG'yi destekleyeceklerdir. SVG GIF veya JPG'ten çok daha az yer tuttuğu için tercih edilecektir.

Zafer Teker

tekzaf@yahoo.com

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 		<linearGradient id="MyGradient">
  7     	    <stop offset="5%" stop-color="#F60"/>
  8         	<stop offset="95%" stop-color="#FF6"/>
  9       </linearGradient>
 10 	 </defs>
 11 	 
 12 	<rect x="0" y="0" width="98" height="98" fill="url(#MyGradient)" stroke="black" stroke-width="1"/>
 13 	<text x="50" y="20" text-anchor="middle">Örnek</text>
 14 	<circle cx="50" cy="50" r="20"  fill="blue" stroke="red" stroke-width="2"/>
 15 </svg>

Ana Yapı

Bir svg dökümanı <svg> ile başlar ve <svg> ile biter. Oluşacak svg'nin ne kadar boyutta olacağı (kaç pixsel vs..) width ve height attributesi ile verilir. viewBox ise koordinat değerlerini belirlemek için kullanılır. Örneğin

denildiği zaman nesnelerin nereye koyulacağı viewBox'a göre belirlenir. Örneğin tam ortaya bir şey çizmek için x ve y 50 değeri verilir. viewBox, grafiğin boyutundan bağımsızdır. Aşağıda tam ortaya bir çember çizen bir örnek görülmekte.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	 
  6 	<circle cx="50" cy="50" r="20"  fill="blue" stroke="red" stroke-width="2"/>
  7 </svg>

dikkat edilirse oluşacak svg 200x200 pixsel boyularında ama biz 100x100 koordinatlarını kullanıyoruz. Bu yüzden ekranın tam ortasına çember çizmek için x ve y değerlerini 50 veriyoruz.

Basit Şekiller

SVG'de çizgi,çember,dikdörtgen,elips veya birden çok çizgiden oluşan şekiller (örneğin yamuk,paralel kenar vs.. çizmek için) çizmenizi sağlar. Aşağıdaki örnekte tüm basit şekiller çizilmiştir.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	
  6 	<rect x="45" y="5" width="10" height="10" fill="none" stroke="black" stroke-width="1"/>
  7 	
  8 	<circle cx="50" cy="30" r="10"  fill="blue" stroke="red" stroke-width="2"/>
  9 	
 10 	<ellipse cx="50" cy="50" rx="20" ry="5" fill="red"/>	
 11 	
 12 	<line x1="10" y1="80" x2="90" y2="80" stroke="green" stroke-width="4"/>		
 13 	
 14 </svg>

polyline ve polygon ise noktalar kullanarak istenilen şeklin çizlebilmesini sağlar. Örneğin aşağıda ters V işaretine benzer bir şekil yapıyoruz. (Yukarı doğru yön işareti)

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	
  6 	<polyline 
  7 	 	fill="none" stroke="blue" stroke-width="5" 
  8     	points="30,50 50,30 70,50"/>	
  9 </svg>

polygon ise polyline'a benzer ancak polygon'da şekil kapalıdır. Son nokta ile ilk nokta birleştirilir. Yukarıda polyline ile yaptığımız noktaları kullandığımızda bir üçgen şekli oluşur.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	
  6 	<polygon 
  7 	 	fill="none" stroke="blue" stroke-width="5" 
  8     	points="30,50 50,30 70,50"/>	
  9 </svg>

Path Elementi

Basit şekillerden daha zor şekiller çizmek içinse path elementi kullanılır. Polyline ve Polygon verilen noktalar arasına çizgi çizmektedir. path'e ise iki nokta arasındaki çizgiyi değiştirebilirsiniz. Bunun için "kontol noktaları" kullanılır. Verilen kontrol noktalarına göre çizgi eğrileşir. (Bezier Eğrileri)

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	
  6 	<path 
  7 		fill="none" stroke="blue" stroke-width="3"		d="M 30 50  L 50 30 L 70 50 z"/>	
  8 	 		
  9 </svg>

ile path verilmektedir. M move anlamıda gelir ve path'in başlangıç yerini verir. Daha sonra L (Line) ile 50,30'a bir çizgi, daha sonra 70,50'ye bir çizgi çizilir. z (clospath anlamına geliyor) ile path kapatılır.

Eğri çizmek için ise kontrol noktaları kullanılır. Bu kontrol noktalarına göre çizgi eğrileşir.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="200px"	height="200px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	
  6 	<path 
  7 		fill="none" stroke="blue" stroke-width="3"		d="M10,0  C-10,40 110,60 90,90"/>	
  8 	 		
  9 </svg>

ile path verilmiştir. Aslında 10,0 noktasından 90,90 noktasına düz bir çizgi çizlmiştir ancak iki kontrol noktası verilmiştir. -10,40 ve 110,60 noktaları kontrol noktalarıdır. -10 noktasından çekildiği için eğri biraz sola doğru dönmüştür. 110,60'tan dolayı eğri sonlara doğru sağa doğru çekilmiştir.

Yazı

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<text x="50" y="20" stroke="red" fill="none" font-size="15" text-anchor="middle">Test</text>
  6 	<text x="50" y="50" stroke="red" fill="none" font-size="15" text-anchor="middle">
  7 		T<tspan font-weight="bold" stroke="blue">e</tspan>st
  8 	</text>	
  9 	
 10 	<text x="50" y="80" stroke="red" fill="none" font-size="15" text-anchor="middle">
 11 		T<tspan dx="2" dy="-7" font-weight="bold" stroke="blue">e</tspan>st
 12 	</text>	
 13 </svg>

ilk yazıda "Test" yazısı 50,20 yazılmaktadır. text-anchor="middle" ile yazının tam ortasının 50,20 noktasına gelmesini sağlamaktayız. Eğer text-anchor="start" deseydik "Test" kelimesinin ilk harfi T 50,20'den başlardı. Bu yazının sığmamasına neden olabilirdi. Yazının belirli bir bölümüne değişik bir özellik eklenebilir. İkinci yazıda e harfi nin rengini mavi yapıyoruz. Üçüncü yazı ile T harfinden sonrakileri biraz yukarıda gözükmesiniz sağlıyoruz. Bunun için dx,dy özelliğini kullandık.

Gruplandırma ve Tekrar Kullanabilme

Birden fazla şekil bir gruba koyulabilir. Böylece bir grup içendekiler ortak özellikler verilebilir veya ortak ile bir yere konulabilir. grup için g elementi kullanılır.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 <g  fill="none" stroke="red">
  6 	<text x="50" y="20"  font-size="15" text-anchor="middle">Test</text>
  7 	<rect x="30" y="50" width="30" height="30" stroke-width="1"/>
  8 </g>
  9 </svg>

Şekiller,gruplar vs.. nesneleri tekrar tekrar kullanılabilir. Bunun için nesne <defs> içinde id verilerek tanımlanır. Daha sonra <use> ile kullanılır. Aşağıda bir dikdörtgen yaratıyoruz ve onu iki kere kullanıyoruz.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 		<rect id="rect" width="30" height="30" fill="none" stroke-width="1"/>
  7 	</defs>
  8 	<use x="10" y="10" stroke="red" xlink:href="#rect"/>
  9 	<use x="40" y="40" stroke="blue" xlink:href="#rect"/>
 10 	
 11 </svg>

değerleri verilir. Böylece istenilen yere ve istenilen renkte dikdörtgen kullanılabilir. Eğer dikdörtgenlerin rengi her zaman kırmızı olacaksa stroke="red" özelliğini <defs> elementin içindeki rect'te konulur.

Gruplandırmak için kullanılan diğer bir element Symbol''dur. Symbol g'den iki farkı vardır. Birincisi symbol, g gibi gözükmez. Sadece use ile gösterilebilir. İkincisi symbol'un kendisine ait bir viewBox'u olabilir. Yani symbol içindeki nesneler symbol'un belirlediği koordinat sistemine göre belirlenebilir.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 		<symbol viewBox="0 0 10 10" id="rect">
  7 			<rect  x="0" y="0" width="9" height="9" fill="none" stroke-width="0.1"/>
  8 		</symbol>
  9 	</defs>
 10 	<use x="10" y="10" width="20" height="20" stroke="red" xlink:href="#rect"/>
 11 	<use x="45" y="50" width="40" height="40" stroke="blue" xlink:href="#rect"/>
 12 	
 13 </svg>

şeklinde verilmiş. İçindeki rect elementi bu viewBox'a göre çizilmektedir. Kullanılırken

şeklinde x,width,height verilir. Symbol'un en büyük yararı içindeki nesneleri kendisine göre yerleştirebilmemizdir. g için aynı şey geçerli değildir. g içindeki tüm nesneler genel viewBox'a göre verilmelidir. genel viewBox'ta bir değişiklik yapılırsa g içindeki nesnelerin özelliklerini de yeniden ayarlamak gerekir. Symbol'de böyle bir ayarlamaya gerek yoktur.

Marker

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 		<marker 
  7 		id="arrow"		orient="auto" 
  8 		markerHeight="3" markerWidth="4" markerUnits="strokeWidth"		refY="5" refX="0"		viewBox="0 0 10 10">
  9 			<polyline  stroke="black" stroke-width="1" points="0,0 9,5 0,9"/>
 10 		</marker>
 11 	</defs>	
 12 	<line x1="10" y1="10" x2="70" y2="10" stroke="red" stroke-width="4" marker-end="url(#arrow)"/>
 13 	<line x1="30" y1="10" x2="70" y2="80" stroke="red" stroke-width="4" marker-end="url(#arrow)"/>
 14 	<line x1="70" y1="10" x2="20" y2="80" stroke="red" stroke-width="4" marker-end="url(#arrow)"/>	
 15 </svg>

arrow id'li bir marker yarattık. Bu marker çizginin ucu olmaktadır. Görüldüğü gibi çizginin yönü ne olursa olsun uc doğru bir şekilde yerleşmektedir.

Effect

SVG ile şekillere effect uygulanabilir. Örneğin gradyan effect verilebilir. Bir şeklin yüzeyine başka şekiller döşenebilir (Pattern). Filter effect'leri verilebilir.

Gradient

İki tür gradient vardır. Lineer gradient doğrusal olarak artar. radyan gradient ise bir noktadan başlar dairesel şeklinde büyür. aşağıdaki örnekte dikdörtgene doğrusal, çembere ise radial effect uygulanmaktadır.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 		<linearGradient id="lineer">
  7     	    <stop offset="5%" stop-color="#F60"/>
  8         	<stop offset="95%" stop-color="#FF6"/>			
  9       </linearGradient>
 10 	  
 11 		<radialGradient id="radial">
 12 			<stop offset="0%" stop-color="white"/>
 13         	<stop offset="50%" stop-color="blue"/>
 14         	<stop offset="100%" stop-color="red"/>
 15     	</radialGradient>	  
 16 	</defs>	
 17 	<rect x="0" y="0" width="98" height="48" fill="url(#lineer)" stroke="black" stroke-width="1"/>
 18 	
 19 	<circle cx="50" cy="75" r="25"  fill="url(#radial)" stroke="red" stroke-width="2"/>
 20 	
 21 </svg>

Pattern

Bir şekilin yüzeyini başka bir şekil veya şekil grubu ile kaplamak için kullanılır. Aşağıda bir kırmızı daire dikdörtgen yüzeni kaplamaktadır.

  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <svg 
  3 	width="100px"	height="100px"	viewBox="0 0 100 100"
  4     xmlns="http://www.w3.org/2000/svg">
  5 	<defs>
  6 	<pattern id="circle" patternUnits="userSpaceOnUse" width="20" height="20"  viewBox="0 0 10 10">
  7 		<circle cx="5" cy="5" r="5" stroke="blue" fill="red" stroke-width="0.5"/>
  8     </pattern> 
  9 	</defs>	
 10 	<rect x="0" y="0" width="98" height="98" fill="url(#circle)" stroke="black" stroke-width="1"/>
 11 	
 12 </svg>