اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

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

تصویر(1)

فایل SVG چیست؟

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

مقایسه تصاویر پیکسلی و برداری

اگر فرمت‌ تصاویری که امروزه در اینترنت استفاده می‌شوند، مانند PNG، JPEG، SVG، GIF، PDF، TIFF و غیره را بررسی کنید، متوجه می شوید که این فرمت ها به دو دسته زیر تقسیم می شوند:

• گرافیک‌ های پیکسلی (Raster Graphics)
• گرافیک‌ های برداری (Vector Graphics)

رایج‌ترین فرمت‌ های تصویری، JPEG و PNG هستند. این دو فرمت نمونه ای از فرمت های گرافیک پیکسلی می باشند، یعنی اطلاعات تصویر را در شبکه ای متشکل از مربع‌ های رنگی به نام بیت‌ مپ (Bitmap) ذخیره می‌ کنند. این مربع‌ ها در بیت‌ مپ ترکیب می‌ شوند تا تصویر کلی را شکل دهند.

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

تصویر(2)

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

نحوه عملکرد فایل SVG

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

تصویر(3)

وقتی فایل مربوط به دایره فوق را در یک ویرایشگر کد باز می‌ کنید، کد XML زیر ظاهر می‌ شود:

تصویر(4)

همانطور که مشاهده می کنید، تنها یک خط کد جهت ترسیم دایره نیاز است. به جای تنظیم رنگ هر مربع در یک شبکه، برای XML فقط باید رنگ (fill:#f4795b) و شعاع ("r="20) وارد شود.

هنگامی که یک فایل SVG مانند نمونه فوق ارائه می‌ گردد، مرورگر وب XML را دریافت کرده و به عنوان یک تصویر وکتور روی صفحه نمایش می‌ دهد. تمام مرورگرها و نرم‌ افزارهای ویرایش، فایل های SVG‌ را به همین روش نمایش می‌ دهند. فایل XML به زبان انگلیسی نوشته شده است. فایل‌ های SVG مبتنی بر متن بوده و برای انسان قابل خواندن می باشند. بنابراین می توانید با ویرایش مستقیم XML، ظاهر یک تصویر وکتور را تغییر دهید. برای مثال، مقدار fill را تغییر داده تا رنگ دایره عوض شود:

تصویر(5)

البته با وکتورها می‌ توانید تغییرات زیادی ایجاد نمایید. برای مثال به طرح زیر دقت کنید:

تصویر(6)

همانطور که مشخص است تنها با یک دایره مواجه نیستید. این گرافیک شامل ۳۰ خط بوده که توسط ۳۰ نقطه به هم متصل شده‌ اند.

تصویر(7)

تصویر زیر فایل SVG را در یک ویرایشگر متن نمایش می دهد:

تصویر(8)

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

تصویر(9)

نمونه ای دیگر را در تصویر زیر مشاهده می کنید:

تصویر(10)

نحوه باز کردن یک فایل SVG

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

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

به طور کلی، استفاده از فرمت SVG برای تصاویری که جزئیات کمتری نسبت به عکس‌ ها دارند، توصیه می شود. در ادامه چند کاربرد این نوع از فرمت را مشاهده می‌ کنید:

آیکون ها

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

لوگوها

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

تصاویر

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

تصویر(11)

انیمیشن ها و عناصر تعاملی

با استفاده از JavaScript، می‌ توانید SVG های داینامیک طراحی کنید. SVG های متحرک می‌ توانند ظاهر صفحات شما را جذاب کرده یا در انیمیشن‌ های مربوط به رابط کاربری مورد استفاده قرار گیرند.

اینفوگرافیک ها و تجسم داده ها

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

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

چگونه می توان فایل SVG را ایجاد کرد؟

می‌ توانید فایل‌ های SVG خود را با استفاده از Adobe Illustrator ایجاد کنید یا آنها را از سایت های ارائه دهنده این فرمت، به صورت آنلاین خریداری یا دانلود نمایید.

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

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

1. مقیاس‌ پذیری بی‌ نهایت

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

2. حجم کمتر فایل ها

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

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

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

3. سفارشی سازی

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

4. سازگاری اسکریپت

کنسرسیوم شبکه جهانی وب (W3C) فرمت SVG را به عنوان فرمتی استاندارد برای گرافیک‌ وب که با سایر استانداردهای وب مانند HTML، CSS، JavaScript و DOM سازگار می باشد، معرفی کرده است. می‌ توانید تصاویر SVG را به کمک اسکریپت‌ ها کنترل کنید. اسکریپت‌ ها امکان نمایش محتوای پویا از جمله انیمیشن‌ ها و نمودارهای تعاملی را فراهم می‌ کنند. این سطح از کنترل روی تصاویری با فرمت‌ های JPEG و PNG امکان‌ پذیر نیست.

5. دسترسی و بهینه سازی موتورهای جستجو

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

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

معایب استفاده از فایل SVG

فرمت SVG کاربردهای زیادی دارد اما همیشه بهترین گزینه برای فرمت تصاویر سایت نیست. در ادامه به برخی از معایب این فرمت پرداخته شده است:

1. ناکارآمد برای تصاویر با جزئیات زیاد

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

تصویر(12)

2. دانش کدنویسی

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

3. نگرانی های امنیتی

فایل‌ های SVG می‌ توانند شامل اسکریپت‌ هایی که در مرورگر اجرا می‌ شوند، باشند. این ویژگی باعث می‌ شود آنها به راهی برای حملات "Cross-Site Scripting" تبدیل گردند که در آن مهاجم می تواند کدهای مخرب را درون وب‌ سایت شما قرار دهد. اگر فایل SVG را از یک منبع نامعتبر دانلود کنید، ممکن است حاوی اسکریپتی باشد که اطلاعات کاربران را کپی می کند. در این صورت سایت با مشکل مواجه خواهد شد.

نحوه ساخت یا ویرایش یک فایل SVG

برای ایجاد فایل‌ های SVG نیازی به داشتن دانش XML یا برنامه‌ نویسی نیست. می‌ توانید تصویر خود را در یکی از اپلیکیشن های مربوطه رسم کرده و با پسوند SVG ذخیره کنید. پس از ذخیره فایل SVG، چند راه برای اضافه کردن آن به وب‌ سایت وجود دارد. اگر با سیستم مدیریت محتوا (CMS) کار می‌ کنید، می‌ توانید SVG را مانند سایر تصاویر به صفحه اضافه نمایید.

اگر با HTML سروکار دارید، روش های زیر پیش روی شما خواهد بود:

• Inline SVG: در این روش کد SVG به‌ طور مستقیم درون HTML قرار داده می شود. Inline SVG بیشترین میزان کنترل بر SVG را در اختیارتان قرار می دهد. همچنین می توانید رنگ و ویژگی‌ های دیگر آن را با CSS و جاوا اسکریپت تغییر دهید. فایل SVG را در یک ویرایشگر متن باز کنید، کد آن را کپی کرده و سپس در فایل HTML خود قرار دهید.
• تگ <img>: می‌ توانید فایل SVG را با استفاده از تگ <img> در سایت خود درج کنید. امکان ایجاد تغییرات روی SVG با CSS و جاوا اسکریپت در این روش محدودتر می باشد اما HTML مرتب تر باقی می ماند. 
• تگ <iframe>: برخی مواقع، ممکن است تمایل داشته باشید از iframe برای درج SVG استفاده کنید. این روش از وب‌ سایت شما در برابر حملات Cross-site Scripting محافظت می‌ کند. همچنین، به کار بردن iframe برای SVG‌ های پیچیده توسط اسکریپت‌ های جاسازی‌ شده (embedded scripts) از تداخل با اسکریپت های پایه در وب‌ سایت شما جلوگیری می نماید.

نرم افزار ویرایش فایل SVG

می‌ توانید فایل SVG را به کمک ویرایشگر متن تغییر دهید اما این کار برای ویرایش مواردی مانند رنگ‌ ها، چندان مناسب نیست. بهتر است از نرم‌ افزارهای مناسب برای ویرایش وکتور آرت استفاده کنید. از جمله این نرم افزارها می توان به موارد زیر اشاره نمود:

• Sketch
• Figma
• Adobe Illustrator
• Inkscape
• Vectornator
• Vecteezy Editor
• macSVG

جمع بندی

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