همه آن چیزی که باید در مورد SVG ها در وب بدانید

آیا هنوز از PNG ها برای آیکون و لوگو در طراحی سایت استفاده می کنید. زمانش رسیده است که در مورد SVG ها بدانید. در حالی که بعضی از طراحان هنوز از روش های قدیمی تر استفاده می کنند، اما اکنون SVG ها در اکثر مرورگرها و دستگاه ها پشتیبانی می شوند. فایل های SVG فوق العاده کوچک، قابل جستجو، قابل تغییر(از طریق کد) و مقیاس پذیر هستند. آنها در تمام اندازه ها عالی هستند.

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

چرا از SVG ها استفاده می کنیم؟

همانطور که در بالا مشاهده میکنید تصویر سمت راست از کیفیت بالاتری برخوردار است. در واقع SVG ها با تغییر اندازه از کیفیت شان کاسته نمی شود. احتمالا دوست دارید از آنها در طراحی تان استفاده کنید. دلایل زیادی وجود دارد که از آنها کمک می گیریم.

مقیاس پذیری عالی در پیکسل ها

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

قابلیت تغییر

SVG ها می توانند با استفاده از CSS استایل بندی و یا متحرک سازی شوند. شما میتوانید رنگ ها، اندازه ها و فونت ها را در آنها تغییر دهید. عناصر در SVG ها می توانند واکنش گرا باشند. انیمیشن هایی که بر روی عناصر html استفاده می‌کنید می توانند بر روی عناصر SVG استفاده شوند.

اندازه کوچک فایل

PNG ها خیلی سریع می توانند بزرگ شوند، به خصوص زمانی که شما نیاز به اندازه های بزرگتری از آنها دارید. با بزرگ شدن تصویر در نتیجه حجم تصویر نیز افزایش می‌یابد و زمان بیشتری نیاز است تا در مرورگر بارگذاری شود. JPG ها بهتر هستند ولی همچنان بزرگ هستند و این یعنی سایتی با سرعت بارگذاری آهسته تر. SVG ها فقط کد هستند و این یعنی دارای اندازه بسیار کوچکی هستند. از آنها برای آیکون ها، لوگو ها و یا هر چیز دیگری که می تواند به عنوان یک vector ساخته شود استفاده کنید.

دسترسی پذیری

فایل های SVG بر مبنای متن هستند و می توان جستجو و ایندکس شوند. این یعنی آنها توسط صفحه خوان ها، موتور های جستجو و دیگر دستگاه ها قابل خواندن هستند. هر عنصری داخل SVG برای جستجو و تغییر فایل قابل دسترس است.

کجاها از SVG استفاده می شود؟

SVG ها هنوز به شدت مورد استفاده قرار نگرفتند. بخشی از آن به این دلیل است که برای رسیدن به پشتیبانی گسترده در مرورگرها زمان زیادی طول کشید. با این حال اگر شما به تجربه ای سریع و واکنش گرا نیاز دارید، SVG ها می توانند به طور قابل ملاحظه ای وب سایت شما را بهبود ببخشند. برخی از مواردی که می توانید از SVG ها استفاده کنید عبارتند از :

لوگو ها و آیکون ها

لوگو ها و آیکون ها اغلب نیاز به اشتراک گذاری و استفاده در اندازه های مختلف دارند. حتی اگر آیکون و یا لوگو یک دکمه ساده و یا یک بنر تبلیغاتی بزرگ در بر روی صفحه نمایش باشد، شما نیاز دارید آنها سازگار و واضح باشند. SVG امکان کنترل دقیق هر شکل، خط و عنصر را فراهم می آورد. آیکون ها و لوگو های SVG در دسترس تر هستند و این یعنی جاگذاری و دستکاری آنها در هر زمان آسانتر است.

نمودارها و اینفوگرافیک

SVG ها را می توان به صورت پویا بر اساس اقدامات کاربر و سایر حوادث به منظور ترسیم داده ها به روز رسانی کرد. این باعث می شود که SVG برای مواردی مانند نقشه های تعاملی و تصاویری که داده ها را توضیح میدهد مناسب باشند.

جلوه های بصری

بسیاری از جلوه‌های بصری می‌توانند با استفاده از SVG ایجاد شوند. برای مثال شکل‌گیری تصویر و یا انتقال از یک شکل به شکلی دیگر. می‌توانید حروف را به اشکال، لوگوها را به لوگوهای دیگر و غیره تبدیل کنید.

تصاویر متحرک

SVG ها می توانند با انیمیشن های CSS کار کنند، بنابراین شما نیاز ندارید مهارت های تازه ای را در زمینه انیمیشن یاد بگیرید. SVG ها می توانند از قابلیت انیمیشن درونی خود(SMIL) استفاده کنند.  این برای زمانی که می خواهید نتایج خلاقانه‌ ای را ایجاد کنید بسیار مفید است.

تصاویر سنتی

بسیاری از تصاویر سنتی به خوبی به SVG تبدیل می شوند در صورتی که خیلی پیچیده نیستند. طرح ها و نمودارها برای توضیح ویژگی های یک محصول و یا نشان دادن یک مفهوم می‌توانند عالی باشند.

رابط های کاربری و برنامه ها

SVG ها برای رابط های کاربری پیچیده ایده‌آل هستند. آنها می توانند با برنامه مبتنی بر وب و برنامه های کاربردی یکپارچه شود. آنها سبک هستند و به راحتی متحرک سازی می‌شود.

منبع: لرن سورس