SVG: گرافیکی که خودش زبان توصیفی داره
تو درس ۵-۲ یه اشارهی کوتاه به SVG داشتیم و گفتیم برخلاف JPEG و PNG، این فرمت بر پایهی فرمولهای ریاضی کار میکنه، نه پیکسل. حالا که با canvas آشنا شدیم، وقتشه SVG رو کاملتر ببینیم و مستقیماً مقایسهش کنیم با canvas، چون این دو ابزار هر دو برای گرافیک استفاده میشن، اما فلسفهی کاملاً متفاوتی دارن.
SVG چیه؟
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="blue"></circle>
</svg>SVG مخفف Scalable Vector Graphics هست و برخلاف canvas که فقط یه بوم خالیه، خودِ تگ svg و عناصر داخلش (مثل circle، rect، line) مستقیم داخل HTML نوشته میشن و بدون نیاز به هیچ جاوااسکریپتی، مرورگر خودش این کد رو میخونه و شکل رو رسم میکنه.
یه تفاوت اساسی با canvas: SVG خودش HTML/XML هست
تو درس قبل دیدیم که canvas فقط یه ظرف خالیه و رسم واقعی همیشه با جاوااسکریپت انجام میشه. اما SVG کاملاً برعکسه: خودِ شکلها مستقیم بهعنوان تگهای XML/HTML نوشته میشن، دقیقاً مثل بقیهی عناصر HTML که تا الان تو این دوره دیدیم:
<svg width="300" height="100">
<rect x="10" y="10" width="100" height="80" fill="red"></rect>
<circle cx="200" cy="50" r="40" fill="green"></circle>
</svg>تو این مثال، بدون نوشتن حتی یه خط جاوااسکریپت، مرورگر خودش یه مستطیل قرمز و یه دایرهی سبز رو رسم میکنه، چون خود این تگها (rect و circle) مستقیم قابلفهم برای مرورگرن.
عناصر پایهای SVG
<circle>: رسم دایره، با ویژگیهایcxوcy(مختصات مرکز) وr(شعاع).<rect>: رسم مستطیل، باxوy(مختصات گوشهی بالا-چپ) وwidth/height.<line>: رسم خط، باx1،y1(نقطهی شروع) وx2،y2(نقطهی پایان).<text>: نوشتن متن مستقیم داخل SVG.<path>: رسم شکلهای پیچیده و دلخواه با یه سری دستورات مسیر.
یه مثال با چند عنصر مختلف
<svg width="300" height="150">
<rect x="10" y="10" width="80" height="60" fill="orange"></rect>
<circle cx="150" cy="40" r="30" fill="purple"></circle>
<line x1="10" y1="100" x2="280" y2="100" stroke="black" stroke-width="2"></line>
<text x="10" y="130" font-size="16">نمونه متن در SVG</text>
</svg>تو این مثال، یه مستطیل نارنجی، یه دایرهی بنفش، یه خط افقی مشکی و یه متن فارسی، همگی فقط با نوشتن تگهای HTML/XML و بدون هیچ جاوااسکریپتی رسم شدن.
مزیت اصلی SVG: مقیاسپذیری بدون افت کیفیت
همونطور که تو درس ۵-۲ گفتیم، چون SVG بر پایهی فرمولهای ریاضی کار میکنه (نه پیکسل ثابت)، میشه با CSS ابعادش رو تا هر اندازهای بزرگ یا کوچیک کرد، بدون اینکه کیفیت تصویر افت کنه یا پیکسلی (Pixelated) بشه. این ویژگی برای آیکونها و لوگوهایی که باید تو اندازههای خیلی متفاوت (از یه آیکون کوچیک تا یه بنر بزرگ) نمایش داده بشن، خیلی ارزشمنده.
مزیت دیگر: قابلاستایلدهی با CSS و قابلدسترسبودن
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" class="my-circle"></circle>
</svg>
<style>
.my-circle:hover {
fill: red;
}
</style>چون عناصر SVG واقعاً بخشی از DOM صفحه هستن (درست مثل یه div یا p)، میشه بهشون کلاس داد، با CSS استایلشون داد، و حتی با جاوااسکریپت بهشون دسترسی پیدا کرد و تغییرشون داد؛ این یعنی میشه مثلاً وقتی موس روی یه شکل SVG میره، رنگش رو با CSS تغییر داد، بدون نیاز به نوشتن کد رسم دوباره (که تو canvas این کار خیلی پیچیدهتره).
مقایسهی کامل SVG و canvas
| ویژگی | SVG | canvas |
|---|---|---|
| روش تعریف محتوا | مستقیم با تگهای HTML/XML | فقط با جاوااسکریپت |
| مقیاسپذیری | بدون افت کیفیت در هر اندازه | وابسته به رزولوشن پیکسلی اولیه |
| دسترسیپذیری | عناصر قابلدسترسیتر (چون بخشی از DOM هستن) | محتوا برای صفحهخوان نامفهومه، مگر با تلاش اضافه |
| استایلدهی با CSS | کاملاً پشتیبانی میشه | پشتیبانی محدود (باید با جاوااسکریپت دوباره رسم بشه) |
| مناسب برای | آیکون، لوگو، نمودارهای ساده و تعاملی | بازیهای پیچیده، انیمیشنهای سنگین، پردازش تصویر |
چه زمانی SVG بهتره، چه زمانی canvas؟
یه قاعدهی کلی: اگه گرافیکت نسبتاً سادهست (آیکون، لوگو، نمودار پایه) و میخوای دسترسیپذیری و کیفیت در همهی اندازهها حفظ بشه، SVG گزینهی بهتریه. اگه گرافیکت خیلی پیچیده و پویاست (مثل یه بازی با صدها المان متحرک، یا پردازش پیکسلبهپیکسل تصویر)، canvas معمولاً عملکرد بهتری داره، چون برای این نوع کارها بهینهتر طراحی شده.
SVG بهعنوان فایل مستقل هم قابلاستفادهست
<img src="icon.svg" alt="آیکون سبد خرید">همونطور که تو درس ۵-۲ دیدیم، SVG رو میشه هم بهعنوان یه فایل مستقل (با پسوند .svg) داخل تگ img استفاده کرد، هم مستقیم داخل کد HTML نوشت (مثل مثالهای این درس). حالت دومی (نوشتن مستقیم) انعطاف بیشتری برای استایلدهی و تعامل با CSS/جاوااسکریپت میده، اما حالت اول (فایل مستقل) برای استفادهی مجدد و سادهتر مناسبتره.
چند اشتباه رایج
- استفاده از canvas برای گرافیکهای سادهای که SVG با دسترسیپذیری و مقیاسپذیری بهتر میتونست جایگزینش بشه.
- تصور اینکه SVG هم مثل canvas حتماً نیاز به جاوااسکریپت داره، در حالی که محتوای پایهی SVG کاملاً با HTML ساده هم قابلنمایشه.
- عدم استفاده از قابلیت استایلدهی CSS روی SVG و تلاش برای انجام هر تغییری با جاوااسکریپت.
بهترین روشها
- برای آیکون، لوگو و نمودارهای نسبتاً ساده، SVG رو در اولویت قرار بده.
- از قابلیت استایلدهی CSS روی عناصر SVG (مثل تغییر رنگ در حالت hover) استفاده کن تا کد سادهتر بمونه.
- برای گرافیکهای خیلی پیچیده و پویا (مثل بازی)، canvas رو در نظر بگیر.
نکتهی سئو
چون عناصر SVG مستقیماً بخشی از کد HTML صفحه هستند، گوگل میتواند محتوای متنی داخل SVG (مثل تگ text) را راحتتر از محتوای رسمشده روی canvas بخواند و تحلیل کند.
نکتهی دسترسیپذیری
چون عناصر SVG بخشی واقعی از DOM هستند، میتوان با افزودن ویژگیهایی مثل title یا aria-label به آنها، اطلاعات معناداری برای صفحهخوانها فراهم کرد؛ این قابلیت بهمراتب سادهتر از تلاشهای مشابه برای canvas است.
جمعبندی
SVG یک فرمت گرافیکی برداری است که برخلاف canvas، محتوایش مستقیماً با تگهای HTML/XML قابلتعریف است، بدون نیاز اجباری به جاوااسکریپت. این ویژگی به همراه مقیاسپذیری بدون افت کیفیت، قابلیت استایلدهی با CSS و دسترسیپذیری بهتر، SVG را برای آیکونها، لوگوها و نمودارهای ساده گزینهای مناسبتر از canvas میکند.