SVG - Hızlı Kılavuz

SVG nedir?

SVG, Ölçeklenebilir Vektör Grafikleri, vektör tabanlı grafikleri tanımlamak için XML tabanlı bir dildir.
SVG'nin web üzerindeki resimleri görüntülemesi amaçlanmıştır.
Vektör görüntüleri olan SVG görüntüsü, nasıl uzaklaştırıldıklarına veya yeniden boyutlandırıldıklarına bakılmaksızın kaliteyi asla kaybetmez.
SVG görüntüleri, etkileşimi ve animasyonu destekler.
SVG, bir W3C standardıdır.
Tarama görüntüleri gibi diğer görüntü formatları da SVG görüntüleriyle birlikte kullanılabilir.
SVG, XSLT ve HTML DOM ile iyi entegre olur.

Avantajlar

SVG resimleri oluşturmak ve düzenlemek için herhangi bir metin düzenleyiciyi kullanın.
XML tabanlı olduğundan, SVG görüntüleri aranabilir, dizine eklenebilir ve komut dosyası oluşturulabilir ve sıkıştırılabilir.
SVG görüntüleri, nasıl uzaklaştırıldıklarına veya yeniden boyutlandırıldıklarına bakılmaksızın kaliteyi asla kaybetmediği için yüksek düzeyde ölçeklenebilir
Her çözünürlükte iyi baskı kalitesi
SVG bir Açık Standarttır

Dezavantajları

Metin formatı boyutu, ikili formatlı raster görüntülere kıyasla daha büyüktür.
Küçük resim için bile boyut büyük olabilir.

Misal

Aşağıdaki XML parçacığı, web tarayıcısında bir daire çizmek için kullanılabilir.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

SVG XML'yi doğrudan bir HTML sayfasına gömün.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer'da, SVG görüntülerini görüntülemek için activeX kontrolleri gerekir.

SVG, HTML ile nasıl entegre olur?

<svg> öğesi, SVG görüntüsünün başlangıcını belirtir.
<svg> öğesinin width ve height özellikleri, SVG görüntüsünün yüksekliğini ve genişliğini tanımlar.
Yukarıdaki örnekte, bir daire çizmek için bir <circle> elemanı kullandık.
cx ve cy özelliği, dairenin merkezini temsil eder. Varsayılan değer (0,0). r özelliği, dairenin yarıçapını temsil eder.
Diğer özellikler kontur ve kontur genişliği, dairenin ana hatlarını kontrol eder.
dolgu niteliği, dairenin dolgu rengini tanımlar.
Kapanış </svg> etiketi, SVG görüntüsünün sonunu belirtir.

SVG, resim çizmek için kullanılabilecek bir dizi şekil sağlar. Yaygın şekiller aşağıdadır.

Sr.No.	Şekil Türü ve Açıklaması
1	doğrudan Dikdörtgen çizmek için kullanılır.
2	daire Bir daire çizmek için kullanılır.
3	elips Elips çizmek için kullanılır.
4	hat Çizgi çizmek için kullanılır.
5	çokgen Bağlı düz çizgilerden oluşan kapalı bir şekil çizmek için kullanılır.
6	çoklu çizgi Bağlı düz çizgilerden oluşan açık bir şekil çizmek için kullanılır.
7	yol Herhangi bir yol çizmek için kullanılır.

<text> öğesi metin çizmek için kullanılır.

Beyanname

Aşağıdaki sözdizimi beyanıdır <text>öğesi. Yalnızca ana nitelikleri gösterdik.

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Öznitellikler

Sr.No.	Öznitelik ve Açıklama
1	x - gliflerin x ekseni koordinatları.
2	y - gliflerin y ekseni koordinatları.
3	dx - x ekseni ile birlikte kaydırma.
4	dy - y ekseni ile birlikte kaydırma.
5	rotate - tüm gliflere uygulanan döndürme.
6	textlength - metnin işleme uzunluğu.
7	lengthAdjust - işlenen metnin uzunluğu ile ayarlama türü.

Misal

testSVG.htm

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Döndürmeli metin

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Çok Satırlı Metin

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Köprü bağlantısı Metni

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

SVG, birden çok kontur özelliğini destekler.

Aşağıda, kullanılan ana vuruş özellikleri verilmiştir.

Sr.No.	Strok Tipi ve Tanımı
1	stroke - herhangi bir öğenin metninin, çizgisinin veya ana hatlarının rengini tanımlar.
2	stroke-width - herhangi bir elemanın metin, çizgi veya ana hatlarının kalınlığını tanımlar.
3	stroke-linecap - bir çizginin farklı türdeki sonlarını veya herhangi bir yolun ana hatlarını tanımlar.
4	stroke-dasharray - kesikli çizgiler oluşturmak için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Darbe genişliği

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

vuruş çizgisi

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

inme-çizgi dizisi

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

SVG, filtreleri tanımlamak için <filter> öğesini kullanır. <filter> öğesi, onu benzersiz bir şekilde tanımlamak için bir id niteliği kullanır. Filtreler, <def> öğeleri içinde tanımlanır ve ardından kimliklerine göre grafik öğeleri tarafından referans alınır.

SVG, zengin bir filtre seti sağlar. Yaygın olarak kullanılan filtrelerin listesi aşağıdadır.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - alt gölgeler için filtre
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Beyanname

Aşağıdaki sözdizimi beyanıdır <filter>öğesi. Yalnızca ana nitelikleri gösterdik.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Öznitellikler

Sr.No.	İsim & Açıklama
1	filterUnits- filtre efekti bölgesini tanımlayan birimler. Filtre içindeki çeşitli uzunluk değerleri ve filtre alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. FilterUnits = "userSpaceOnUse" ise değerler, 'filtre' öğesinin kullanıldığı anda yerinde olan geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. FilterUnits = "objectBoundingBox" ise, değerler, 'filtre' öğesi kullanıldığında, referans öğesindeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
2	primitiveUnits- filtre efekti bölgesini tanımlayan birimler. Filtre içindeki çeşitli uzunluk değerleri ve filtre alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. FilterUnits = "userSpaceOnUse" ise değerler, 'filtre' öğesinin kullanıldığı anda yerinde olan geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. FilterUnits = "objectBoundingBox" ise, değerler, 'filtre' öğesi kullanıldığında, referans öğesindeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
3	x- filtre sınırlama kutusunun x ekseni koordinatı. Varsayılan 0.
4	y- filtre sınırlama kutusunun y ekseni koordinatı. Varsayılan 0'dır.
5	width- filtre sınırlama kutusunun genişliği. Varsayılan 0'dır.
6	height- filtre sınırlama kutusunun yüksekliği. Varsayılan 0'dır.
7	filterRes - filtre bölgelerini temsil eden sayılar.
8	xlink:href - başka bir filtreye başvurmak için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Filter1 ve filter2 olarak tanımlanan iki <filter> öğesi.
feGaussianBlur filtre efekti stdDeviation kullanarak bulanıklaştırma efektini bulanıklık miktarı ile tanımlar.
in = "SourceGraphic", efektin tüm öğe için geçerli olduğunu tanımlar.
FeOffset filtre efekti, gölge efekti oluşturmak için kullanılır. in = "SourceAlpha", efektin RGBA grafiklerinin alfa kısmı için geçerli olduğunu tanımlar.
<rect> öğeleri, filtre özelliğini kullanarak filtreleri bağladı.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Gölge efektli filtre

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

SVG, desenleri tanımlamak için <desen> öğesini kullanır. Desenler, <desen> öğesi kullanılarak tanımlanır ve grafik öğelerini döşemeli biçimde doldurmak için kullanılır.

Beyanname

Aşağıdaki sözdizimi beyanıdır <pattern>öğesi. Yalnızca ana nitelikleri gösterdik.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Öznitellikler

Sr.No.	İsim & Açıklama
1	patternUnits- desen efekt bölgesini tanımlayan birimler. Model içindeki çeşitli uzunluk değerleri ve model alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. PatternUnits = "userSpaceOnUse" ise değerler, 'model' öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. PatternUnits = "objectBoundingBox" ise, değerler, 'desen' öğesi kullanıldığında, referans öğesindeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
2	patternContentUnits- model içerik bölgesini tanımlayan birimler. Model içindeki çeşitli uzunluk değerleri ve model alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. PatternContentUnits = "userSpaceOnUse" ise değerler, "model" öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. PatternContentUnits = "objectBoundingBox" ise, değerler 'pattern' öğesi kullanıldığında yerinde referans veren öğedeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
3	x- desen sınırlama kutusunun x ekseni koordinatı. Varsayılan 0.
4	y- desen sınırlama kutusunun y ekseni koordinatı. Varsayılan 0'dır.
5	width- desen sınırlama kutusunun genişliği. Varsayılan 0'dır.
6	height- desen sınırlama kutusunun yüksekliği. Varsayılan 0'dır.
7	preserveAspectRatio - orijinal içeriğin genişlik / yükseklik oranını korumak için.
8	xlink:href - başka bir kalıba atıfta bulunmak için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Pattern1 olarak tanımlanan bir <pattern> öğesi.
Modelde, bir görünüm kutusu tanımlanır ve model olarak kullanılacak bir yol tanımlanır.
dikdörtgen öğesinde, fill özniteliğinde, desenin url'si dikdörtgeni daha önce oluşturulan desenle doldurmak için belirtilir.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Gradyan, bir şekil içindeki bir rengin başka bir renge yumuşak geçişini ifade eder. SVG, iki tür gradyan sağlar.

Linear Gradients - Bir rengin bir yönden diğerine doğrusal geçişini temsil eder.
Radial Gradients - Bir rengin bir yönden diğerine dairesel geçişini temsil eder.

Doğrusal Degradeler

Beyanname

Aşağıdaki sözdizimi beyanıdır <linearGradient>öğesi. Yalnızca ana nitelikleri gösterdik.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Öznitellikler

Sr.No.	İsim & Açıklama
1	gradientUnits- gradyan içindeki çeşitli uzunluk değerleri için koordinat sistemini tanımlayan birimler. GradientUnits = "userSpaceOnUse" ise değerler, gradyan öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. PatternContentUnits = "objectBoundingBox" ise değerler, degrade öğesi kullanıldığında yerinde referans veren öğedeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
2	x1- gradyan vektörünün x ekseni koordinatı. Varsayılan 0.
3	y1- gradyan vektörünün y ekseni koordinatı. Varsayılan 0'dır.
4	x2- gradyan vektörünün x ekseni koordinatı. Varsayılan 0.
5	y2- gradyan vektörünün y ekseni koordinatı. Varsayılan 0'dır.
6	spreadMethod- gradyanı grafik öğesi içinde yayma yöntemini gösterir. Varsayılan 'ped'dir.
7	xlink:href - başka bir gradyanı belirtmek için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

SampleGradient olarak tanımlanan bir <linearGradient> öğesi.
LinearGradient'de, iki ofset iki renkle tanımlanır.
dikdörtgen öğesinde, fill özniteliğinde, renk geçişinin url'si dikdörtgeni daha önce oluşturulan degrade ile doldurmak için belirtilir.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Radyal Degradeler

Beyanname

Aşağıdaki sözdizimi beyanıdır <radialGradient>öğesi. Yalnızca ana nitelikleri gösterdik.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Öznitellikler

Sr.No.	İsim & Açıklama
1	gradientUnits- gradyan içindeki çeşitli uzunluk değerleri için koordinat sistemini tanımlayan birimler. GradientUnits = "userSpaceOnUse" ise değerler, gradyan öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. PatternContentUnits = "objectBoundingBox" ise değerler, degrade öğesi kullanıldığında yerinde referans veren öğedeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
2	cx- gradyan vektörünün en büyük dairesinin merkezinin x ekseni koordinatı. Varsayılan 0.
3	cy- gradyan vektörünün en büyük dairesinin merkezinin y ekseni koordinatı. Varsayılan 0'dır.
4	r- gradyan vektörünün en büyük dairesinin merkezinin yarıçapı. Varsayılan 0.
5	fx- radyal gradyanın odak noktası. Varsayılan 0'dır.
6	fy- radyal gradyanın odak noktası. Varsayılan 0'dır.
7	spreadMethod- gradyanı grafik öğesi içinde yayma yöntemini gösterir. Varsayılan 'ped'dir.
8	xlink:href - başka bir gradyanı belirtmek için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

SampleGradient olarak tanımlanan bir <radialGradient> öğesi.
RadyalGradient'de, iki ofset iki renkle tanımlanır.
dikdörtgen öğesinde, fill özniteliğinde, renk geçişinin url'si dikdörtgeni daha önce oluşturulan degrade ile doldurmak için belirtilir.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

SVG görüntüleri, kullanıcı eylemlerine duyarlı hale getirilebilir. SVG, işaretçi olaylarını, klavye olaylarını ve belge olaylarını destekler. Aşağıdaki örneği düşünün.

Misal

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Açıklama

SVG, JavaScript / ECMAScript işlevlerini destekler. Komut dosyası bloğu, XML'de karakter veri desteğini göz önünde bulundurarak CDATA bloğunda olacaktır.
SVG öğeleri, fare olaylarını ve klavye olaylarını destekler. Bir javascript işlevini çağırmak için onClick olayını kullandık.
JavaScript işlevlerinde belge, SVG belgesini temsil eder ve SVG öğelerini almak için kullanılabilir.
JavaScript işlevlerinde olay, geçerli olayı temsil eder ve olayın ortaya çıktığı hedef öğeyi elde etmek için kullanılabilir.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler. Sonucu görmek için her bir metne ve dikdörtgene tıklayın.

<a> öğesi köprü oluşturmak için kullanılır. "xlink: href" özelliği, URI'yi (Tekdüzen Kaynak Tanımlayıcıları) tamamlayıcı olan IRI'yi (Uluslararasılaştırılmış Kaynak Tanımlayıcıları) geçirmek için kullanılır.

Beyanname

Aşağıdaki sözdizimi beyanıdır <a>öğesi. Yalnızca ana nitelikleri gösterdik.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Öznitellikler

Sr.No.	İsim & Açıklama
1	xlink:show- XLink uyumlu işlemciler için dokümantasyon amaçlı. Varsayılan yenidir.
2	xlink:actuate - XLink uyumlu işlemciler için dokümantasyon amaçlı.
3	xlink:href - referans verilen nesnenin konumu.
4	target - son kaynak için hedefler mümkün olduğunda kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler. Sonucu görmek için bağlantıya ve dikdörtgene tıklayın.