SVG در HTML
درس قبل مینی‌پروژه سایت شخصی کوچک می‌خواست — ناو مشترک، محتوا، media و فرم با label. این درس مسیر اختیاری گرافیک را شروع می‌کند. SVG (Scalable Vector Graphics) اجازه می‌دهد HTML آیکون و شکل ساده را با ریاضی بکشد نه پیکسل. دامنه عملی است: چگونه SVG را روی صفحه بگذارید — نه دورهٔ کامل طراحی.
چرا SVG در کورس HTML
تصاویر رستر (PNG/JPEG) با بزرگ‌شدن تار می‌شوند. SVG مسیر و شکل توصیف می‌کند تا لوگو یا آیکون در هر اندازه تیز بماند. مبتدی SVG را به‌عنوان آیکون هدر، نشان کوچک، یا علامت کنار عنوان می‌بیند. دانستن جاسازی درون‌خطی در برابر فایل صفحه را سبک و دسترس‌پذیر نگه می‌دارد — بدون بازسازی مینی‌پروژه از صفر.
پاسخ مستقیم
۱) درون‌خطی: درخت <svg>…</svg> را در HTML جایی که گرافیک باید باشد بگذارید. ۲) فایل: اثر را .svg ذخیره کنید و با <img src="…" alt="…"> (گاهی <object>) بار کنید. ۳) وقتی به قلاب CSS/JS یا نام دسترس‌پذیر دقیق روی خود گرافیک نیاز دارید درون‌خطی را ترجیح دهید. ۴) برای لوگوی ثابت که مثل تصویر دیگر استفاده می‌شود img را ترجیح دهید. ۵) به گرافیک معنادار نام بدهید (aria-label / role="img" درون‌خطی، یا alt روی img). ۶) این کورس جاسازی را معرفی می‌کند؛ رسم مسیر پیچیده جای دیگر است.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
SVG درون‌خطی کوچک
SVG درون‌خطی فقط نشانه‌گذاری است. دایره‌ای با viewBox و نام دسترس‌پذیر کار HTML را نشان می‌دهد: مرورگر شکل را می‌کشد؛ اندازه و معنا را در صفحه کنترل می‌کنید.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
خواندن دموی درون‌خطی
<svg>ریشهٔ گرافیک استwidth/heightجعبهٔ چیدمان؛viewBoxدستگاه مختصات داخلی<circle>یک شکل فرزند — cx/cy/r محل و شعاعrole="img"به‌علاوهaria-labelگرافیک را برای فناوری کمکی نام می‌دهد- تغییر width/height وکتور تیز می‌ماند (برخلاف بیت‌مپ کشیده‌شده)
- مینی‌پروژه از
<img>برای عکس استفاده کرد؛ اینجا «تصویر» می‌تواند نشانه‌گذاری باشد
SVG به‌عنوان فایل تصویر
وقتی لوگو از قبل logo.svg است مثل media دیگر رفتار کنید: src به فایل و alt مفید. مسیر باید با پوشه بخواند — همان عادت تصاویر مینی‌پروژه.
<img src="images/logo.svg" alt="Site logo" width="120">
خواندن الگوی فایل
srcبه فایل.svgروی دیسک یا URL اشاره می‌کندaltنام دسترس‌پذیر را حمل می‌کند (مثل هر تصویر اطلاعاتی)width(و اختیاریheight) اندازهٔ چیدمان؛ وکتورها هنوز تمیز مقیاس می‌شوند- CSS جعبهٔ
imgرا استایل می‌کند، نه هر مسیر داخل فایل به‌آسانی SVG درون‌خطی - یک فایل را در صفحات بدون چسباندن درخت عظیم نشانه‌گذاری دوباره استفاده کنید
- درس بعد، canvas، با پیکسل جاوااسکریپت می‌کشد — ابزار و کار متفاوت
انتخاب درون‌خطی در برابر فایل
- آیکون یک‌باره که می‌خواهید با CSS رنگ بزنید: اغلب SVG درون‌خطی آسان‌تر است
- لوگوی برند ثابت در صفحات زیاد:
imgHTML را کوتاه نگه می‌دارد - عکس دوربین و اسکرین‌شات: فرمت رستر — SVG برای وکتور است
- تصویرسازی عظیم درون‌خطی: فایل ترجیح دهید تا HTML خوانا بماند
- گرافیک معنادار: همیشه نام بدهید؛ تزئین خالص را با احتیاط از AT پنهان کنید
- نویسندگی عمیق SVG: برای پیگیری گرافیک/CSS
تمرین — SVG روی صفحه
- دایره را در صفحهٔ تمرین بچسبانید؛ رندر را ببینید.
width/heightرا عوض کنید (مثلاً ۴۰ و ۱۶۰) — دایره تیز بماند.- یک
.svgساده ذخیره کنید زیرimages/و باimg+altبار کنید. - موقتاً
aria-label(یاalt) را بردارید و نبود نام دسترس‌پذیر را ببینید. - آیکون درون‌خطی را کنار عنوان در کپی صفحهٔ خانهٔ مینی‌پروژه بگذارید.
- جمله: SVG نشانه‌گذاری مقیاس‌پذیر یا فایل وکتور است — جایگزین عکس نیست.
- جلوتر: canvas با اسکریپت می‌کشد؛ کدام ابزار برای آیکون در برابر رسم آزاد.
اشتباهات آسان
- فراموش نام دسترس‌پذیر روی SVG معنادار
- چسباندن درخت عظیم SVG درون‌خطی وقتی فایل کافی است
- استفاده از SVG برای عکس به‌جای JPEG/PNG/WebP
- حذف
viewBoxو تعجب از رفتار تغییر اندازه - اشتباه گرفتن SVG با canvas — درس بعد
- گرفتن این مقدمه به‌عنوان کل کورس Illustrator
- رها کردن عادت مینی‌پروژه: گرافیک بدون نام هنوز بدون نام است
خلاصه
- SVG شکل و آیکون مستقل از رزولوشن می‌کشد
- درون‌خطی با
<svg>یا فایل.svgباimg - گرافیک معنادار را نام بدهید؛ هنر بزرگ را در فایل نگه دارید وقتی ممکن است
- وکتور تمیز مقیاس می‌شود؛ عکس رستر می‌ماند
- مینی‌پروژه ساخت سایت بود؛ این درس گرافیک اختیاری را شروع می‌کند
- بعدی: canvas در HTML برای بیت‌مپ رسم‌شده با اسکریپت
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود