SVG: چیست، مفاهیم کلیدی و استفاده در توسعه وب

SVG چیست؟

SVG — یک فرمت گرافیک برداری مبتنی بر XML است که در سال 2001 به عنوان توصیه W3C منتشر شد. به عکس فرمت‌های راستری، SVG تصویر را از طریق پریمیتیوهای هندسی توصیف می‌کند: نقاط، خطوط، محیط‌ها و چند ضلعی‌ها. فایل SVG یک سند XML متنی عادی است که می‌توان آن را با ابزارهای استاندارد خواند، ویرایش و فشرده کرد.

معماری SVG چندین مفهوم کلیدی را شامل می‌شود. viewBox یک سیستم مختصات مجازی را تعیین می‌کند که مستقل از اندازه‌های فعلی عنصر است. به عنوان مثال، viewBox="0 0 100 100" یک شبکه مربعی 100×100 ایجاد می‌کند که در داخل آن همه مختصات ثابت هستند. هنگام تغییر عرض یا ارتفاع کانتینر، محتوا به طور نسبت مقیاس می‌شود.

به استناد به W3C SVG 2 Specification، نسخه مدرن SVG از گرادیان‌ها، ماسک‌ها، فیلترها، متن با موقعیت‌یابی دلخواه، تعامل از طریق JavaScript و انیمیشن از طریق CSS و SMIL پشتیبانی می‌کند. SVG به عنوان یک عنصر کامل HTML در DOM ادغام شده است که به شما امکان می‌دهد هر پریمیتیو گرافیک را به صورت برنامه‌ای مدیریت کنید.

در توسعه موبایل، SVG در iOS از طریق UIGraphicsImageRenderer و در Android از طریق VectorDrawable نیز استفاده می‌شود — هر دو فرمت توصیفات مشابه SVG را به راسترهای سخت‌افزاری شده در GPU تبدیل می‌کنند.

تاریخچه و تکامل فرمت SVG

SVG 1.0 در سال 2001، SVG 1.1 در سال 2003 توصیه W3C شد، SVG 2.0 از سال 2012 در حال توسعه است. نوآوری اصلی SVG 2 ادغام عمیق‌تر با CSS، پشتیبانی از compositing و blending modes و امکان استفاده از SVG در HTML بدون پیشوندهای namespace است.

با وجود اینکه SVG 2 هنوز به وضعیت Recommendation نرسیده است، مرورگرهای مدرن اکنون از بیشتر قسمت کارکردهای آن پشتیبانی می‌کنند. Chrome، Safari، Firefox و Edge تقریباً پشتیبانی کامل از SVG 1.1 و قسمت قابل توجهی از SVG 2 را دارند.

عناصر اصلی SVG

SVG یک مجموعه از عناصر برای توصیف گرافیک دو بعدی فراهم می‌کند. هر عنصر ویژگی‌هایی دارد که موقعیت، اندازه و ظاهر آن را تعیین می‌کنند. ویژگی‌ها می‌توانند به عنوان ویژگی‌های XML یا از طریق خواص CSS تعیین شوند.

• <rect> — مستطیل با ویژگی‌های x, y, width, height, rx, ry (گردکردن گوشه‌ها).
• <circle> — دایره با ویژگی‌های cx, cy (مرکز) و r (شعاع).
• <ellipse> — بیضی با ویژگی‌های cx, cy, rx, ry.
• <line> — پاره خط با ویژگی‌های x1, y1, x2, y2.
• <polyline> — خط شکسته با ویژگی points (لیست مختصات).
• <polygon> — چند ضلعی بسته با ویژگی points.
• <path> — کانتور دلخواه با ویژگی d (دستورات: M, L, C, Q, A, Z).
• <text> — عنصر متنی با ویژگی‌های x, y, font-size, font-family.

عنصر path — قدرتمندترین و انعطاف‌پذیرترین عنصر SVG است. ویژگی d شامل تسلسلی از دستورات است: M (moveTo)، L (lineTo)، C (cubic Bezier curve)، Q (quadratic Bezier curve)، A (arc)، Z (close path). هر دستور شکل مطلق یا نسبی دارد (حرف بزرگ یا کوچک).

SVG همچنین از گروه‌بندی عناصر از طریق <g> پشتیبانی می‌کند. گروه ویژگی‌های بصری (fill, stroke, transform) را به تمام عناصر فرزند ارث می‌دهد. این امکان اعمال یک سبک واحد بر کل مجموعه اشکال و مدیریت موقعیت آنها از طریق یک transform واحد را فراهم می‌کند.

SVG در مقابل گرافیک راستری: مقایسه فرمت‌ها

تفاوت اصلی بین SVG و فرمت‌های راستری (JPEG, PNG, WebP) — روش ذخیره اطلاعات است. راستر رنگ هر پیکسل را در یک شبکه با اندازه ثابت ذخیره می‌کند. SVG دستورات ریاضی برای بازسازی اشکال را ذخیره می‌کند. این تفاوت همه مزایا و معایب فرمت‌ها را تعیین می‌کند.

به استناد به HTTP Archive, 2025، 68% وب‌سایت‌ها از SVG برای آیکون‌ها، 34% برای تصویرسازی‌ها و 22% برای لوگوها استفاده می‌کنند. اندازه متوسط یک آیکون SVG در معدل 0.5–2 کیلوبایت است، در حالی که یک آیکون راستری با کیفیت مشابه در فرمت PNG ۵–۲۰ کیلوبایت است.

برای عکس‌ها و تصاویر راستری پیچیده، SVG مناسب نیست — اندازه توصیف XML از اندازه JPEG معادل بیشتر خواهد بود. محدوده کاربرد توصیه شده SVG: آیکون‌ها، لوگوها، تصویرسازی‌ها، نمودارها، نقشه‌ها، عناصر رابط با طراحی سازگار.

کی SVG را انتخاب کنیم و کی فرمت راستری

SVG — انتخاب بهینه برای عناصر رابطی است که باید در نمایشگرهای Retina و در هر مقیاس مرورگر واضح باشند. راستر — برای عکس‌ها، بافت‌های پیچیده و تصاویر با میلیون‌ها رنگ، جایی که توصیف برداری به طور نامناسبی پیچیده خواهد بود.

رویکرد ترکیبی — ترکیب SVG برای عناصر رابط و WebP/AVIF برای محتوای عکس — بهترین تعادل را بین کیفیت و عملکرد بارگیری صفحه ایجاد می‌کند.

Inline SVG و سبک‌دهی از طریق CSS

Inline SVG — جای‌سازی نشان‌گذاری SVG به طور مستقیم در سند HTML است، نه به صورت یک فایل جداگانه از طریق <img> یا background-image. مزیت inline SVG این است که عناصر SVG بخشی از DOM می‌شوند و می‌توانند از طریق CSS سبک‌دهی شوند، از طریق JavaScript مدیریت شوند و بدون درخواست‌های اضافی به سرور انیمیشن شوند.

به عکس <img src="icon.svg"> که SVG در shadow DOM جدا می‌شود، inline SVG رنگ‌ها و فونت‌های سند والد را ارث می‌برد. این امکان را فراهم می‌کند که مثلاً، رنگ یک آیکون را در حالت هوور از طریق شبه‌کلاس CSS :hover تغییر دهید بدون اینکه فایل جداگانه‌ای برای هر وضعیت بارگیری کنید.

به استناد به CSS-Tricks، inline SVG روش توصیه شده برای استفاده از آیکون‌ها در نرم‌افزارهای وب مدرن است. خواص CSS fill, stroke, stroke-width مستقیماً بر عناصر SVG اعمال می‌شوند. برای سفارشی‌سازی از طریق CSS، مهم است که در SVG اصلی fill و stroke به عنوان ویژگی‌های inline تعیین نشده باشند — در غیر این صورت CSS نمی‌تواند آنها را تجاوز کند.

• مزایا: سبک‌دهی از طریق CSS، مدیریت از طریق JS، بدون درخواست‌های HTTP، سازگاری viewBox.
• معایب: افزایش اندازه صفحه HTML، عدم امکان ذخیره سازی جداگانه از HTML.
• جایگزین: SVG-spriteها — ترکیب چند SVG در یک فایل و استفاده از <use href="#id">.

SVG-spriteها مشکل ذخیره سازی را حل می‌کنند: همه آیکون‌ها در یک فایل جمع آوری می‌شوند، مرورگر آن را یک بار بارگیری می‌کند، و آیکون‌های جداگانه از طریق <use> با اشاره به id عنصر مورد نیاز در داخل سپرایت متصل می‌شوند.

انیمیشن SVG: CSS و SMIL

انیمیشن CSS SVG — رایج‌ترین و کارآمدترین روش انیمیشن گرافیک برداری در مرورگر است. خواص CSS مانند transform, opacity و fill همانند عناصر HTML به عناصر SVG اعمال می‌شوند. برای انیمیشن در امتداد یک مسیر دلخواه، از خاصیت CSS offset-path استفاده می‌شود.

SMIL (Synchronized Multimedia Integration Language) — یک مکانیسم انیمیشن داخلی SVG است که مستقل از CSS عمل می‌کند. عناصر <animate>، <animateTransform> و <animateMotion> به شما امکان می‌دهند تمام ویژگی‌های SVG را بدون JavaScript و CSS انیمیت کنید. انیمیشن SMIL با سرعت فریم مرورگر سنکرون شده است.

به استناد به MDN Web Docs، SMIL در همه مرورگرهای مدرن پشتیبانی می‌شود، اما انیمیشن CSS پیش‌بینی‌پذیرتر و کارآمدتر تلقی می‌شود. سناریو اصلی برای SMIL — انیمیشن ویژگی‌هایی است که از طریق CSS در دسترس نیستند، مثلاً d (path) عنصر <path>.

JavaScript + requestAnimationFrame بیشترین کنترل را بر روی انیمیشن SVG فراهم می‌کند. توسعه‌دهندگان وب از کتابخانه‌های GSAP و Anime.js برای تسلسل‌های پیچیده انیمیشن با زمان‌بندی‌ها و توابع easing استفاده می‌کنند که پیاده‌سازی آنها از طریق CSS خالص دشوار است.

نمونه کدها: ایجاد گرافیک SVG

نمونه اول — یک آیکون خانه ساده با استفاده از عناصر پایه SVG. تمام اشکال rect و polyline هستند:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

نمونه دوم — انیمیشن چرخش لودر از طریق CSS. از <circle> با ویژگی stroke-dasharray برای ایجاد کانتور مقطع استفاده شده است:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

سومین نمونه — انیمیشن path از طریق کتابخانه GSAP برای رسم هموار کانتور. GSAP با ویژگی stroke-dashoffset کار می‌کند و اثر ظاهر شدن خط را ایجاد می‌کند:

// رسم مسیر با GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});