عنصران للرسوميات لكل منهما طبيعة مختلفة:
<canvas>: • سطح رسم bitmap (pixel-based) • يُرسم عليه بـ JavaScript (Canvas API أو WebGL) • مناسب لـ: الألعاب، الرسوميات المتحركة، معالجة الصور • الصور غير قابلة للبحث بـ CSS • يحتاج JavaScript لكل شيء
<svg> (Scalable Vector Graphics): • رسوميات متجهة — لا تفقد جودتها عند التكبير • يمكن كتابتها مباشرةً في HTML • قابلة للتنسيق بـ CSS والتفاعل بـ JavaScript • مناسب لـ: الأيقونات، الشعارات، الرسوم البيانية، الخرائط • أفضل لـ SEO من canvas
متى تستخدم كلاً منهما؟ • Pixel arts, games, video effects → canvas • Icons, logos, charts, maps → SVG',
| 1 | <!-- canvas: سطح رسم --> |
| 2 | <canvas id="myCanvas" width="400" height="300" |
| 3 | role="img" aria-label="رسم بياني دائري"> |
| 4 | متصفحك لا يدعم canvas. |
| 5 | </canvas> |
| 6 | |
| 7 | <script> |
| 8 | const canvas = document.getElementById('myCanvas'); |
| 9 | const ctx = canvas.getContext('2d'); |
| 10 | |
| 11 | // رسم مستطيل |
| 12 | ctx.fillStyle = '#e34c26'; |
| 13 | ctx.fillRect(50, 50, 200, 100); |
| 14 | |
| 15 | // رسم نص |
| 16 | ctx.fillStyle = 'white'; |
| 17 | ctx.font = '20px Arial'; |
| 18 | ctx.fillText('مرحباً HTML!', 70, 110); |
| 19 | </script> |
| 20 | |
| 21 | <!-- SVG مضمّن مباشرة في HTML --> |
| 22 | <svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> |
| 23 | <circle cx="50" cy="50" r="40" fill="#e34c26" /> |
| 24 | <text x="50" y="55" text-anchor="middle" fill="white" font-size="12">HTML</text> |
| 25 | </svg> |
| 26 | |
| 27 | <!-- SVG كأيقونة --> |
| 28 | <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"> |
| 29 | <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> |
| 30 | </svg> |
مثال 1: SVG أيقونات احترافية
| 1 | <!-- أيقونة بحث بـ SVG --> |
| 2 | <button type="button" aria-label="بحث"> |
| 3 | <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" |
| 4 | fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="11" cy="11" r="8"/> |
| 6 | <line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | |
| 10 | <!-- رسم دائري بـ SVG (Pie Chart بسيط) --> |
| 11 | <svg viewBox="0 0 36 36" width="120" height="120"> |
| 12 | <!-- الدائرة الخلفية --> |
| 13 | <circle cx="18" cy="18" r="15.91" fill="none" |
| 14 | stroke="#eee" stroke-width="3"/> |
| 15 | <!-- التقدم: 75% --> |
| 16 | <circle cx="18" cy="18" r="15.91" fill="none" |
| 17 | stroke="#e34c26" stroke-width="3" |
| 18 | stroke-dasharray="75 25" |
| 19 | stroke-dashoffset="25" |
| 20 | transform="rotate(-90 18 18)"/> |
| 21 | <text x="18" y="20" text-anchor="middle" |
| 22 | font-size="6" fill="#333">75%</text> |
| 23 | </svg> |
| 24 | |
| 25 | <!-- شعار بـ SVG --> |
| 26 | <svg xmlns="http://www.w3.org/2000/svg" |
| 27 | viewBox="0 0 100 30" width="150" height="45" |
| 28 | role="img" aria-label="شعار نوفيل"> |
| 29 | <rect width="30" height="30" rx="5" fill="#e34c26"/> |
| 30 | <text x="15" y="20" text-anchor="middle" |
| 31 | fill="white" font-weight="bold" font-size="14">N</text> |
| 32 | <text x="55" y="22" fill="#333" |
| 33 | font-size="16" font-weight="bold">Nouvil</text> |
| 34 | </svg> |