HTML SVG Graphics

🔹 SVG چیست؟

SVG (Scalable Vector Graphics) یک فرمت مبتنی بر XML برای رسم گرافیک برداری (vector graphics) در وب است.
برخلاف تصاویر معمولی (PNG, JPG) که پیکسلی هستند، SVG با بردارها (خطوط و اشکال ریاضی) ساخته می‌شود و بدون افت کیفیت بزرگ و کوچک می‌شود.

🔹 ویژگی‌های SVG

  • 📌 کیفیت نامحدود (Scaling بدون افت کیفیت)

  • 📌 قابلیت استایل‌دهی با CSS

  • 📌 قابل دستکاری و انیمیشن با JavaScript

  • 📌 مناسب برای آیکون‌ها، نمودارها و اشکال هندسی

🔹 سینتکس پایه

✏️ اشکال پایه در SVG

1. رسم دایره

  • cx و cy: مرکز دایره

  • r: شعاع

2. رسم مستطیل

3. رسم خط

4. متن

5. چندضلعی (Polygon)

🔹 مقایسه Canvas و SVG

ویژگیCanvasSVG
نوعپیکسلی (bitmap)برداری (vector)
کیفیت در بزرگ‌نماییافت کیفیت داردبدون افت کیفیت
دستکاری DOMسخت‌ترراحت (چون XML است)
سرعت برای گرافیک پیچیدهسریع‌ترکندتر
کاربردهاانیمیشن‌ها، بازی‌ها، نقشه‌هاآیکون‌ها، نمودارها، دیاگرام‌ها

✅ جمع‌بندی:

  • SVG برای گرافیک برداری، آیکون‌ها و طرح‌های ثابت عالی است.

  • Canvas برای انیمیشن‌ها و گرافیک‌های پیکسلی سریع‌تر است.