SVG چیست و تصاویر SVG چه تاثیری بر سئو سایت دارند؟

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

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

SVG چیست؟

از نظر فنی فرمت SVG مخفف کلمات Scalable Vector Graphics بوده و در فارسی به گرافیک برداری مقیاس‌پذیر معنی می‌شود. این فرمت یکی از قالب‌های تصویربرداری بر اساس XML است و عمدتا در وب یافت می‌شود. این تصاویر دارای کاربردهای مشابهی با دیگر فرمت‌های تصویر اعم از 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) هستند که یعنی از مقدار مشخصی پیکسل تشکیل شده‌اند. به طور معمول این مورد بدین معناست که با بزرگ‌شدن تصویر، کیفیت آن تا مقدار قابل توجهی کاهش پیدا می‌کند. ولی در رابطه با تصاویر SVG این مورد متفاوت است. این دسته از تصاویر، برداری (Vector) هستند، یعنی به جای این که از پیکسل تشکیل شده باشند، از اشکال تشکیل شده‌اند. در نتیجه زمانی که اندازه تصویر بزرگ یا کوچک می‌شود، تفاوتی در کیفیت آن‌ها به وجود نمی‌آید. این مورد معجزه SVG است که توانسته مقیاس‌بندی تصاویر در سایت‌های اینترنتی را تا حد زیادی آسان‌تر و باکیفیت‌تر کند.

مزایای استفاده از تصاویر SVG

تصاویر SVG دارای مزایای بسیاری هستند که کاربران را ترغیب به استفاده از آن‌ها می‌کنند. در ادامه با مهم‌ترین این مزایا آشنا خواهید شد.

• مقیاس‌بندی Pixel‌Perfect

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

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

• حجم کمتر

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

به جز کوچک‌بودن اندازه فایل‌های تصاویر SVG، می‌توان با استفاده از gzip آن‌ها را فشرده کرد و سایز تصویر را تا حد زیادی کمتر کرد. در صورتی که فشرده‌سازی gzip فعال باشد، تعداد بایت‌های کمتری از سمت سرور یا CDN باید ارسال شود.

• استایل‌دهی به فرمت SVG با استفاده از CSS

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

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

• SVGها نشان‌دهنده پیشرفت در آینده هستند

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

• فرمت‌های SVG می‌توانند به انیمیشن تبدیل شوند

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

• تعامل‌پذیری ساده از طریق جاوااسکریپت

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

تاثیر SVG بر روی سئو سایت چیست؟

از آن‌جایی که تصاویر SVG مبتنی بر XML هستند و XML قابل خواندن است، بنابراین این دسته از تصاویر قابلیت خواندن و تجزیه و ایندکس‌شدن توسط موتورهای جستجو را دارند و همین امر موجب می‌شود محتوا برای موتورهای جستجو قابل تشخیص باشد و دسترسی کلی را بهبود ببخشد. خوب است بدانید که از آگوست ۲۰۱۰ گوگل محتوای درون SVG را هم ایندکس می‌کند. وجود این ویژگی در SVGها بسیار موثرتر از Alt در تگ‌های img است.

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

آموزش نحوه ساخت تصویر SVG و قرار دادن آن در سایت

برای ساخت تصاویر SVG نیاز به برنامه‌های طراحی برداری دارید که از این فرمت پشتیبانی کنند. در حال حاضر بهترین و کامل‌ترین برنامه‌ای که برای ساخت این دسته از تصاویر می‌توان استفاده کرد، Adobe Illustrator است. گفتنی است از برخی برنامه‌های رایگان مانند Inkscape یا GIMP که دارای امکانات خوبی هستند نیز می‌توان استفاده کرد و در نهایت خروجی SVG از آن‌ها گرفت.

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

• استفاده از <img>

در این روش، آدرس تصویر با پسوند svg را در تگ img قرار می‌دهیم. زمانی که از این تگ استفاده می‌کنیم، دو ویژگی Width و Height تصویر، در اندازه مشخص‌شده در کد SVG نمایش داده می‌شوند. ولی با استفاده از CSS می‌توان عرض و ارتفاع را تغییر داد. نکاتی که باید در حین استفاده از این روش مد نظر داشت:

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

• استفاده از <picture>

این روش نیز مانند روش پیشین است با این تفاوت که می‌توان یک جایگزین (Fallback) برای فایل SVG درون تگ picture در نظر گرفت تا زمانی که مرورگر نمی‌تواند تصویر SVG را نمایش دهد، تصویر پشتیبان به نمایش دربیاید. نکات مرتبط به استفاده از این روش نیز مانند روش پیشین است.

• • استفاده از background‌image
  • از دیگر روش‌های نمایش فایل SVG این است که تصویر را به عنوان پس‌زمینه یک عنصر قرار دهید.
  • نکاتی که باید در حین استفاده از این روش مد نظر داشت نیز مانند روش اولی است.

• استفاده از روش Inline SVG

در این روش کافی‌ست کد SVG را در هر کجای سند HTML که نیاز است، قرار دهیم.
نکاتی که باید در حین استفاده از این روش مد نظر داشت:

• • مرورگر تصویر را کش نمی‌کند، مگر این که فایل HTML کش شود.
  • با استفاده از این روش تعامل با CSS برقرار می‌شود.
  • انیمیشن‌های CSS در این حالت بر روی SVG فعال می‌شوند.
  • می‌توان برای SVG مورد نظر اسکریپت نوشت.
  • تمام مرورگرهایی که از HTML5 پشتیبانی می‌کنند، فایل SVG را نمایش می‌دهند.
  • تنها مشکلی که در رابطه با این روش دیده می‌شود این است که در وسط کدهای مرتب HTML، یک تکه کد طولانی و نامرتب دیده می‌شود که می‌تواند مشکلاتی را برای نگهداری پروژه به وجود بیاورد.

• استفاده از <object>

یکی از روش‌های خوب برای نمایش SVG، استفاده از <object> است. با این روش درون DOM کدهای Inline SVG در بین تگ object نمایش داده می‌شود.
نکاتی که باید در حین استفاده از این روش مد نظر داشت:

• • مرورگر تصویر را کش می‌کند.
  • می‌توان به صورت پیش‌فرض جایگزینی برای فایل SVG قرار داد که این جایگزین هم به صورت تصویر و هم به صورت متن می‌تواند باشد.
  • می‌توان برای فایل SVG اسکریپت نوشت.

• استفاده از <iframe>

این روش شباهت زیادی به روش قبلی داشته و همان خصوصیات را دارد ولی به طور کلی استفاده از تگ iframe پیشنهاد نمی‌شود و بهتر است از همان object استفاده کنید.

• استفاده از <embed>

این روش نیز شباهت بسیاری به روش استفاده از <object> دارد ولی باز هم مانند روش قبل استفاده از آن پیشنهاد نمی‌شود.
در رابطه با تمامی روش‌ها بهتر است این نکته را مد نظر داشته باشید که در صورتی که قرار است از تصویر SVG به عنوان یک تصویر ساده و بدون تعامل استفاده شود، بهتر است روش‌های <img> و background‌image انتخاب شوند. در غیر این صورت اگر قرار است هر نوع عملیاتی بر تصویر SVG اعمال شود، بهتر است روش‌های <object> و Inline SVG انتخاب شوند.

جمع‌بندی

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