Svg என்பது
scalable vector graphics என்பதைக் குறிக்கும்.
இது வெக்டார்
அடிப்ப்டையிலான கிராபிக்ஸை xml ஃபார்மட்டில் குறிப்பிடப்படுகின்றது.
Svg ஆனது
முன்கூட்டியே டிஃபைன் செய்யப்பட்ட பின்வரும் வடிவங்கள் உருவாக்க பயன்படுகின்றது.
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
Svg rectangle.
சான்று
நிரல்
<!DOCTYPE html>
<html>
<body>
<svg width="400"
height="110">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
வெளியீடு:
Width, height ஆகிய பண்புகள் ரெக்ட் எலிமெண்டின் அகலம், உயரத்தைக்
குறிக்கின்றது.
Style
ஆட்ரிபியூட் ஆனது ரெக்டாங்கிளின் css பண்பைக் குறிப்பிட பயன்படுகின்றது.
Css fill
பிராப்பர்ட்டி ஆனது ரெக்டாங்கிளின் ஃபில் கலரை குறிப்பிடப் பயன்படுகின்றது.
Css stroke
width ஆனது ரெக்டாங்கிளின் பார்டர் அகலத்தைக் குறிப்பிடப் பயன்படுகின்றது.
Css stroke
பண்பானது ரெக்டாங்கிளின் பார்டர் நிறத்தைக் குறிப்பிடப் பயன்படுகின்றது.
சான்று-2
<!DOCTYPE
html>
<html>
<body>
<svg
width="400" height="180">
<rect x="50" y="20"
width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
/>
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
மேலே உள்ள
நிரலில் x ஆட்ரிபியூட் ஆனது இடதுபுறத்தில்
இருந்து ரெக்டாங்கிள் உள்ள தொலைவைக் குறிக்கின்றது.
Y ஆட்ரிபியூட்
ஆனது மேலே டாப்பிள் இருந்து ரெக்டாங்கிள் உள்ள தொலைவைக் குறிக்கின்றது.
Css fill-opacity
ஆனது ஃபில் கலரின் ஒபாசிட்டியைக் குறிப்பிட பயன்படுகின்றது.
Css stroke-opacity
ஆனது பார்டரின் ஒபாசிட்டியைக் குறிப்பிடப் பயன்படுகின்றது.
சான்று-3
<!DOCTYPE
html>
<html>
<body>
<svg
width="400" height="180">
<rect x="50" y="20"
rx="20" ry="20" width="150"
height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
இதில்
rx, ry பண்புகள் ரெக்டாங்கிளின் கார்னர் வட்டத்தைக் குறிக்கின்றது.
Circle.
இது வட்ட
வடிவ உருவங்களை உருவாக்கப் பயன்படுகின்றது.
சான்று
நிரல்.
<!DOCTYPE
html>
<html>
<body>
<svg
height="100" width="100">
<circle cx="50"
cy="50" r="40" stroke="black"
stroke-width="3" fill="red" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
Cx,
cy ஆகியவை வட்டத்தின் மையத்தின் x, y கோ ஆர்டினேட்டைக் குறிக்கின்றது.
r ஆனது
வட்டத்தின் ஆரத்தைக்(radius) குறிக்கின்றது.
Ellipse-நீள்வட்டம்.
இது நீள்
வட்டத்தை உருவாக்க பயன்படுகின்றது.
சான்று
நிரல்.
<!DOCTYPE
html>
<html>
<body>
<svg
height="140" width="500">
<ellipse cx="200"
cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
இதில்
cx,cy ஆனது நீள்வட்டத்தின் மைய x,y கோ ஆர்டினேட்களைக் குறிப்பிடப் பயன்படுகின்றது.
rx ஆனது
ஹரிசாண்டல் ரேடியசையும் , ry ஆனது வெர்டிகள் ரேடியசையும் குறிக்கின்றது.
Line-கோடு.
இது கோடுகளை உருவாக்க பயன்படுகின்றது.
சான்று
நிரல்.
<!DOCTYPE html>
<html>
<body>
<svg
height="210" width="500">
<line x1="0" y1="0"
x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
இதில் x1, y1
ஆனது கோடு ஆரம்ப புள்ளியையும் x2,y2 ஆனது
கோடு முடிவு புள்ளியையும் குறிக்கின்றது
Polygon.
இது குறைந்த
பட்சம் மூன்று பக்க்ங்களுடைய வடிவங்களை உருவாக்க பயன்படுகின்றது.
சான்று
நிரல்.
<!DOCTYPE
html>
<html>
<body>
<svg
height="210" width="500">
<polygon points="200,10 250,190
160,210" style="fill:lime;stroke:purple;stroke-width:1" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
வெளியீடு:
இதில்
points ஆட்ரிபியூட் ஆனது ஒவ்வொரு கார்னரின் x,y கொ ஆர்டினேட்களைக் குறிப்பிடப் பயன்படுகின்றது.
-இவ்வாறாக
நாம் html 5 –ல் வடிவங்களை உருவாக்கலாம்.
நன்றி.
முத்து
கார்த்திகேயன்,மதுரை.
