آموزش ایجاد تصاویر svg

svg چیست و روش ساخت تصاویر svg

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

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

فرمت SVG چیست ؟

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

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

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

بهتر است بدانید که svg مخفف عبارت Scalable Vector Graphics می باشد که به معنای کلی ” گرافیک برداری مقیاس پذیر ” بوده  و این یعنی تصویری که ساختار و یا همان فرمت آن SVG بوده باشد وقتی به هر اندازه ی زوم شود کیفیت خود را از دست نخواهد داد در صورتی که از حجم بسیار پایینی برخوردار است. در واقع برخلاف سیستم های پیکسلی روش ذخیره سازی تصاویر با فرمت SGV به صورت مشخصات هندسی و منحنی می باشد و به همین دلیل وقتی تصاویر svg تغییر اندازه می دهد در کیفیت آن تغییراتی اتفاق نمی افتد که در کل خواص vector graphics به این صورت است. در واقع تصاویر تعریف شده به روش گرافیک برداری از خطوط و منحنی ها به نام بردارها تشکیل شده است که یک تعریف ریاضیاتی است.این نوع تصاویر جدای از رزولوشن هستند و به راحتی میتوان آن ها را بزرگ و کوچک کرد و بدون این که کیفیت آن ها دچار افت شوند در هر رزولوشنی مورد استفاده قرار داد.

دلیل بعدی استفاده از svg

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

مورد بعدی هم این که svg سازگاری بسیار خوبی هم با  css دارد که شما می توانید در زمان استایل نویسی وب سایت از svg به راحتی استفاده کنید و حتی بازدهی بهتری هم نسبت به png  و یا  jpeg و … دارد. به دلیل این که svg هم مثل html یک علامت گذاری ” مارکاپ ” است بنابراین میتواند خیلی راحت ID و یا  Class داشته باشد و به همین دلیل به راحتی در کد نویسی css کار را آسانتر می کند. این قابلیت برای ترسیمات برداری دست شما را باز می گذارد که میتوانید کارهای بسیار بیشتری در طراحی گرافیکی انجام داده و به عبارتی ساده تر مانور بیشتری رو میتوانید بر روی تصاویر با استفاده از css داشته باشید.

از دیگر راه هایی که باعث افزایش سرعت سایت می شود در خواست http کمتر می باشد و وقتی که شما از تصاویر با فرمت svg استفاده می کنید از سمت تصاویر این درخواست ” http ” وب سایت شما  کاهش پیدا می کند که همین مورد هم دو مزیت خوب دارد که یکی فشار بر هاست و سرور شما کمتر خواهد بود و در نتیجه هم سرعت لود وب سایت بالاتر خواهد رفت. اگر بخواهیم فنتی توضیح بدهیم به این صورت است که وثتی شما از فرمت هایی مثل png , jpeg و … استفاده می کنید وقتی وب سایت میخواهد لود شود بارگذاری تصاویر از طریق تگ img انجام می شود که در این حالت مرورگر برای نمایش ان تصویر یک درخواست http به سرور ارسال می کند تا سرور آن تصویر را برای مرورگر ارسال کند تا مرورگر بتواند در سایت نمایش دهد و وقتی حجم تصویر بالا باشد و همچنین تعداد زیاد آن هم از نوع پیکسلی دیگر خودتان قضاوت کنید چه بلایی  سر سرور می آید !

این درحالی است که اگر در وب سایت خود  از تصاویر svg استفاده کرده باشید برای استفاده از svg مرورگر این تصاویر زا در فایل های html دریافت می کند و نیازی به ارسال http های  مجزا برای تصاویر نیست  و به این ترتیب هم سریعتر بارگذاری تصاویر انجام می شود و هم این که فشار بر روی سرور بسیار کمتر خواهد بود .در مورد حجم تصاویر svg هم همین که بدانید بسیار کم حجم بوده و در ضمن  عملیات فشرده کردت تصویر بر روی فرمت svg بسیار بهتر انجام می گیرد.

تصاویر svg را به چه صورت تهیه کنیم و به چه شکل تصاویر پیکسلی را به svg تبدیل کنیم ؟

خب بعد از مطالعه مطالب بالا و به دست آوردن اطلاعات کافی در مورد فرمت svg حالا سوالی که برای همه پیش می آید این است که به چه شکل تصاویر svg را ایجاد کنیم و تصاویر فعلی هم که به صورت png هستند و یا jpeg را به چه شکل به svg تبدیل کنیم. پاسخ این سوالات را به صورت دسته بندی در ادامه قرار داده ایم .

اول ایجاد تصاویر با فرمت svg از ابتدا

در این جا میخواهیم روش ایجاد تصاویر svg رو بررسی کنیم که از اول  تصاویر خود را با فرمت svg تولید و ذخیره کنیم .اگر بخواهیم با استفاده از فتوشاپ به تولید تصاویر svg بپردازیم شاید برای افرادی که تازه کار هستند کمی پیچیده و خسته کننده بوده باشد و به همین دلیل ما در این جا روش های بسیار ساده را بیان  می کنیم تا هدف ما که همواره گسترش وب سایت و کسب کار انلاین است به دست بیاید و خیلی درگیر مسائل فنی نشویم .

در ابتدا  بهتر است بدانید که شما قادر هستید به صورت آنلاین و با استفاده از ابزارهای آنلاین به تولید – ویرایش تصاویر svg بپردازید و یا تصاویر فعلی خود که با فرمت های png و   jpeg هستند را به svg تبدیل کنید. برای شروع کار اول باید  به آدرس https://vectr.com و سپس کار خود را شروع کنید که کار کردن در این سایت بسیار راحت است و مبتدیان به راحتی میتوانند تصاویر خود را ایجاد کرده و ذخیره نمایید. در ادامه کمی ابزارهای این نرم افزار آنلاین را برای شما توضیح می دهیم :

در ابتدا بعد از وارد شدن در سایت باید ثبت نام کنید که در زیر پنجره ی اصلی سایت نواری ظاهر می شود که عبارت Login   و یا  sign up را نمایش میدهد که با کلیک بر روی sign up میتوانید با وارد کردن user name  و پسورد و …. در سایت ثبت نام کنید و این کار بسیار ساده ای هست.

نرم افزار آنلاین تصاویر svg

خب در ابتدا بعد از وارد شدن به  سایت معرفی شده  می توانید برای دانلود اپلیکیشن قابل نصب بر روی کامپیوتر روی بخش مشخص شده در تصویر کلیلک کنید و سپس همانطور که مشاهده می کنید پنجره هایی باز می شود که میتوانید بر اساس سیستم عامل خود که وینوز- لینوکس و … باشد نرم افزار را دانلود کنید ، این در زمانی است که نمی خواهید تحت وب کار کنید و میخواهید که در کامپیوتر خودتان کار را انجام دهید.

روش ایجاد تصاویر وکتور

موضوع مهم این که چه از اپلیکیشن تحت ویندوز در کامپیوترتون استفاده کنید و یا به صورت آنلاین از این نرم افزار استفاده کنید تمامی محیط و ابزارها  به یک شکل است و هیچ فرقی  باهم ندارند. خب بعد  از این که نوع کارتون رو انتخاب کردید ( استفاده به صورت آنلاین و یا آفلاین ) وارد محیطی میشویم که در تصویر زیر می بینید.اگر روی بخشی که در تصویر زیر مشخص شده کلیک کنید میتونید فایل جدیدی رو ایجاد کنید که در واقع همان “new file “ هست.

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

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

اپلود تصاویر در وردپرس

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

هوش مصنوعی گوگل

بعد  از کلیک بر روی export پنجره ی زیر باز می شود که در داین پنجره همان طور که مشخص شده میتوانید فرمت svg را مشاهده کنید ف در نهایت با کلیک بر روی دانلود میتوانید تصویر را ذخیره کرده و مورد استفاده قرار دهید. در این تصویر در کادر شماره ۱ نوع فرمتی که قرار است دریافت کنید را مشاهده میکنید و در کادر شماره ۲  میتوانید با کلیک بر روی  Download تصویر را دریافت کنید .

خروجی فرمت svg برای وب سایت

موضوع مهم !!!

بعد از این که تصویر را دانلود میکنید و در کامپیوتر ذخیره می شود و وقتی که به بخش که تصویر ذخیره شده است وارد می شوید با تصویر زیر مواجه می شید،

آموزش ایجاد تصاویر وکتور

که آیکن مرورگر نمایش داده می شود ( بنابر سیستم شما و نوع مرورگر این آیکون می تواند متفاوت باشد مثلا یا  آیکون کروم را مشاهده کنید (مثل تصویر بالا ) یا ممکن است ایکون فایرفاکس یا ببینید و یا هر آیکن از مرورگری که در سیستمتان نصب است .در نظر داشته باشید ماهیت فرمت svg به گونه ای است که قبل  از نرم افزارهای  گرافیکی توسط مرورگرها شناسایی میشوند و برای همین دلیل تصویر  در ابتدا در کامپیوترتان به شکل ایکن مرورگر نمایش داده می شود که یک مسئله ی طبیعی بوده و نگران این قضیه نباشید و طبق معمول با روش عادی تصاویر را در سایت وردپرسی اپلود و مورد استفاده قرار بدید.

برای این که  وب سایت وردپرسی شما هم از اجرای تصاویر با فرمت svg پشتیبانی کند شما خیلی راحت می توانید از یک پلاگین استفاده کنید که پلاگین svg برای وردپرس را هم میتوانید از این جا دانلود نمایید. روش نصب پلاگین در وردپرس هم بسیار آسان است و کار خاصی ندارد.

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.