این درس یک گام مهم برای حرفهایتر شدن طراحی وب است، چون گرافیکهای برداری (وکتور) کیفیتی بینقص و مقیاسپذیر دارند و روی نمایشگرهای مدرن عالی دیده میشوند.
❓ گرافیک برداری چیست؟
- Raster (پیکسلی): مثل JPEG یا PNG، از پیکسل ساخته شدهاند. با بزرگنمایی کیفیتشان افت میکند.
- Vector (برداری): مثل SVG، از اشکال هندسی (دایره، مستطیل، مسیرها) ساخته شدهاند. بدون افت کیفیت تا بینهایت بزرگ میشوند.
📌 نتیجه: برای عکسها از Raster استفاده کنید، برای لوگوها و آیکونها از Vector.
🖥 چرا SVG اهمیت دارد؟
- نمایشگرهای مدرن تراکم پیکسلی بالایی دارند.
- استفاده از SVG باعث میشود لوگوها و آیکونها همیشه واضح و حرفهای دیده شوند.
- فایلهای SVG معمولاً سبکتر از تصاویر پیکسلی هستند.
🎨 طراحی گرافیک برداری با Figma
- ابزارهای ساده: مستطیل، دایره، Pen برای رسم منحنیها.
- تغییر رنگ و ترکیب اشکال.
- قرار دادن همهی شکلها داخل یک Frame.
📤 خروجی گرفتن به عنوان SVG:
- Frame را انتخاب کنید.
- گزینه Export را بزنید.
- فرمت خروجی را SVG انتخاب کنید.
- فایل را ذخیره کنید (مثلاً
example.svg).
🌐 استفاده از SVG در HTML
روش ۱: با تگ <img>
<img src="example.svg" alt="my vector graphic">
روش ۲: جایگذاری مستقیم کد SVG
<svg width="200" height="200">
<rect x="10" y="10" width="100" height="100" fill="blue" />
<circle cx="150" cy="80" r="40" fill="red" />
</svg>
- این کد را میتوانید مستقیماً داخل فایل HTML قرار دهید.
- مرورگر آن را مثل یک تصویر نمایش میدهد.
✨ نتیجهگیری
- SVGها مقیاسپذیر و باکیفیت هستند.
- ابزارهایی مثل Figma طراحی و خروجی گرفتن SVG را ساده کردهاند.
- با تمرین کوتاه، میتوانید آیکونها و لوگوهای حرفهای بسازید و در صفحات وب استفاده کنید.