جلسه چهل و پنجم: آموزش کامل تگ svg در HTML

آموزش‌ها آموزش طراحی سایت فرانت‌اند آموزش HTML
به‌روزرسانی‌شده در 17 مرداد 1404

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ svg رو مثل یه حرفه‌ای یاد بگیری! این تگ یکی از قدرتمندترین ابزارهای HTML و گرافیک وب هست که برای ایجاد گرافیک‌های برداری مقیاس‌پذیر به کار می‌ره. برخلاف فرمت‌هایی مثل PNG یا JPEG، تگ <svg> با فرمول‌های ریاضی کار می‌کنه و تصاویر همیشه واضح و شفاف باقی می‌مونن، حتی در اندازه‌های بزرگ یا کوچک. تو این مقاله، از صفر تا صد تگ <svg> رو با مثال‌های باحال، نکات خفن، و ترفندهای سئو و انیمیشن می‌خونی تا بتونی گرافیک‌های وب‌سایتت رو بترکونی. آماده‌ای؟ بزن بریم!

آنچه در این مقاله می‌خوانید:

🏷️ تگ `<svg>` چیه و چرا مهمه؟

تگ <svg> یه تگ معنایی و مخفف Scalable Vector Graphics تو HTML هست، یعنی «گرافیک برداری مقیاس‌پذیر». برخلاف فرمت‌هایی مثل PNG و JPG که بر پایه پیکسل کار می‌کنن و با بزرگ کردن کیفیتشون میاد پایین، SVG یه زبان مبتنی بر XML برای ترسیم اشکال، خطوط، متن و گرافیک‌های برداریه که بدون افت کیفیت می‌تونن در هر ابعادی نمایش داده بشن.

✏️ برداری بودن یعنی:

تصویر از پیکسل تشکیل نشده،
بلکه از نقاط و مسیرهای ریاضی ساخته شده،
بنابراین بدون افت کیفیت، هرچقدر خواستی بزرگش کن!

✏️ چرا مهمه؟ چون

مقیاس‌پذیری بی‌نهایت: تصاویر SVG بدون افت کیفیت در هر اندازه‌ای نمایش داده می‌شن، از آیکون‌های کوچک تا بنرهای بزرگ.
حجم کم: نسبت به تصاویر رستری، SVG‌ها حجم کمتری دارن و سرعت بارگذاری سایتت رو بالا می‌برن.
انعطاف‌پذیری: می‌تونی با CSS، JavaScript، و حتی انیمیشن‌های داخلی، گرافیک‌ها رو پویا کنی.
سئو و دسترسی‌پذیری: می‌تونی متون و توضیحات داخل SVG رو برای موتورهای جستجو بهینه کنی.
پشتیبانی مرورگرها: تقریباً همه مرورگرهای مدرن <svg> رو پشتیبانی می‌کنن.

مثلاً، اگه می‌خوای یه لوگو یا آیکون طراحی کنی، با <svg> می‌تونی یه گرافیک واضح و قابل ویرایش بسازی که همیشه عالی به نظر بیاد.

🧱 ساختار تگ svg

تگ <svg> یه تگ جفتیه و ساختار پایه‌ای‌ش اینه:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- اشکال و گرافیک‌ها داخل این تگ قرار می‌گیرند -->
</svg>

width و height: ابعاد گرافیک رو مشخص می‌کنن.
xmlns: فضای نام SVG رو تعریف می‌کنه (همیشه باید “http://www.w3.org/2000/svg” باشه).
محتوای داخل: اشکال، مسیرها، و متن‌هایی که می‌خوای نمایش بدی.

با این ساختار، می‌تونی گرافیک‌های پیچیده رو به‌راحتی بسازی!

🧩 اتریبیوت‌ها و اشکال گرافیکی

تگ <svg> چند اتریبیوت و عنصر کلیدی داره:

width و height: برای تعیین ابعاد گرافیک.
viewBox: برای مقیاس‌بندی و موقعیت‌دهی دقیق.
preserveAspectRatio: برای کنترل نحوه نمایش در صورت تغییر ابعاد.
اشکال پایه: می‌تونی با تگ‌های داخل <svg> مثل <circle>, <rect>, <line>, و <path> اشکال بسازی.

🏷️ پرکاربردترین تگ‌های داخلی SVG:

تگ	کاربرد
`<circle>`	دایره
`<rect>`	مستطیل
`<line>`	خط
`<ellipse>`	بیضی
`<polygon>`	چندضلعی
`<polyline>`	خط شکسته
`<path>`	مسیرهای دلخواه
`<text>`	نوشتن متن

💡 کاربردهای تگ svg

تگ <svg> برای این موارد غوغا می‌کنه:

آیکون‌ها و لوگوها قابل تغییر با CSS
انیمیشن‌های سبک گرافیکی
لوگوهای واکنش‌گرا
نمودارها، دیاگرام‌ها و گراف‌ها
رابط‌های کاربری سفارشی‌شده

با اینکه SVG در ظاهر ساده‌ست، ولی در واقع یک زبان مستقل با قدرتیه که با HTML، CSS و JS به‌خوبی ترکیب می‌شه.

✨ استفاده از اشکال ساده در SVG

یکی از ویژگی‌های جالب تگ <svg>، قابلیت رسم اشکال مختلفه. به‌عنوان مثال، برای رسم یک دایره، می‌تونی از کدهای زیر استفاده کنی:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="#83b735" />
</svg>

circle: برای رسم دایره.
cx و cy: مختصات مرکز دایره.
r: شعاع دایره.
stroke: رنگ لبه دایره.
fill: رنگ داخلی دایره.

نتیجه کد بالا به صورت زیر نمایش داده می‌شه.

✨ استفاده از مسیرهای پیچیده (Path)

یکی از امکانات قدرتمند در SVG‌ها، توانایی رسم مسیرهای پیچیده با استفاده از دستور path هست. این مسیرها می‌تونن اشکال بسیار پیچیده و دقیق ایجاد کنن. برای مثال:

<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" stroke-width="2" fill="transparent" />
</svg>

تو این مثال، از دستور C برای رسم یک منحنی بی‌نهایت صاف استفاده شده.

نتیجه کد بالا به صورت زیر نمایش داده می‌شه.

🧩 اتریبیوت‌های تگ path

ویژگی	توضیح
`fill`	رنگ داخلی شکل
`stroke`	رنگ خط دور شکل
`stroke-width`	ضخامت خط دور
`opacity`	شفافیت
`transform`	چرخش، مقیاس‌دهی، انتقال

✅ مثال:

<rect width="100" height="100" fill="orange" transform="rotate(45)" />

🆚 تفاوت تگ svg با فرمت های تصویری دیگر مانند jpg

ویژگی‌ها	SVG (برداری)	PNG/JPG (پیکسلی)
کیفیت در بزرگ‌نمایی	حفظ می‌شه	افت می‌کنه
حجم فایل	کم تا متوسط	متوسط تا زیاد
استایل‌دهی با CSS	بله	فقط به تگ `<img>`
تعامل‌پذیری	بالا (با JS و CSS)	پایین
انیمیشن‌پذیری	داره	نداره

💡 نحوه استفاده از svg

به دو روش استفاده می‌شه: یکی قرار دادن مستقیم تگ SVG تو HTML و دیگری استفاده از تگ img برای فراخوانی فایل SVG خارجی. هر روش مزایا و معایب خودش رو داره. در ادامه هر دو روش را توضیح می‌دم:

1. استفاده مستقیم از کد SVG در HTML

تو این روش، کد SVG به‌طور مستقیم در داخل HTML نوشته می‌شه.

✅ مثال:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#83b735" />
</svg>

✨ مزایا:

انعطاف‌پذیری بالا: می‌تونی اجزای SVG رو با CSS یا JavaScript کنترل کنی (مانند تغییر رنگ، اندازه یا انیمیشن‌ها).
عدم نیاز به درخواست اضافی به سرور: چون کد مستقیماً در صفحه قرار داره، نیازی به بارگذاری فایل جداگانه نیست.
سازگاری با انیمیشن‌ها: می‌تونی از انیمیشن‌های CSS برای ایجاد جلوه‌های متحرک استفاده کنی.

⚠️ معایب:

اگر فایل SVG بزرگ باشه، کد HTML شما طولانی می‌شه و مدیریت اون دشوارتر خواهد بود.

2. استفاده از تگ img برای بارگذاری فایل SVG

در این روش، فایل SVG به‌عنوان یک تصویر خارجی در تگ img فراخوانی می‌شه.

✅ مثال:

<img src="example.svg" alt="نمونه تصویر SVG" width="100" height="100" />

✨ مزایا:

سادگی استفاده: کافیه مسیر فایل SVG را مشخص کنی، درست مانند سایر فرمت‌های تصویری (مانند JPG یا PNG).
جدا بودن فایل SVG: کد تمیزتره و مدیریت فایل‌های SVG آسون‌تر می‌شه.
کاهش حجم HTML: برای SVG‌های پیچیده و بزرگ، فایل‌های خارجی مناسب‌تر هستن.

⚠️ معایب:

عدم کنترل مستقیم با CSS یا JavaScript: نمی‌تونی مستقیماً اجزای داخلی SVG را تغییر بدی، مگر اینکه از تکنیک‌های پیشرفته‌ای مانند استفاده از object یا دسترسی با جاوااسکریپت بهره ببری.
نیاز به یک درخواست HTTP جداگانه برای بارگذاری فایل، که ممکنه کمی زمان بارگذاری را افزایش بده.

💡 بهترین روش استفاده از تگ svg

اگر نیاز به تغییر یا انیمیشن داری، از روش کد مستقیم در HTML استفاده کن.
اگر SVG شما یک تصویر ثابته که نیازی به تغییر نداره (مثل لوگو)، استفاده از تگ img ساده‌تر و کارآمدتره.

🚀 نکات سئو برای استفاده از SVG

استفاده از SVG‌ها تو وب نه‌تنها از لحاظ طراحی گرافیکی مناسبه بلکه می‌تونه تأثیر زیادی رو سئو سایت شما داشته باشه. چرا که SVG‌ها معمولاً حجم کمتری دارن و به راحتی مقیاس‌پذیر هستن. برخی از نکات سئو برای استفاده از SVG‌ها عبارتند از:

نام‌گذاری درست فایل SVG: نام فایل باید مرتبط با محتوا باشه و شامل کلمات کلیدی مناسب باشه.
اضافه کردن توضیحات (descriptions) و متن جایگزین: با استفاده از ویژگی‌هایی مانند title و desc می‌تونی برای تصاویرت توضیحاتی بنویسی که هم برای موتورهای جستجو و هم برای افراد نابینا مفید باشه.
محتوای قابل جستجو: محتوای داخل SVG می‌تونه توسط موتورهای جستجو فهرست بشه، بنابراین از متنی قابل جستجو در داخل اون استفاده کن.

❓سؤالات متداول درباره تگ `<svg>`

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

🔹 تگ <svg> توی HTML چه کاربردهایی داره؟
تگ SVG برای رسم شکل‌های برداری مثل آیکون‌ها، چارت‌ها، لوگوها، انیمیشن‌ها و حتی طراحی رابط کاربری استفاده می‌شه. برخلاف عکس‌های معمولی، قابل ویرایش با CSS و JavaScript هم هست.

🔹 آیا می‌شه CSS روی تگ‌های داخل SVG اعمال کرد؟
بله، به‌راحتی! می‌تونی مثلاً رنگ fill، stroke، اندازه و حتی ترنزیشن‌های CSS رو روی شکل‌ها داخل <svg> پیاده کنی. این یکی از مزیت‌های بزرگ SVG نسبت به عکس‌های معمولیه.

🔹 چجوری یک فایل SVG رو داخل HTML وارد کنیم؟
سه روش کلی داریم:

مستقیم با تگ <svg> داخل HTML.
لینک دادن با <img src="file.svg">.
استفاده از <object> یا <iframe> برای لود کردن فایل خارجی.

🔹 SVG از نظر سئو بهتره یا عکس معمولی؟
بسته به کاربرد. ولی SVG به خاطر قابلیت ویرایش، سرعت بارگذاری، خوانایی توسط موتورهای جستجو و حجم کم، از نظر سئو گزینه بسیار بهتریه؛ مخصوصاً برای آیکون‌ها و گراف‌های ساده.

🔹 آیا SVG همیشه بهترین انتخابه؟
نه الزاماً. SVG برای شکل‌های ساده و قابل مقیاس مناسبه، اما برای تصاویر پیچیده، طبیعی یا عکاسی شده (مثل منظره یا پرتره)، فرمت‌های پیکسلی مثل WebP، JPG یا PNG بهتر جواب می‌دن.

🔹 چطور می‌تونم توی SVG انیمیشن بسازم؟
می‌تونی از تگ‌های داخلی مثل <animate> یا <animateTransform> استفاده کنی، یا با CSS و حتی JavaScript (مثل GSAP) روی شکل‌ها انیمیشن ایجاد کنی. خیلی قدرتمنده!

🔹 SVG توی مرورگرها پشتیبانی می‌شه؟
کاملاً. تقریباً تمام مرورگرهای مدرن (از جمله Chrome، Firefox، Safari، Edge) از SVG پشتیبانی کامل دارن. فقط بعضی ویژگی‌های خاص مثل SMIL ممکنه توی بعضی مرورگرها پشتیبانی نشه.

📝 پروژه عملی: رسم یک مستطیل سفارشی با استفاده از تگ `<svg>`

🧩 توضیح پروژه

ازت می‌خوام با استفاده از تگ <svg> یه مستطیل ساده توی صفحه‌ی HTML بکشی. این مستطیل باید طول، عرض و رنگ دلخواه داشته باشه. می‌تونی از هر رنگی که دوست داری استفاده کنی و طول و عرضش رو خودت انتخاب کنی (مثلاً 200×100 پیکسل یا هر اندازه دیگه‌ای).

در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

🏁 جمع‌بندی

تگ <svg> یکی از قوی‌ترین ابزارهای طراحی وبه. از طراحی آیکون، دکمه، انیمیشن، تا نمودارها و اینتراکتیوهای حرفه‌ای، همه باهاش ممکنه. اگر درست استفاده بشه، هم سرعت سایت رو بالا می‌بره، هم ظاهرش رو حرفه‌ای‌تر می‌کنه.

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ <svg> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.

🏷️ تگ <svg> چیه و چرا مهمه؟