SVG tag- ஆனது வட்டம், செவ்வகம், நீள்கோளம், Polygon போன்ற வடிவங்களை திரையில் வெளிப்படுத்த உதவும். இது Scalar Vector Graphics எனப் பொருள்படும். இந்த tag-க்குள் ஒவ்வொரு வடிவத்தை வெளிப்படுத்துவதற்கும் தனித்தனி tags பயன்படும். இத்தகைய tags-க்கான விதிமுறைகள் அனைத்தும் http://www.w3.org/2000/svg எனுமிடத்தில் காணப்படும். எனவேதான் SVG tag-ன் xmlns (Extensible Markup Language Name Space) எனும் attribute இந்த முகவரியை அதன் மதிப்பாக பெற்றிருக்கும்.
இப்போது ஒரு் கோடு, செவ்வகம் மற்றும் வட்டம் ஆகியவற்றை வரைவதற்கான code-ஐப் பின்வருமாறு காணலாம்.
File: svg.htm
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset=”utf-8″ />
</head>
<body>
<h2>Examples for SVG</h2>
<svg xmlns=”http://www.w3.org/2000/svg”>
<line x1=”0″ y1=”0″ x2=”200″ y2=”100″style=”stroke:red;stroke-width:2″/>
</svg>
<svg xmlns=”http://www.w3.org/2000/svg”>
<rect id=”redrect” width=”300″ height=”100″ fill=”green” />
</svg>
<svg xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”50″ r=”50″ fill=”blue” />
</svg>
</body>
</html>
இங்கு svg tag-க்குள் உள்ள <line >tag ஒரு் கோட்டினை வரைவதற்கும், <circle> tag வட்டத்தை வரைவதற்கும், <rect> tag செவ்வகத்தை வரைவதற்கும் பயன்படுத்தப்பட்டுள்ளதைக் காணலாம். இவை மூன்றும் self-closing tags ஆகும்.
இவை மூன்றையும் ஒரே svg tag-க்குள் கொடுக்கும் போது அதன் வடிவங்கள் அனைத்தும் ஒன்றன் மீது ஒன்றாக வரையப்படுகின்றன. எனவே தான் ஒவ்வொரு வடிவத்துக்கும் ஒவ்வொரு முறை svg tag-ஐ பயன்படுத்தியுள்ளேன்.
ஒரு் கோடு வரைவதற்கு (x1,y1) (x2,y2) எனும் மதிப்புகள் தேவை. எனவே இத்தகைய மதிப்புகளை line tag-ன் attribute ஆகக் கொடுத்து ஒரு் கோடு வரையப்பட்டுள்ளது. மேலும் style attribute-ன் மதிப்பாக Stroke அதாவது கோட்டின் நிறம் மற்றும் அதன் அகலத்தின் மதிப்பு கொடுக்கப்பட்டுள்ளது.
அவ்வாறே ஒரு் செவ்வகம் வரைவதற்குத் தேவைப்படும் height மற்றும் width எனும் மதிப்புகள் அதன் attributes-ஆகக் கொடுக்கப்பட்டுள்ளதையும், fill எனும் மற்றொரு attribute மூலமாக செவ்வகத்திற்கு பச்சை நிறம் பூசப்பட்டுள்ளத்தையும் காணலாம்.
அடுத்தபடியாக வட்டம் வரைவதற்கு தேவைபட்ட x,y மற்றும் Radius (ஆரம்) எனும் மதிப்புகள் முறையே cx, cy, r எனும் attributes-க்கு மதிப்பாக கொடுத்து வட்டம் வரையப்பட்டுள்ளதையும், fill எனும் மற்றொரு attribute மூலமாக வட்டத்திற்கு நீல நிறம் பூசப்பட்டுள்ளத்தையும் காணலாம்.
