شما اینجا هستید :

Home » مقالات » توسعه وب » ۶ دلیل برای استفاده از SVG

۶ دلیل برای استفاده از SVG

تصویر‌سازی وکتوری مقیاس پذیر یا SVG، نوعی از تصاویره که در حال حاضر، تو اکثر دستگاه‌ها و مرورگرها پشتیبانی میشه. استفاده از تصاویر SVG فایده های زیادی داره که تو این مقاله میخوام ۶ مورد از فوایدش رو بگم خدمتتون.

۱. مستقل از رزولوشن و واکنشگرا

تصاویری که با استفاده از تکنیک SVG ساخته میشن، مثل المان‌هایی که در طراحی واکنشگرا میسازیم هستن، مقیاس‌پذیرن و خودشون رو تطبیق میدن. تصاویر تو این شکل، با هر شکل و اندازه‌ای از صفحه نمایش (چه دسکتاپ چه موبایل) به خوبی نمایش داده میشن.

با استفاده از این فرمت لزومی نداره برای استفاده متفاوت یه تصویر رو به چند شکل مختلف از هم دربیاریم.

۲. حاوی یک DOM است

SVG در مرورگر حاوی یک DOM مستقله. برای مرورگر SVG مثل یه سنده، و از این قسمت به بعد میشه از طریق DOM به اون دسترسی داشت. این جنبه برای خاصیت viewBox خیلی مهم و کاربردیه. ینی اینکه ما میتونیم اندازه‌های ثابتی از تصویر رو تو DOM قرار بدیم و مشکلی برای استفاده از اون تو مرورگرهای مختلف نداشته باشیم، در اصل شکل نمایش هیچ مشکلی پیدا نمیکنه و تو مرورگرهای مختلف اندازه ثابته. وجود این DOM جداگانه به طراح وبسایت این توانایی رو میده که از طریق CSS و Javascript به SVG دسترسی داشته باشه واونو بروز رسانی بکنه.

۳. انیمیشنی و متحرکه

الما‌ن‌های داخلی SVG قابلیت انیمیشنی بودن رو دار هستن و میتونن بر اساس تعاملات یا پیاده‌سازی اون، متحرک باشن،. این ویژگی برای زمانی که بخوایم از تعامل یه کاربر با بخشی از تصویر، پاسخگویی رو نمایش بدیم و یا مواردی از این دست استفاده میشه. انیمیشن‌ها میتونن از طریق خاصیت های CSS، API‌ های انیمیشنی مربوط به جاوااسکریپت و با استفاده از تگ <animate> در SVG پیاده سازی بشن.

انیمیشن‌های SVG نقطه جالبی از فرایند طراحی وب به حساب میان. گوگل بعد از کروم ۴۵ اونو به خاطر محبوبیت انیمیشن‌های CSS و APIهای جاوااسکریپت برای انیمیشن‌های وب غیرفعال کرد، اما در طول زمان اونو به حالت تعلیق با نرخ کمی درآورد.

۴. شیوه‌پذیره

توسط سلکتورهایی مثل ID و name میتونیم به المان‌های داخل SVG دسترسی پیدا کنیم و از طریق اونا تغییراتی رو ایجاد و یا شیوه و استایل بهشون بدیم. لبته ممکنه سینتکسش یکمی متاوت باشه یا اون چیزی که ما استفاده میکنیم. مثلا بجای استفاده از color باید از خاصیت fill و به جای border باید از خاصیت stroke استفاده کنین.یادتون باشه موارد محدود کننده ای هم تو این شیوه دادن وجود داره که بستگی به شیوه استفاده شما از SVG تو صفحه داره.

اگر از خاصیت تصویر برای قرار دادن SVG در وبسایتتون اسشتفاده کنین، دیگه قادر به تغییر استایل و استایل‌دهی به اون تو اینترنت اکسپلورر نیستین. البته این امکان وجود داره که از طریق svg۴everybody اون رو درست کنین.

۵. تعاملیه

با استفاده از جاوااسکریپت و قدرت DOM می‌تونیم به برخی المان‌های داخل SVG دسترسی داشته باشیم و با اونا تعامل کنیم. ما با استفاده از این موضوع این امکان رو داریم که به همون شیوه سابق که با HTML و CSS کار می‌کردیم، بتونیم با SVG هم در تعامل باشیم پویا نگهش داریم.

همچنین از این راه میتونیم با استفاده از وب انیمیشن‌های جاوااسکریپت، انیمیشن‌های ساده و پیچیده رو با اون ایجاد کنیم. همچنین می‌تونیم از تعداد متفاوتی کتابخانه‌های جاوااسکریپت استفاده کنیم که به روند کار با SVG رو سرعت میبخشه.

۶. فایل‌هایی با اندازه کوچک

با وجود حالت برداری تصاویر SVG (حالتی که تمام تصاویر با استفاده از یکسری مختصات ایجاد میشه) تمام تصاویر در نهایت وقتی با بقیه تکنیک‌های تصویر سازی مقایسه میشه، سبک‌تر و کوچک‌تره. راه‌های زیادی نیز برای فشرده‌سازی و بهینه‌سازی تصاویر SVG وجود داره که از طریق خط فرمان میتونین با اونا کار کنین اما SVGOMG یه گزینه مناسب همراه با رابط گرافیکیه که به شما کمک زیادی برای بهینه‌سازی تصاویر می‌کنه.

درسته که SVG برای ساخت تصاویر واکنشگرا، انیمیشنی و پیچیده ساخته شده ولی دلیلی نداره که تو تصاویر hero یا پست‌های وبلاگی و یا رسانه‌های آنلاین از اون استفاده نکنین.

برچسب ها : ، ، ،

مــطالب مشـــابه

تفاوت میان برنامه‌نویسی شئ‌گرا و تابعی

دو مورد از الگوها و سر مشق های برنامه‌نویسی که توسعه‌دهنده ها به وجود آوردن و برنامه‌های خودشون رو مطابق با اونا مینویسن، برنامه‌نویسی تابعی و شئ‌گراست. تو این مقاله قصد دارم در مورد این دو پارادایم و تفاوت هایی که با هم صحبت کنم….

ارسال شده در شهریور ۷, ۱۳۹۷

جوملا چیه؟

جوملا یه سیستم مدیریت محتوای تحت وبه که مدیریت و انتشار مطالب رو به شکل ساده امکان پذیر میکنه، جوملا امکانات گسترده ایی و با ابزار های خودش امکان گسترش نرم افزارها رو فراهم میکنه. با جوملا میتونین وبسایت ها و سامانه های تحت وب…

ارسال شده در شهریور ۶, ۱۳۹۷

عناصر مهم در ایجاد یک وبسایت فوق العاده

چطوری میتونیم یه وبسایت عالی داشته باشیم؟ هیچ دستور جادویی و یا الگوی خاصی برای حل این سوال وجود نداره. داشتن یه وبسایت فوق العاده میتونه به عوامل و فاکتور های مختلفی بستگی داشته باشه، مثلا مهارت شما یا بودجه ای که در اختیار دارین…

ارسال شده در شهریور ۴, ۱۳۹۷

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *