آموزش ساخت تصاویر svg در قالب طراحی نقشه استان‌های ایران
به‌جرئت دنیای امروز را می‌توان دنیای پیسکل ها دانست، پیکسل‌هایی که می‌توانند به‌عنوان دوست یا دشمن یک توسعه‌دهنده ایفای نقش کنند.همه وبمستران و توسعه‌دهندگان وب‌سایت‌ها و اپلیکیشن های موبایل تمایل دارند که تصاویر وب‌سایت یا اپلیکیشنی که خلق کرده‌اند را در بهترین کیفیت و زیباترین شکل خود نشان دهند. نکته‌ای دیگر که امروز حائز اهمیت است مبحث performance یا بهبود کارایی است که تمامی توسعه‌دهندگان بر روی این گزینه به‌شدت مانور می‌دهند.
برای رسیدن به این هدف در مورد لوگوها و تمامی تصاویری که مورداستفاده قرار می‌گیرد فقط یک راه‌حل وجود دارد.یکی از بزرگترین رویاهای ما به‌عنوان توسعه‌دهنده این است که بتوانیم تصاویرمان را به هراندازه می‌خواهیم بزرگ کنیم و کیفیت آن هیچ‌گونه تغییری نداشته باشد.امروز با ورود svg به دنیای توسعه‌دهندگان این رؤیا به حقیقت پیوسته است.
SVG چیست؟
SVG یا همان Scalable Vector Graphics است که می‌توان به فارسی آن را به نگاره‌سازی برداری مقیاس‌پذیر ترجمه کرد.
در دنیای کامپیوتر ترسیمات می‌توانند از دو نوع Raster یا Vector باشند.
در Raster Graphics یا گرافیک شطرنجی تصویر به‌صورت مجموعه‌ای از پیکسل‌ها ذخیره می‌شود و رنگ هر پیکسل به‌طور جداگانه ذخیره می‌شود. تغییر اندازه این تصاویر کیفیت آن‌ها را تحت تأثیر قرار می‌دهد. اکثر فرمت‌های رایج فایل‌های تصویری مانند jpg، gif و bmp بر مبنای گرافیک شطرنجی هستند.
Vector Graphics یا گرافیک برداری روشی در تولید و ذخیرهٔ فایل‌های تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. واژهٔ «بردار» در این کاربرد معنایی وسیع‌تر از یک خط راست دارد.
تصاویر تعریف‌شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل‌شده‌اند که به‌صورت ریاضی تعریف می‌شوند. اجزای این تصاویر را می‌توان بدون از دست دادن کیفیت به‌راحتی جابه‌جا کرد و تغییر اندازه داد. این تصاویر مستقل از رزولوشن هستند و می‌توان آن‌ها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد. یکی از شناخته‌شده‌ترین فرمت‌های ذخیرهٔ فایل‌های گرافیک برداری، فرمت SVG است.
SVG بر اساس XML است این یعنی سینتکس آن خیلی هم غریبه نخواهد بود و به HTML شباهت دارد. به این صورت که برای ترسیم شکل‌های مختلف تگ‌های مختلف وجود دارد مثلاً برای ترسیم دایره از تگ <circle /> استفاده می‌شود و درنهایت همه اشکال، درون یک تگ <svg /> قرار می‌گیرند.
چرا svg؟
خوب حالا می‌خواهیم باهم دلایلی را بررسی کنیم تا به این نتیجه برسیم که svg تنها راه رسیدن ما به این هدف بزرگ است:
– مستقل از رزولوشن
یکی از نقاط قوت svg این هست که هیچ‌گونه وابستگی به رزولوشن ندارد و تصاویر شما با هر سایز تصویری بدون تغییر کیفیت نمایش داده می‌شود. اما در مقابل تصاویر Raster کاملاً وابسته به رزولوشن می‌باشند و با تغییر رزولوشن کیفیت آن دست‌خوش تغییر خواهد شد.
دیگر مهم نیست اندازه تصویر چه باشد، یا چقدر کاربر Zoom کند و یا اینکه کیفیت صفحه نمایش کاربر چه اندازه باشد. در همه این موارد SVG همان حالت با کیفیتش را حفظ می‌کند.
– سازگار با CSS
از آنجایی که svg مانند تگ‌هایی از html عمل می‌کند و می‌توانید به آن id و class اختصاص دهید، پس به راحتی می‌توانید هرگونه استایلی مدنظر داشته باشیم بر روی آن پیاده‌سازی کنیم درصورتی‌که تصاویر Raster این قابلیت را ندارند.
فرض کنید مستطیلی را از طریق SVG ساخته‌ایم ، می‌توانیم رنگ آن را به‌صورت های مختلف تغییر دهیم ولی اگر همان مستطیل از نوع تصاویر معمولی مثلاً با فرمت PNG بود می‌توان گفت دیگر این امکان برای ما وجود نداشت.
– تعامل‌پذیری ساده از طریق جاوا اسکریپت
به همان دلیلی که SVG با CSS سازگار است می‌توان گفت به‌راحتی می‌توان از طریق جاوا اسکریپت با آن تعامل داشت و مواردی مثل انیمیشن و غیره را به‌راحتی پیاده‌سازی و درنتیجه تجربه کاربری و تعاملی خوبی را به‌سادگی برای کاربر مهیا کرد.
– درخواست HTTP کمتر سایت بهتر
زمانی که شما از تگ <img> برای نمایش تصاویر در وب‌سایت خود استفاده می‌کنید، هنگام باز شدن وب‌سایت به ازای هر تگ img یک درخواست به سمت سرور ارسال می‌شود و این خود یکی از دغدغه‌های عمده توسعه‌دهندگان هست که چگونه این درخواست‌ها را کم کنند. اما زمانی که از Svg استفاده می‌کنید چون‌که این svg در درون صفحه وب شما قرار دارد هنگام لود صفحه و با درخواستی که برای لود فایل این صفحه فرستاده‌شده این تصویر هم در همان درخواست لود می‌شود و از درخواست‌های مکرر به سمت سرور جلوگیری می‌کند.
– ویرایش ساده
برای تغییر یک فایل SVG فقط به یک ویرایشگر متن نیاز داریم این یعنی در همان محیط کد نویسی می‌توانیم ویراش موردنظرمان را انجام دهیم. اما اگر یک تصویر Raster را بخواهیم ویرایش کنیم باید به فوتوشاب یا مشابه آن پناه ببریم.
– حجم فایل کمتر
ترسیمات وکتور معمولاً حجم کمتری را می‌گیرند مخصوصاً اگر شکل و طرح ساده‌ای داشته باشند. پس فایل تصویر ما سایز کمتری خواهد داشت. همچنین فشرده‌سازی به‌صورت بهتری روی SVG اعمال می‌شود. پس می‌توان ازنظر سایز صفحه وب هم با استفاده از SVG صرفه‌جویی داشته باشیم که ازنظر کارایی کمک بسیار خوبی برای سایت ما خواهد بود.
– طراحی واکنش گرا با دردسر کمتر
در طراحی واکنش گرا، واکنش گرا کردن تصاویر یک دردسر بزرگ است. اگر تصویر شما می‌تواند به‌صورت SVG باشد دیگر نگرانی برای واکنش گرا بودن آن نخواهید داشت. ولی در صورت استفاده از تصاویری با فرمت PNG یا JPG شاید مجبور شوید تا در صفحه‌نمایش‌های مختلف نسخه‌های مختلفی از آن تصاویر را قرار دهید.
نوشته آموزش ساخت تصاویر svg در قالب طراحی نقشه استان های ایران اولین بار در دانشجویار پدیدار شد.
