فرمت svg چیست؟ مزایای استفاده از svg در وبسایت

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

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

دلایل استفاده از گرافیک های برداری مقیاس پذیر

SVG مقیاس پذیر است و در هر رزولوشن پیکسل را بی نقص نشان می دهند در حالی که JPEG ، PNG و GIF اینطور نیستند.
SVG ها تصاویر برداری هستند و بنابراین معمولاً در اندازه فایل بسیار کوچک تر از تصاویر مبتنی بر bitmap هستند.
SVG های زیادی را می توان با استفاده از CSS طراحی کرد.
آن ها با سئو سازگار هستند و به شما امکان می دهد کلمات کلیدی، توضیحات و لینک ها را مستقیماً به تصویر خود اضافه کنید.
SVG ها را می توان در HTML جای داد، بدین معنی که می توان آن ها را در حافظه cache ذخیره کرد، مستقیماً با استفاده از CSS ویرایش کرد و برای دسترسی بیشتر فهرست بندی کرد.
آن ها نشانه پیشرفت در فناوری های آینده هستند. فرمت SVG را می توان به طور نامحدود مقیاس بندی کرد به این معنی که آن ها همیشه در فناوری های جدید تر صفحه نمایش مانند 8K و فراتر از آن، به کمال پیکسل می رسند.
SVG ها می توانند مستقیماً یا با استفاده از CSS یا جاوا اسکریپت متحرک شوند و طراحان وب بتوانند تعاملی را به یک سایت اضافه کنند.

SVG چیست و برای چه مواردی استفاده می شود؟

از نظر فنی، فرمت SVG مخفف کلمات گرافیک برداری مقیاس پذیر (Scalable Vector Graphics) است و یک قالب تصویر برداری بر اساس XML است. تصاویر SVG عمدتا در وب یافت می شوند و در حالی که کاربرد های قابل مقایسه ای با انواع تصاویر JPEG ، PNG و WebP دارند، DNA آن ها بسیار متفاوت است.

در ساده ترین شکل، این یک پشت صحنه فرمت SVG است:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="250" height="250" fill="#0000FF"/>
</svg>

این فایل SVG می تواند عرض 250 پیکسل و مربع آبی را نشان دهد. بنابراین SVG ها چه تقاوتی دارند؟

انواع فرمت تصویر سنتی مانند JPEG ، PNG و GIF مبتنی بر نقشه بیت bitmap (یا بر اساس رستر) هستند، به این معنی که از مقدار مشخصی پیکسل تشکیل شده است. به طور معمول این بدان معناست که به محض شروع به افزایش یا کاهش حجم تصویری از این نوع، خطوط ناهموار، آثار مبهم و آشفتگی پیکسلی به شما نشان داده می شود.

همچنین فرمت فشرده ای مانند تصاویر webp وجود دارند که توسط Google توسعه یافته است و هدف آن جایگزینی کامل فرمت های فایل JPEG ، PNG و GIF به عنوان یک راه حل انعطاف پذیر تر است. توصیه ما این است که حتما به مقالات ساخت تصویر webp و همچنین آپلود تصویر webp در وردپرس مراجعه کنید.

بنابراین فرمت SVG چه تفاوتی با تصاویر مبتنی بر bitmap دارد؟ آن ها تصاویر برداری (vector) هستند به این معنی که آن ها از وضوح مستقلی برخوردار هستند. تصاویر SVG به جای اینکه از پیکسل تشکیل شده باشند، از اشکال تشکیل شده اند. این بدان معنی است که آن ها می توانند به طور نامحدود بدون کاهش کیفیت مقیاس بندی شوند.

مزایای استفاده از SVG ها

چرا باید از تصاویر svg استفاده کنیم؟

مقیاس بندی Pixel-Perfect

ما قبلاً در این مورد توضیح بیشتری دادم، اما ما باید به سرعت در مورد بزرگ ترین مزیت استفاده از SVG نسبت به تصویر PNG یا JPEG فکر کنیم. گرافیک SVG به طور نامحدود مقیاس می یابد و در هر رزولوشن فوق العاده واضح باقی می ماند.

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

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

این یک مزیت اساسی دیگر است. با توجه به ماهیت تصاویر برداری، داده هایی که اندازه فایل را تعیین می کنند، لایه ها، جلوه ها، ماسک ها، رنگ ها و گرادیان های مورد استفاده هستند.

در مقایسه، تصاویر مبتنی بر bitmap تک تک پیکسل های موجود در تصویر و همچنین تعداد رنگ های مورد استفاده را ثبت می کنند. مسلماً این کمی پیچیده تر از آن است، اما نکته ای که باید از آن صرفنظر کرد این است که در بیشتر موارد، یک فایل تصویری بر اساس bitmap گران تر از یک نسخه SVG خواهد بود.

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

مزیت استفاده از فرمت svg در کاهش حجم عکس

با استفاده از CSS می توانید به فرمت SVG استایل بدهید

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

مناسب برای سئو

همانطور که در ابتدای این پست اشاره کردم، SVG ها مبتنی بر XML هستند که نشان می دهد کلمات کلیدی، توضیحات و لینک ها می توانند محتوا را برای موتور های جستجو بیشتر تشخیص داده و دسترسی کلی را بهبود بخشند.

با تصاویر مبتنی بر bitmap، شما فقط ویژگی های “title” و “alt” را برای سئو در اختیار دارید.

SVG ها را می توان در HTML جای داد

برخلاف سایر انواع تصویر که باید از سرور به عنوان منبع خارجی بارگیری شوند، SVG ها می توانند در کد HTML جاسازی شوند. بنابراین چرا این مورد مزیت محسوب می شود؟

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

SVG ها اثبات پیشرفت های بیشتر در آینده هستند

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

همه این پیشرفت های فناوری فوق العاده بودند. اما این بدان معناست که اکثر تصاویر JPEG یا PNG مورد استفاده در وب سایت ها از وضوح کافی و بالایی برخوردار نیستند و شبیه عکس فوق العاده بی کیفیتی در دستگاه های کوچک تر به نظر می رسند.

راه حل آن چیست؟ نمونه دیگری از تصویر را با وضوح دو برابر ایجاد کنید و برچسب آن را “@2x” بگذارید. اکنون تصویر در آیفون های جدید زیبا و واضح به نظر می رسد.

صفحه نمایش های جدید تر با تراکم پیکسلی بیشتر باعث ایجاد مشکلات اضافی برای طراحان و توسعه دهندگان می شود. ماهیت SVG به این معنا است که دیگر عوارضی از این قبیل ایجاد نمی شود زیرا دستگاه های رده بالا به وضوح 8K و فراتر از آن می رسند.

فرمت های svg می توانند انیمیشن شوند

اینجاست که SVG ها واقعا برتری دارند. داشتن قابلیت ادیت مستقیم SVG ها با ویرایشگر متن به این معنی است که می توان آن ها را متحرک کرد و عناصر تعاملی بهینه شده ای به سایت شما اضافه کرد. این انیمیشن ها می توانند به سادگی یا پیچیدگی دلخواه شما باشند. مشابه HTML، فرمت SVG ها نیز توسط DOM (مدل شیء سند) نشان داده می شوند، به این معنی که می توان آن ها را با جاوا اسکریپت نیز دستکاری کرد.

اگر به انیمیشن های SVG علاقه دارید، حتما به مقاله جامع و کامل آموزش ساخت انیمیشن svg مراجعه کنید. در ادامه یک نمونه انیمیشن است که توسط وبسایت deliciousbrains.com ایجاد شده است و بهترین قسمت آن اینست که حجم فایل 11 کیلو بایت است.