تصویر‌سازی وکتوری مقیاس پذیر یا SVG نوعی از تصاویر است که در حال حاضر، در اکثر دستگاه‌ها و مرورگرها پشتیبانی می‌شود. فواید استفاده از این نوع تصویری بسیار است، در این مطلب قصد داریم با ۶ مورد از بزرگ‌ترین فواید آن آشنا شویم.
1. مستقل از رزولوشن و واکنشگرا
تصاویری که با استفاده از این تکنیک ساخته می‌شوند، درست مانند المان‌هایی که در طراحی واکنشگرا می‌سازیم، مقیاس‌پذیر هستند و خودشان را تطبیق می‌دهند. تصاویر در این شکل، با هر شکل و اندازه‌ای از صفحه نمایش (چه موبایل و چه دسکتاپ) به خوبی و زیبایی نشان داده می‌شود.
با استفاده از این فرمت دیگر نیازی نیست برای استفاده متفاوت یک تصویر را به چند شکل متفاوت از هم درآوریم.
2. حاوی یک DOM است
SVG در مرورگر حاوی یک DOM مستقل است. برای مرورگر SVG مانند یک سند خواهد بود و از آن جا به بعد می‌توان از طریق DOM به آن دسترسی داشت. این جنبه برای خاصیت viewBox بسیار مهم و کاربردی است. منظور این است که ما می‌توانیم اندازه‌های ثابتی از تصویر را در DOM قرار دهیم و برای اینکه در مرورگرهای مختلف از آن استفاده کنیم مشکلی نداشته باشیم، در حقیقت شکل نمایش هیچ مشکلی پیدا نخواهد کرد و در مرورگرهای مختلف اندازه ثابت است. وجود این DOM جداگانه به طراح وب این قابلیت را می‌دهد که از طریق CSS و Javascript به SVG دسترسی داشته باشد و آن را بروزرسانی کند.
3. انیمیشنی و متحرک است
المانهای داخلی SVG قابلیت انیمیشنی بودن را دارند و می‌توانند براساس تعاملات یا پیاده‌سازی آن، متحرک باشند، از فواید این ویژگی برای زمانی است که بخواهیم از تعامل یک کاربر با بخشی از تصویر، پاسخگویی را نمایش دهیم و یا مواردی مانند این حالت. انیمیشن‌ها می‌توانند از طریق خاصیت های CSS، APIهای انیمیشنی مربوط به جاوااسکریپت و با استفاده از تگ <animate> در SVG پیاده سازی شوند.
انیمیشن‌های SVG نقطه جالبی از فرایند طراحی وب به حساب می‌آید. گوگل بعد از کروم 45 آن را به دلیل محبوبیت انیمیشن‌های CSS و APIهای جاوااسکریپت برای انیمیشن‌های وب غیرفعال کرد، اما بعدها آن را به حالت تعلیق -با نرخ کمی- درآورد.
۴. شیوه‌پذیر است
با استفاده از سلکتورهایی مانند ID و name می‌توانیم به المانهای داخل SVG دسترسی پیدا کنیم و از طریق آن‌ها تغییراتی را ایجاد کنیم و یا اینکه استایل و شیوه به آن‌ها بدهیم. البته سینتکس آن ممکن است کمی متفاوت با چیزی باشد که ما استفاده می‌کنیم. مثلا بجای استفاده از color باید از خاصیت fill و به جای border باید از خاصیت stroke استفاده کنید. در نهایت موارد محدود کننده‌ای نیز در این شیوه دادن وجود دارد که بستگی به شیوه استفاده شما از SVG در صفحه دارد.
اگر از خاصیت تصویر برای قرار دادن SVG در وبسایت استفاده کنید، دیگر قادر به تغییر استایل و استایل‌دهی به آن در اینترنت اکسپلورر نیستید. البته میتوانید از طریق svg4everybody آن را درست کنید.
5. تعاملی است
با استفاده از جاوااسکریپت و قدرت DOM می‌توانیم به برخی المانهای داخل SVG دسترسی داشته باشیم و با آن‌ها تعامل کنیم. این موضوع به ما اجازه می‌دهد که به همان شیوه سابق که با HTML و CSS کار می‌کردیم، بتوانیم با SVG نیز در تعامل باشیم و آن را پویا نگه داریم.
همچنین می‌توانیم از این طریق از وب انیمیشن‌های جاوااسکریپت استفاده کنیم و انیمیشن‌های ساده و پیچیده را با آن ایجاد نماییم. همچنین می‌توانیم از تعداد متفاوتی کتابخانه‌های جاوااسکریپت استفاده کنیم که روند کار با SVG را برای ما تسریع می‌دهد.
6. فایل‌هایی با اندازه کوچک
با تشکر از حالت برداری تصاویر SVG (حالتی که تمام تصاویر با استفاده از یکسری مختصات ایجاد می‌شود) تمام تصاویر در نهایت وقتی با دیگر تکنیک‌های تصویر سازی مقایسه می‌شود، سبک‌تر و کوچک‌تر است. راه‌های بسیاری نیز برای فشرده‌سازی و بهینه‌سازی تصاویر SVG وجود دارد که از طریق خط فرمان میتوانید با آن‌ها کار کنید اما SVGOMG یک گزینه مناسب همراه با رابط گرافیکی است که به شما کمک زیادی برای بهینه‌سازی تصاویر می‌کند.
از آنجایی که SVG برای ساخت تصاویر واکنشگرا، انیمیشنی و پیچیده ساخته می‌شود دلیلی نیست که در تصاویر hero، پست‌های وبلاگی و یا رسانه‌های آنلاین از آن استفاده نکنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید