SVG - Panduan Cepat

Apa SVG?

SVG, Scalable Vector Graphics adalah bahasa berbasis XML untuk mendefinisikan grafik berbasis vektor.
SVG dimaksudkan untuk menampilkan gambar melalui web.
Menjadi gambar vektor, gambar SVG tidak pernah kehilangan kualitas tidak peduli bagaimana mereka diperbesar atau diubah ukurannya.
Gambar SVG mendukung interaktivitas dan animasi.
SVG adalah standar W3C.
Format gambar lainnya seperti gambar raster juga dapat dipukul dengan gambar SVG.
SVG terintegrasi dengan baik dengan XSLT dan DOM HTML.

Keuntungan

Gunakan editor teks apa saja untuk membuat dan mengedit gambar SVG.
Berbasis XML, gambar SVG dapat dicari, dapat diindeks dan dapat dibuat skrip dan dikompresi.
Gambar SVG sangat dapat diskalakan karena tidak pernah kehilangan kualitasnya, tidak peduli bagaimana diperbesar atau diubah ukurannya
Kualitas pencetakan bagus pada resolusi apapun
SVG adalah Standar Terbuka

Kekurangan

Sedang ukuran format teks lebih besar dibandingkan dengan gambar raster berformat biner.
Ukuran bisa menjadi besar bahkan untuk gambar kecil.

Contoh

Potongan XML berikut dapat digunakan untuk menggambar lingkaran di browser web.

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

Sematkan XML SVG langsung di halaman HTML.

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>

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Di Internet Explorer, kontrol activeX diperlukan untuk melihat gambar SVG.

Bagaimana SVG terintegrasi dengan HTML

Elemen <svg> menunjukkan awal gambar SVG.
Atribut lebar dan tinggi elemen <svg> mendefinisikan tinggi dan lebar gambar SVG.
Dalam contoh di atas, kami telah menggunakan elemen <circle> untuk menggambar lingkaran.
Atribut cx dan cy merepresentasikan pusat lingkaran. Nilai defaultnya adalah (0,0). Atribut r mewakili jari-jari lingkaran.
Atribut lain stroke dan stroke-width mengontrol garis luar lingkaran.
atribut isian mendefinisikan warna isian lingkaran.
Tag penutup </svg> menunjukkan akhir dari gambar SVG.

SVG menyediakan sejumlah bentuk yang dapat digunakan untuk menggambar. Berikut ini adalah bentuk yang umum.

Sr.No.	Jenis Bentuk & Deskripsi
1	tepat Digunakan untuk menggambar persegi panjang.
2	lingkaran Digunakan untuk menggambar lingkaran.
3	elips Digunakan untuk menggambar elips.
4	garis Digunakan untuk menggambar garis.
5	poligon Digunakan untuk menggambar bentuk tertutup yang terdiri dari garis lurus yang terhubung.
6	polyline Digunakan untuk menggambar bentuk terbuka yang terdiri dari garis lurus yang terhubung.
7	jalan Digunakan untuk menggambar jalur apa pun.

Elemen <text> digunakan untuk menggambar teks.

Pernyataan

Berikut ini adalah deklarasi sintaks <text>elemen. Kami hanya menunjukkan atribut utama.

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

Atribut

Sr.No.	Atribut & Deskripsi
1	x - koordinat sumbu x mesin terbang.
2	y - koordinat sumbu y mesin terbang.
3	dx - bergeser dengan sumbu x.
4	dy - bergeser dengan sumbu y.
5	rotate - rotasi diterapkan ke semua mesin terbang.
6	textlength - merender panjang teks.
7	lengthAdjust - jenis penyesuaian dengan panjang teks yang diberikan.

Contoh

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>

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Internet Explorer 9 dan lebih tinggi juga mendukung rendering gambar SVG.

Teks dengan rotate

<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>

Keluaran

Teks Multiline

<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>

Keluaran

Teks hyper link

<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>

Keluaran

SVG mendukung beberapa properti goresan.

Berikut ini adalah properti goresan utama yang digunakan.

Sr.No.	Jenis & Deskripsi Stroke
1	stroke - menentukan warna teks, garis atau garis besar elemen apa pun.
2	stroke-width - mendefinisikan ketebalan teks, garis atau garis besar elemen apa pun.
3	stroke-linecap - mendefinisikan berbagai jenis akhir dari sebuah garis atau garis besar dari jalur manapun.
4	stroke-dasharray - digunakan untuk membuat garis putus-putus.

Contoh

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>

Keluaran

Lebar guratan

<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>

Keluaran

stroke-linecap

<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>

Keluaran

stroke-dasharray

<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>

Keluaran

SVG menggunakan elemen <filter> untuk menentukan filter. Elemen <filter> menggunakan atribut id untuk mengidentifikasinya secara unik. Filter didefinisikan dalam elemen <def> dan kemudian direferensikan oleh elemen grafis dengan id-nya.

SVG menyediakan sekumpulan filter yang kaya. Berikut adalah daftar filter yang biasa digunakan.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filter untuk bayangan jatuh
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Pernyataan

Berikut ini adalah deklarasi sintaks <filter>elemen. Kami hanya menunjukkan atribut utama.

<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>

Atribut

Sr.No.	Nama & Deskripsi
1	filterUnits- unit untuk menentukan wilayah efek filter. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam filter dan untuk atribut yang menentukan subkawasan filter. Jika filterUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'filter' digunakan. Jika filterUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'filter' digunakan. Default-nya adalah userSpaceOnUse.
2	primitiveUnits- unit untuk menentukan wilayah efek filter. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam filter dan untuk atribut yang menentukan subkawasan filter. Jika filterUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'filter' digunakan. Jika filterUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'filter' digunakan. Default-nya adalah userSpaceOnUse.
3	x- koordinat sumbu x kotak pembatas filter. Defeault adalah 0.
4	y- koordinat sumbu y dari kotak pembatas filter. Default-nya adalah 0.
5	width- lebar kotak pembatas filter. Default-nya adalah 0.
6	height- tinggi kotak pembatas filter. Default-nya adalah 0.
7	filterRes - angka yang mewakili daerah filter.
8	xlink:href - digunakan untuk merujuk ke filter lain.

Contoh

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>

Dua elemen <filter> didefinisikan sebagai filter1 dan filter2.
Efek filter feGaussianBlur mendefinisikan efek blur dengan jumlah blur menggunakan stdDeviation.
in = "SourceGraphic" mendefinisikan bahwa efek berlaku untuk seluruh elemen.
Efek filter feOffset digunakan untuk membuat efek bayangan. in = "SourceAlpha" mendefinisikan bahwa efek dapat diterapkan untuk bagian alpha dari grafik RGBA.
Elemen <benar> menautkan filter menggunakan atribut filter.

Keluaran

Filter dengan efek Shadow

<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>

Keluaran

SVG menggunakan elemen <pattern> untuk mendefinisikan pola. Pola didefinisikan menggunakan elemen <pattern> dan digunakan untuk mengisi elemen grafis dengan gaya ubin.

Pernyataan

Berikut ini adalah deklarasi sintaks <pattern>elemen. Kami hanya menunjukkan atribut utama.

<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>

Atribut

Sr.No.	Nama & Deskripsi
1	patternUnits- unit untuk menentukan wilayah efek pola. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam pola dan untuk atribut yang menentukan subkawasan pola. Jika patternUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'pola' digunakan. Jika patternUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'pola' digunakan. Default-nya adalah userSpaceOnUse.
2	patternContentUnits- unit untuk menentukan wilayah konten pola. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam pola dan untuk atribut yang menentukan subkawasan pola. Jika patternContentUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'pola' digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'pola' digunakan. Default-nya adalah userSpaceOnUse.
3	x- koordinat sumbu x dari kotak pembatas pola. Defeault adalah 0.
4	y- koordinat sumbu y dari kotak pembatas pola. Default-nya adalah 0.
5	width- lebar kotak pembatas pola. Default-nya adalah 0.
6	height- tinggi kotak pembatas pola. Default-nya adalah 0.
7	preserveAspectRatio - untuk mempertahankan rasio lebar / tinggi konten asli.
8	xlink:href - digunakan untuk merujuk ke pola lain.

Contoh

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>

Satu elemen <pattern> didefinisikan sebagai pattern1.
Dalam pola, kotak tampilan ditentukan dan jalur yang akan digunakan sebagai pola ditentukan.
di elemen persegi, di atribut isian, url pola ditentukan untuk mengisi persegi panjang dengan pola yang dibuat sebelumnya.

Keluaran

Gradien mengacu pada transisi mulus dari satu warna ke warna lain dalam suatu bentuk. SVG menyediakan dua jenis gradien.

Linear Gradients - Merupakan transisi linier dari satu warna ke warna lain dari satu arah ke arah lain.
Radial Gradients - Merupakan transisi melingkar dari satu warna ke warna lain dari satu arah ke arah lain.

Gradien Linier

Pernyataan

Berikut ini adalah deklarasi sintaks <linearGradient>elemen. Kami hanya menunjukkan atribut utama.

<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>

Atribut

Sr.No.	Nama & Deskripsi
1	gradientUnits- unit untuk menentukan sistem koordinat untuk berbagai nilai panjang dalam gradien. Jika gradientUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen gradien digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase kotak pembatas pada elemen referensi di tempat pada saat elemen gradien digunakan. Default-nya adalah userSpaceOnUse.
2	x1- koordinat sumbu x dari vektor gradien. Defeault adalah 0.
3	y1- koordinat sumbu y dari vektor gradien. Default-nya adalah 0.
4	x2- koordinat sumbu x dari vektor gradien. Defeault adalah 0.
5	y2- koordinat sumbu y dari vektor gradien. Default-nya adalah 0.
6	spreadMethod- menunjukkan metode penyebaran gradien dalam elemen grafis. Default-nya adalah 'pad'.
7	xlink:href - digunakan untuk merujuk ke gradien lain.

Contoh

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>

Satu elemen <linearGradient> didefinisikan sebagai sampleGradient.
Dalam linearGradient, dua offset ditentukan dengan dua warna.
dalam elemen persegi, dalam atribut isian, url dari gradien ditentukan untuk mengisi persegi panjang dengan gradien yang dibuat sebelumnya.

Keluaran

Gradien Radial

Pernyataan

Berikut ini adalah deklarasi sintaks <radialGradient>elemen. Kami hanya menunjukkan atribut utama.

<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>

Atribut

Sr.No.	Nama & Deskripsi
1	gradientUnits- unit untuk menentukan sistem koordinat untuk berbagai nilai panjang dalam gradien. Jika gradientUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen gradien digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase kotak pembatas pada elemen referensi di tempat pada saat elemen gradien digunakan. Default-nya adalah userSpaceOnUse.
2	cx- koordinat sumbu x dari pusat lingkaran terbesar vektor gradien. Defeault adalah 0.
3	cy- koordinat sumbu y dari pusat lingkaran terbesar vektor gradien. Default-nya adalah 0.
4	r- Jari-jari pusat lingkaran terbesar vektor gradien. Defeault adalah 0.
5	fx- titik fokus gradien radial. Default-nya adalah 0.
6	fy- titik fokus gradien radial. Default-nya adalah 0.
7	spreadMethod- menunjukkan metode penyebaran gradien dalam elemen grafis. Default-nya adalah 'pad'.
8	xlink:href - digunakan untuk merujuk ke gradien lain.

Contoh

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>

Satu elemen <radialGradient> didefinisikan sebagai sampleGradient.
Dalam radialGradient, dua offset didefinisikan dengan dua warna.
dalam elemen persegi, dalam atribut isian, url dari gradien ditentukan untuk mengisi persegi panjang dengan gradien yang dibuat sebelumnya.

Keluaran

Gambar SVG dapat dibuat responsif terhadap tindakan pengguna. SVG mendukung peristiwa penunjuk, peristiwa keyboard, dan peristiwa dokumen. Perhatikan contoh berikut.

Contoh

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>

Penjelasan

SVG mendukung fungsi JavaScript / ECMAScript. Blok skrip berada di blok CDATA dengan mempertimbangkan dukungan data karakter dalam XML.
Elemen SVG mendukung acara mouse, acara keyboard. Kami telah menggunakan acara onClick untuk memanggil fungsi javascript.
Pada fungsi javascript, dokumen merepresentasikan dokumen SVG dan dapat digunakan untuk mendapatkan elemen SVG.
Dalam fungsi javascript, peristiwa mewakili peristiwa saat ini dan dapat digunakan untuk mendapatkan elemen target tempat peristiwa dimunculkan.

Keluaran

Elemen <a> digunakan untuk membuat hyperlink. Atribut "xlink: href" digunakan untuk meneruskan IRI (Internationalized Resource Identifiers) yang melengkapi URI (Uniform Resource Identifiers).

Pernyataan

Berikut ini adalah deklarasi sintaks <a>elemen. Kami hanya menunjukkan atribut utama.

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

Atribut

Sr.No.	Nama & Deskripsi
1	xlink:show- untuk tujuan dokumentasi bagi prosesor yang sadar akan XLink. Default baru.
2	xlink:actuate - untuk tujuan dokumentasi bagi prosesor yang sadar akan XLink.
3	xlink:href - lokasi objek yang direferensikan.
4	target - digunakan ketika target untuk sumber daya akhir memungkinkan.

Contoh

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>

Keluaran