استفاده از فایل SVG در وب سایت ها چندان رایج نیست. اما نیاز است که با آنها آشنا شوید و در صورت لزوم از ویژگی های مثبت آن بهره ببرید.
SVG یک وکتور گرافیکی مقیاس پذیر و نوع منحصربفردی از قالب تصویری است. برخلاف سایر فرمت های تصویری، SVG به پیکسل محدود نیست و در عوض از داده های برداری استفاده می کند. با استفاده از SVG، تصاویری به دست خواهید آورد که در هر ابعاد یا رزولوشن بدون افت کیفیت به نمایش در می آیند. از این رو استفاده از این فرمت کاربردی برای طراحان وب، جذاب به شمار می رود. بسیاری از کاربران برای جلوگیری از افت کیفیت تصاویر خود از این قالب تصویری استفاده می کنند. در این مقاله ما به طور کلی به این سوال پاسخ می دهیم که فایل SVG چیست و سپس نحوه استفاده از آن را به شما آموزش می دهیم.
فایل SVG چیست؟
SVG فایل گرافیکی بوده که با استفاده از بردار ساخته می شود. همانطور که می دانید بردار المانی جهت دار و مقیاس پذیر می باشد. از لحاظ تئوری می توان تقریبا هر نوع گرافیکی را با استفاده از مجموعه بردارها به وجود آورد.
نوع دیگری از فایل تصویری به نام png وجود دارد که برای استفاده در وب مناسب است. اگر میخواهید تصویر مشابه ای به صورت برداری ایجاد کنید باید از کدهای XML استفاده کنید. کد زیر نیز می تواند یک نتیجه یکسان را نشان دهد:
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1" baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/> <rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue" stroke="black" stroke-width="8"/> </svg> |
از نظر تئوری اگر این کد را در یک فایل HTML قرار دهید، همانند تصویر PNG بالا به شما می دهد. اگرچه هر دو تصویر یکسان به نظر می رسد، اما فایل SVG مزایای بیشتری دارد، به عنوان مثال فایل SVG هنگام تغییر ابعاد کیفیت خود را حفظ می کند.
اگر ابعاد تصویر PNG را مدام تغییر دهید، کیفیت آن افت شدیدی خواهد کرد. گرافیک مبتنی بر پیکسل این عیب بزرگ را دارد و تخریب در آن سریع تر آشکار می گردد. با این حال، SVG در هر رزولوشن خوب به نظر می رسد.
چرا از پرونده SVG استفاده کنیم؟
بسیاری کاربران از فرمت هایی مانند png و jpeg در وب سایت خود استفاده می کنند که مانند SVG چند منطوره نیست. اگر یک عکس پیچیده برداری می خواهید، فرمت SVG بهترین انتخاب است. شما می توانید در موقعیت های زیر هم از این نوع فایل استفاده کنید:
طراحی لوگو – از آنجایی که آرم وب سایت و رسانه های اجتماعی در موقعیت های مختلفی استفاده می شود، نیاز به ابعاد مختلفی از آن بدون افت کیفیت دارید.
عناصر متحرک – برای متحرک سازی SVG ها می توانید از CSS استفاده کنید و به صورت کد در صفحات دلخواه قرار دهید.
نمودار – برای ایجاد نمودارهای مقیاس پذیر دارای انیمیشن از این فرمت استفاده کنید.
از آنجایی که SVG به صورت XML وجود دارد، قابل جستجو و هم قابل ایندکس شدن هستند. در نتیجه بازدیدکنندگان دسترسی بهتری به تصویر پیدا می کنند، البته اگر برچسب های صحیحی برای آن در نظر گرفته باشید.
نحوه ساخت فایل SVG
در مورد پرونده های SVG دو راه معمول برای ساخت وجود دارد. شما می توانید تصویر دلخواه خود را دریافت کنید و سپس آن را تبدیل نمایید. بیایید اول از روش دستی شروع کنیم، پس همراه ما باشید:
۱- یک پرونده SVG به صورت دستی ایجاد کنید.
ایجاد یک فایل SVG معمولا شامل نوشتن اطلاعات بردار قبلی نیست. آن کدهایی که در بالا ذکر کردیم، تنها مثالی برای نشان دادن مفهوم این فرمت بود. در عوض، شما مانند هر فرمت گرافیکی دیگر باید خروجی مورد نظر را به صورت SVG بگیرید. نرم افزارهای مدرنی بدین منظور طراحی شده که کار اصلی آن ها طراحی گرافیک است. برخی از گزینه های اصلی عبارتند از:
Adobe Illustrator,Photoshop, Animate و InDesign
Microsoft Visio
InkscapeGIMPدو
گزینه پایین به صورت متن باز می باشند. آن ها گزینه های خوبی برای ایجاد فایل SVG بدون پرداخت هزینه بوده و تمام نیازهای شما را برطرف می کنند.
اگر هیچ تجربه ای در زمینه طراحی گرافیک ندارید، ایجاد آرم یا هر المان گرافیکی دیگری چالش برانگیز است. در این حالت تنها تصویر دلخواه خود را دانلود کنید و با نرم افزارهای بالا تبدیل فرمت نمایید.
۲- استفاده از ابزار آنلاین
ابزارهای رایگان بسیاری برای تبدیل فرمت تصاویر وجود دارد که می توان از آن ها برای وجود آوردن فایل SVG استفاده کرد. اگر نمی خواهید از هیچگونه نرم افزاری استفاد کنید، ابزار آنلاین انتخاب مناسبی است. به عنوان مثال ما سایت Vector Magic را به شما معرفی می کنیم که از آن برای تبدیل انواع فرمت می توان استفاده نمود.
همینطور با این ابزار می توانید اصلاحات کوچکی را هم در تصویر به وجود آورید و خروجی SVG بگیرید.
نحوه استفاده از فایل SVG در وردپرس
استفاده از SVG چندان سخت نیست. افزودن یک پرونده SVG به وب سایت تنها با گرفتن کد و جایگذاری آن در یک سند HTML در هر نقطه از صفحه امکان پذیر است. خوشبختانه در حال حاضر تمام مرورگرهای مورد استفاده کاربران دنیای وب از فایل SVG پشتیبانی می کنند. سیستم وردپرس به صورت پیش فرض از فرمت SVG پشتیبانی نمی کند و اگر توانایی آپلود مستقیم به وردپرس را می خواهید، باید از افزونه هایی مانند Safe SVG استفاده کنید:
