اواخر دهه ۱۹۹۰ میلادی بود که SVG پا به عرصه گذاشت، یک `جوجه اردک زشت` فرمت فایل که بزرگ و تبدیل به یک قوی زیبا شد. در اوایل با پشتیبانی ضعیف و تا حد زیادی نادیده گرفته شدن از سمت مرورگرهای اینترنتی روبرو بود. اما در سال ۲۰۱۷ همه مرورگرهای مدرن میتوانند فرمت SVG را رندر و برنامه‌های طراحی وکتور خروجی SVG تولید کنند.

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

SVG چیست و چرا باید در طراحی سایت از آن استفاده کنیم؟

SVG یک فرمت گرافیکی برداری بر پایه‌ی XML است و از آن برای نمایش انواع گرافیک در وب و محیط‌های دیگر استفاده می‌شود.

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

SVG یک استاندارد W3C هست، بدین معناست که میتواند به را حتی با دیگر استانداردها شامل JavaScript، ‌DOM، CSS، و HTML تعامل داشته باشد. به نظر می‌رسد تا زمانی که W3C این استاندارهای جهانی را تنظیم می‌کند SVG به عنوان یک استاندارد برای گرافیک برداری برای مرورگرها باقی بماند.

SVG توانسته است بسیاری از مشکلات آزاردهنده در توسعه و طراحی وب سایت مدرن را برطرف کند. بیایید نگاهی به آن‌ها بیاندازیم:

مقیاس‌پذیری و پاسخ‌گویی

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

با ‌SVG شما می‌توانید انواع شکل‌ها، خطوط و متن‌ها را با هم ترکیب کنید تا انواع تصاویر را بیافرینید.

در مقابل فرمت‌های مانند PNG، GIF و JPG اندازه‌های ثابت دارند که در هنگام مقیاس‌پذیری دچار افت پیکسل می‌شوند و کیفیتشان افت می‌کند.

قابل برنامه نویسی و تعامل پذیر

SVG بطور کامل قابل ویرایش و برنامه‌پذیر است. انواع انیمیشن‌ها و تعاملات می‌توانند بوسیله CSS و JavaScript به تصاویر اضافه شوند.

دسترسی

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

کارایی

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


موارد استفاده معمول و پشتیبانی مرورگرها

SVG کاربردهای بیشماری دارد. در زیر تعدادی از آن‌ها که قابل توجه هستند ذکر شده‌اند:

تصاویر ساده و نمودارها

هر طراحی سنتی که ممکن است با قلم و خودکار کشیده شده باشد می‌تواند بصورت به فرمت SVG درآید.

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

لوگوها و آیکون‌ها اغلب در ویژگی وضوح و شارپ بودن در هر اندازه‌ای از یک دکمه تا بیلبورد مشترک هستند و به همین دلیل ساخت آن‌ها با SVG می‌تواند ایده‌آل باشد.

انیمیشن

شما میتوانید انیمیشن‌های جذاب و حتی طرح های زیبا بسازید. SVG می‌تواند با انیمیشن‌های CSS نیز کار کند.

تعامل(چارت، گراف، اینفوگرافیک، نقشه)
ساخت رابط کاربری اپلیکیشن ها

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

هم اکنون اکثر مرورگرهای مدرن ویژگی‌های مهم و پایه SVG را پشتیبانی می‌کنند.

منبع: قالب سایت ستروکیت