بردارهای گرافیکی (SVG)
«بردارهای گرافیکی (SVG)» یعنی نقاشیِ برداری داخل HTML. SVG با «XML» نوشته می شود؛ یعنی هر شکل یک تگ است. چون برداری است، با زوم خراب نمی شود. مثل لوگویی که هرقدر بزرگ کنی، شارپ می ماند.
SVG چیست؟
SVG ظرفی برای شکل های برداری است. هر جزء یک عنصر XML است. رویدادها و سبک ها را هم می پذیرد. همه مرورگرهای مهم پشتیبانی می کنند.
دایره SVG
دایره با تگ <circle> ساخته می شود. مرکز، شعاع، خط دور و رنگ را تعیین کن.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>
مستطیل ساده
با <rect> می توانی x و y و اندازه را مشخص کنی. خط دور و رنگ هم ساده است.
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue"></rect>
</svg>
گوشه های گرد و شفافیت
برای گوشه گرد از rx و ry استفاده کن. با opacity شفافیت را تنظیم کن.
<svg width="300" height="180">
<rect x="10" y="10" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>
</svg>
ستاره با چندضلعی
با <polygon> نقاط را بده و شکل بساز. ترتیب نقاط مهم است.
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></polygon>
</svg>
گرادیان و متن
گرادیان را در <defs> تعریف کن. سپس با url(#id) استفاده کن. متن را با <text> بنویس.
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="red"></stop>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>
تفاوت SVG و Canvas
SVG بر پایه XML است و هر شکل، شیء مستقل است. رویداد می گیرد و دوباره پردازی می شود.
Canvas پیکسلی است و بعد از کشیدن، اشیاء فراموش می شوند. برای تغییر، باید دوباره کشید.
تمرین سه مرحله ای: بردارهای گرافیکی
- یک دایره ساده با رنگ دلخواه بکش.
- یک مستطیل با گوشه گرد اضافه کن.
- گرادیان بساز و روی بیضی اعمال کن.
نکته: اندازه بوم را متناسب با شکل ها انتخاب کن.
جمع بندی سریع
- بردارهای گرافیکی با زوم خراب نمی شوند.
- هر شکل یک تگ XML است.
- رویدادها و سبک ها را پشتیبانی می کند.
- برای بازی های پیکسلی، Canvas مناسب تر است.
مقایسه عملی را در صفحه بوم نقاشی (Canvas) ببین. همچنین صفحه بردارهای گرافیکی (SVG) را به عنوان مرجع نگه دار.