SVG چیست؟ راهنمای فرمت گرافیک برداری

SVG فرمتی تصویری است که به‌جای پیکسل از دستورهای رسم ساخته شده است. وقتی یک لوگو، آیکون یا نمودار به صورت SVG ذخیره می‌شود، فایل فرمان‌هایی مانند «از این نقطه تا آن نقطه یک منحنی بکش و آن را با این رنگ پر کن» را در خود دارد. به همین دلیل SVG در هر اندازه‌ای واضح می‌ماند، اغلب بسیار کم‌حجم است و می‌توان آن را در یک ویرایشگر متن باز و ویرایش کرد. این مقاله جایگاه SVG در میان استانداردهای W3C، ساختار فایل، پشتیبانی مرورگرها و نرم‌افزارها، خطرهای امنیتی و روش تبدیل میان SVG و PNG یا JPG را بررسی می‌کند.

SVG چیست؟

SVG (Scalable Vector Graphics) استانداردی از W3C و مبتنی بر XML برای توصیف گرافیک‌های برداری دوبعدی است. پسوند آن .svg و نوع MIME آن image/svg+xml است. گونهٔ فشرده‌شده با gzip از پسوند .svgz استفاده می‌کند.

فرمت‌های شطرنجی (JPG، PNG، WebP) تصویر را به صورت شبکه‌ای ثابت از پیکسل‌ها ذخیره می‌کنند؛ بزرگش کنید و پیکسل‌ها دیده می‌شوند. SVG شکل‌ها را به‌صورت ریاضی توصیف می‌کند و مرورگر یا برنامه آن‌ها را با هر وضوحی که صفحه دارد دوباره رسم می‌کند. راهنمای فرمت‌های تصویر MDN، SVG را انتخابی ایده‌آل برای تصاویری می‌داند که می‌توان آن‌ها را با فرمان‌های رسم نمایش داد، به‌ویژه وقتی اندازهٔ نمایش نامعلوم یا متغیر است، و یادآوری می‌کند که به‌طور کلی برای عکس‌ها مفید نیست.

تاریخچه: SVG 1.0، 1.1 و SVG 2

• 4 سپتامبر 2001: SVG 1.0 به‌عنوان Recommendation در W3C منتشر شد.
• 14 ژانویهٔ 2003: SVG 1.1 به Recommendation تبدیل شد. نسخهٔ 1.1 زبان را به ماژول‌ها تقسیم کرد و تعریف زیرمجموعه‌هایی مانند پروفایل‌های موبایل را آسان‌تر ساخت.
• 16 اوت 2011: ویرایش دوم SVG 1.1 منتشر شد. این همان نسخهٔ پایداری است که مرورگرها امروز بر آن بنا شده‌اند.
• SVG 2: طبق تاریخچهٔ انتشار W3C، پیش‌نویس‌های کاری از 2012 منتشر شدند و نخستین Candidate Recommendation Snapshot در 15 سپتامبر 2016 منتشر شد. آخرین snapshot تاریخ 6 اکتبر 2026 را دارد؛ سند هنوز در مرحلهٔ Candidate Recommendation است.

SVG 2 بر پایهٔ ویرایش دوم 1.1 ساخته شده و هدفش یکپارچگی بهتر با HTML و CSS است. برخی موضوعات مانند فیلترها، ماسک‌گذاری و قلم‌ها به ماژول‌های جداگانهٔ CSS و FX منتقل شدند. در عمل مرورگرها بخش‌هایی از SVG 2 را پیاده کرده‌اند، پس فرض نکنید هر قابلیتی همه‌جا کار می‌کند.

ساختار فایل SVG

یک فایل سادهٔ SVG چنین است:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

دستگاه مختصات: viewBox، width و height

viewBox دستگاه مختصات درونی نقاشی را تعریف می‌کند (اینجا 0 تا 100). width و height تعیین می‌کنند نقاشی چقدر از صفحه را بگیرد. SVG دارای viewBox به هر اندازه‌ای که در CSS به آن بدهید متناسب بزرگ و کوچک می‌شود. فایل‌های بدون viewBox ممکن است هنگام تغییر اندازه بریده شوند؛ یکی از رایج‌ترین اشتباه‌ها در لوگوها.

عناصر اصلی

• شکل‌ها: rect، circle، ellipse، line، polyline، polygon و path که می‌تواند هر چیزی را رسم کند.
• متن: text و tspan. متن قابل انتخاب و جست‌وجو می‌ماند، اما اگر قلم در دستگاه بیننده نباشد قلم جایگزین به کار می‌رود.
• گروه‌بندی و استفادهٔ دوباره: g، defs، symbol، use. مجموعه‌های آیکون اغلب به صورت عناصر symbol در یک فایل جمع می‌شوند.
• رنگ‌آمیزی: رنگ‌های یکدست، گرادیان‌های خطی و شعاعی، الگوها، مسیرهای برش (clipping path)، ماسک‌ها و فیلترها (محوسازی، سایه).
• سبک و پویانمایی: CSS می‌تواند به SVG سبک بدهد؛ پویانمایی‌های CSS و عناصر پویانمایی SMIL حرکت اضافه می‌کنند.
• محتوای جاسازی‌شده: image برای تصاویر شطرنجی، foreignObject برای HTML و script برای JavaScript.

رنگ، شفافیت، لایه‌ها و صفحه‌ها

شفافیت در SVG ذاتی است: هر چیزی که رسم نشده خالی است و opacity و fill-opacity نیمه‌شفافیت را تعریف می‌کنند. لایه‌ها با گروه‌های g نمایش داده می‌شوند؛ Inkscape و Illustrator لایه‌هایشان را همین‌طور ذخیره می‌کنند. رنگ‌ها به‌طور پیش‌فرض sRGB هستند و به معنای معمول محدودیت عمق بیت وجود ندارد، چون رنگ‌ها به صورت عدد نوشته می‌شوند. SVG فرمت سند چندصفحه‌ای نیست؛ برای نقاشی‌های چندصفحه‌ای PDF مناسب‌تر است.

پشتیبانی در مرورگرها، سیستم‌ها و نرم‌افزارها

طبق MDN، Chrome، Edge، Firefox، Opera و Safari همگی از SVG پشتیبانی می‌کنند. می‌توانید آن را از طریق <img>، به‌عنوان background-image در CSS، به صورت درون‌خطی در HTML یا با <object> و <iframe> به کار ببرید. ابزارهای برداری مانند Inkscape، Adobe Illustrator، Affinity Designer و Figma فایل SVG را می‌خوانند و می‌نویسند و نسخه‌های فعلی Microsoft Office اجازهٔ درج گرافیک‌های SVG را می‌دهند.

در جاهای دیگر پشتیبانی ضعیف است: بسیاری از شبکه‌های اجتماعی، برنامه‌های ایمیل، پیام‌رسان‌ها و فرم‌های بارگذاری SVG را نمی‌پذیرند یا پیش‌نمایشی نشان نمی‌دهند. بخشی از دلیلش خطر امنیتی‌ای است که در ادامه توضیح داده می‌شود.

امنیت: با SVG مثل یک سند رفتار کنید

SVG یک سند XML است و می‌تواند عنصر script، ویژگی‌های رویداد (مانند onload) و ارجاع‌های بیرونی داشته باشد. صفحهٔ «SVG as an image» در MDN توضیح می‌دهد که وقتی SVG از طریق <img> یا پس‌زمینهٔ CSS به کار می‌رود، مرورگرها JavaScript را غیرفعال می‌کنند و منابع بیرونی مانند تصاویر یا شیوه‌نامه‌ها را بارگذاری نمی‌کنند. این محدودیت‌ها وقتی فایل مستقیم باز شود یا با <iframe>، <object> یا <embed> جاسازی شود، اعمال نمی‌شوند.

پیامد عملی: اگر سایتی اجازه دهد کاربران فایل SVG بارگذاری کنند و آن‌ها را مستقیم از دامنهٔ خودش ارائه دهد، اسکریپت جاسازی‌شده در فایل می‌تواند در بستر همان سایت اجرا شود (XSS ذخیره‌شده). راه‌های معمول کاهش خطر:

• SVG بارگذاری‌شده را از یک پاک‌ساز (sanitizer) عبور دهید که script، ویژگی‌های رویداد، foreignObject و پیوندهای بیرونی را حذف کند.
• فایل‌های کاربران را از یک دامنهٔ جداگانه، با Content-Security-Policy سخت‌گیرانه یا به صورت دانلود (Content-Disposition: attachment) ارائه دهید.
• اگر به نسخهٔ برداری نیاز ندارید، SVG بارگذاری‌شده را روی سرور به PNG تبدیل کنید و فقط نسخهٔ شطرنجی را منتشر کنید.

کاربردهای معمول

• لوگو و دارایی‌های برند: یک فایل از کارت ویزیت تا بیلبورد واضح می‌ماند.
• آیکون‌های رابط کاربری: با CSS رنگ‌پذیرند و روی صفحه‌های پرتراکم هرگز مات نمی‌شوند.
• نمودار، نقشه و دیاگرام: کتابخانه‌هایی مانند D3.js داده‌ها را مستقیم به صورت عناصر SVG رسم می‌کنند.
• فاوآیکون: مرورگرهای فعلی فاوآیکون SVG را از طریق <link rel="icon" type="image/svg+xml"> می‌پذیرند.
• برش و چاپ: دستگاه‌های برش لیزری، کاترهای وینیل و دستگاه‌های گلدوزی با مسیرهای برداری کار می‌کنند.

نقاط قوت و ضعف

مشکلات رایج و راه‌حل آن‌ها

یک سایت یا اپلیکیشن SVG را نمی‌پذیرد

ساده‌ترین راه‌حل یک نسخهٔ PNG است. مبدل SVG به PNG ما نقاشی را در مرورگر شما و با عرض پیکسلی دلخواهتان به یک PNG شفاف رندر می‌کند. فایل شما آپلود نمی‌شود و هرگز از دستگاه شما خارج نمی‌شود.

متن با قلم دیگری نمایش داده می‌شود

SVG به‌طور پیش‌فرض قلم‌ها را جاسازی نمی‌کند؛ اگر سیستم بیننده قلم را نداشته باشد، قلم جایگزین به کار می‌رود. در بستر تصویر، قلم‌های بیرونی هم بارگذاری نمی‌شوند. در ابزار طراحی خود متن را به خطوط کناری (outline) تبدیل کنید یا قلم را جاسازی کنید.

SVG در صفحه اندازهٔ اشتباه دارد یا بریده شده است

بدون viewBox یا با width/height ثابت، تغییر مقیاس آن‌طور که انتظار می‌رود رفتار نمی‌کند. به عنصر ریشهٔ svg یک viewBox بدهید که کل نقاشی را بپوشاند و اندازه را در CSS تعیین کنید.

فایل از انتظار بزرگ‌تر است

ابزارهای طراحی فرادادهٔ ویرایشگر، رقم‌های اعشاری بیش از حد و لایه‌های پنهان را در SVG می‌نویسند. یک بهینه‌ساز مانند SVGO این‌ها را حذف می‌کند. فشرده‌سازی Gzip یا Brotli روی سرور SVG متنی را باز هم کوچک‌تر می‌کند.

لوگوی PNG خود را به صورت SVG لازم دارم

تصویر شطرنجی را نمی‌توان واقعاً به برداری «تبدیل» کرد؛ کاری که ابزارها انجام می‌دهند ردیابی (tracing) است: شکل‌ها تشخیص داده می‌شوند و به صورت خطوط کناری دوباره رسم می‌شوند. ابزارهای PNG به SVG و JPG به SVG ما با 2 تا 8 رنگ ردیابی می‌کنند. نتیجه برای لوگوها و نقاشی‌های ساده خوب و برای عکس‌ها زمخت است. در این ابزارها فایل از طریق اتصالی امن روی سرورهای ما آپلود می‌شود، همان‌جا ردیابی می‌شود و حداکثر ظرف 30 دقیقه حذف می‌شود.

نکته‌های تبدیل

• اندازهٔ هدف را بدانید: هنگام رندر SVG به PNG، بزرگ‌ترین اندازه‌ای را که تصویر در آن نمایش داده می‌شود انتخاب کنید و برای صفحه‌های پرتراکم آن را دو برابر کنید. در ابزار ما بلندترین ضلع می‌تواند تا 4096 پیکسل باشد؛ اگر عرض را خالی بگذارید، نقاشی‌های کوچک طوری بزرگ می‌شوند که بلندترین ضلع 1024 پیکسل شود.
• JPG برای محتوای عکسی: اگر SVG یک عکس را جاسازی کرده و به شفافیت نیاز ندارید، JPG یا WebP از PNG کوچک‌ترند؛ می‌توانید PNG را بعداً در مبدل تصویر تبدیل کنید.
• فاوآیکون: اگر لوگوی شما SVG است، سازندهٔ فاوآیکون آن را می‌پذیرد و icon.svg را به بسته اضافه می‌کند.
• منبع تمیز برای ردیابی: هنگام ساختن SVG از PNG، با تصویری پروضوح، با رنگ‌های تخت و بدون نویز شروع کنید.

پرسش‌های متداول

تفاوت SVG و PNG چیست؟

PNG تعداد ثابتی پیکسل است و با بزرگ شدن مات می‌شود. SVG شکل‌ها را توصیف می‌کند و در هر اندازه‌ای دوباره واضح رسم می‌شود. SVG برای لوگوها و آیکون‌ها مناسب است؛ PNG یا JPG برای عکس‌ها و اسکرین‌شات‌ها.

آیا فایل SVG می‌تواند ویروس داشته باشد؟

SVG برنامهٔ اجرایی نیست، اما می‌تواند JavaScript را در خود جاسازی کند. وقتی SVG به‌عنوان تصویر (<img>) نمایش داده می‌شود اسکریپت‌ها اجرا نمی‌شوند، اما وقتی فایل مستقیم در مرورگر باز شود ممکن است اجرا شوند. SVGهای ناشناس را به‌جای باز کردن مستقیم، در یک نمایشگر بررسی کنید یا به PNG تبدیلشان کنید.

آیا می‌توانم SVG را در Word یا PowerPoint درج کنم؟

نسخه‌های فعلی Microsoft Office از درج SVG پشتیبانی می‌کنند. برای نسخه‌های قدیمی‌تر یا اگر قرار است فایل را با برنامه‌های دیگر به اشتراک بگذارید، یک نسخهٔ PNG امن‌تر است.

آیا تبدیل SVG به PNG کیفیت را کم می‌کند؟

PNG بدون اتلاف است، اما نقاشی در یک اندازهٔ پیکسلی ثابت می‌شود. عرض کافی بزرگی انتخاب کنید تا هیچ افتی حس نکنید؛ بزرگ کردن PNG در آینده آن را مات می‌کند.

آیا SVG از پویانمایی پشتیبانی می‌کند؟

بله. حرکت می‌تواند از پویانمایی‌های CSS، عناصر پویانمایی SMIL و JavaScript بیاید. تبدیل به PNG فقط یک فریم به شما می‌دهد.

منابع

• W3C: مشخصهٔ Scalable Vector Graphics (SVG) 1.1، ویرایش دوم
• W3C: مشخصهٔ Scalable Vector Graphics (SVG) 1.0
• W3C: مشخصهٔ Scalable Vector Graphics (SVG) 2
• W3C: تاریخچهٔ انتشار SVG 2
• MDN: SVG به‌عنوان تصویر
• MDN: راهنمای انواع و فرمت‌های فایل تصویر