تمدید شد! جشنواره تخفیف‌های تابستانی فقط تا پایان ۲ مرداد - کد تخفیف ۲۵% : SUMMER 

8 تا از بهترین کتابخانه های SVG

دوشنبه ۱۰ اردیبهشت ۹۷ توسط محمدسینا مرادی

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

شما می توانید آیکون های زیبایی را با فرمت SVG طراحی کرده و آنها را بدون اینکه کیفیتشان افت کند تغییر اندازه دهید! این یکی از بزرگترین مزایای فرمت SVG با توجه به افزایش روزافزون صفحه نمایش های رتینا می باشد!

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

1.اس وی جی (SVG.js)

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

حجم آرشیو gzip آن خیلی سبک می باشد به طوری که تقریبا 16 کیلوبایت است و حدود 62 کیلوبایت برای استفاده در حالت minify شده. کلا این حجم زیاد است اما در مقایسه با بقیه کتابخانه ها انتخاب خوبی است.

زمانی که با این کتابخانه کار خود را شروع میکنید میتوانید بفهمید که چقدر راه اندازی آن آسان و بدون دردسر بوده است و همچنین این کتابخانه با پشتیبانی npm نیز همراه است.

در هر صفحه ای که شما آن را باز خواهید کرد مطمئنا کد های اچ تی ام ال (HTML) و جاوا اسکریپت (Java Script) زیادی را میبینید این کد ها برای راهنمایی شما در شروعتان است و خیلی هم کاربردی هستند.به علاوه، شما میتوانید نسخه های پیاده سازی شده و میزبانی شده توسط JSFiddle را که در مستندات اشاره شده دنبال کنید با چشم خودتان ببینید که این کتابخانه چگونه عمل میکند.

01-svgjs-homepage

2.اسنپ (Snap.svg)

یکی دیگر از کتابخانه هایی که میخواهیم به شما معرفی کنیم و بسیار هم محبوب است Snap.svg می باشد. این کتابخانه‌ی جاوااسکریپت بدون-وابستگی(zero dependency)می باشد و با یک جامعه پشتیبانی نسبتا وسیع که از طریق وب سایت هایی مانند اسلک ارتباط دارند همراه است.

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

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

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

02-snap-svg-homepage

3.بونسای (Bonsai.js)

اگر به یک کتابخانه گرافیکی نیاز دارید من به شما اکیدا Bonsai.js را پیشنهاد میکنم. چندین سال است این کتابخانه در دست عموم قرار گرفته و از کتاباخانه های دارای پشتیبانی خوب بشمار میرود که توسط یک گروه مرکزی مدیریت می شود. 

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

باید این را هم ذکر کنیم که بر مسیر های svg کنترل کامل دارید و همراه با افکت هایی که از keyframe استفاده میکنند و در کتابخانه بونسای موجود هستند.

این را نیز ذکر میکنیم که بر مسیر های SVG کنترل کامل دارید و میتوانید از انیمیشن افکت هایی که از keyframe استفاده میکنند و در کتابخانه بونسای نیز موجود هستند مصرف کنید.

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

03-bonsai-js-script

4.پیپر (Paper.js)

Paper.js خود را چاقوی مسلح سوئیس از اسکریپت گرافیکی بردار می نامد. و در بسیاری از موارد این کتابخانه در پول دقیق است.

به طور پیش فرض Paper.js در بالای عناصر بومی HTML5 با استفاده از مدل DOM خود،آنها را دستکاری میکند. شما می توانید منحنی های بیسیم را درست درون کد ویرایش کنید که کنترل زیادی را به شما میدهد.

اگر کنجکاو شدید که این کتابخانه چگونه کار میکند حتما صفحه نمونه ها را ببینید.

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

04-paperjs-script-homepage

5.رافایل (Raphaël)

این کتابخانه یک جاوا اسکریپت کلاسیک برای دستکاری گرفیک و اسکریپت SVG ها می باشد. Raphaël تحت مجوز MIT کاملا رایگان است و در GitHub برای دانلود در دسترس است.

این نوشتار در حال حاضر در v2.2.1 است و دارای پایگاهی بسیار بزرگ از همکاران است. همه کد ها در جاوا اسکریپت ساده اجرا می شوند، اما اگر کد گذاری سریع تر را ترجیح دهید، می توانید از TypeScript استفاده کنید.

هر گرافیک در صفحه، بخش جداگانه DOM خود را می گیرد و می تواند مثل یک عنصر DOM دستکاری شود. توابع سفارشی در Raphael این کتابخانه را به کتابخانه ای عالی برای مبتدیانی تبدیل کرده است که فقط در حال یادگیری اصول HTMl 5 هستند.

میتوانید دمو های این کتابخانه جذاب را در این صفحه ببینید.

05-raphael-example-graph

6.تو (Two.js)

اسکریپت Two.js کد-باز و یک API سفارشی 2D طراحی شده در جاوا اسکریپت میباشد.

این کتابخانه فقط برای عناصر بومی استفاده نمی شود، گرچه برای این نوع طرح ها بهترین کار است اما شما می توانید Two.js را برای دستکاری چند فرمت رایج در وب مانند: SVG، Canvas و WebGL استفاده کنید.

اگر شما با جاوا اسکریپت میانه خوبی ندارید میتوانید این کتابخانه را بدون دردسر یاد بگیرید. این به این معنی است که شما می توانید با این کتابخانه خیلی راحت کار کنید.

بد نیست که شما هم نگاهی به صفحه نمونه ها بیندازید.

06-twojs-example-demo

7.ولوسیتی (Velocity.js)

از لحاظ فنی، کتابخانه Velocity.js یک کتابخانه رایگان انیمیشنی است، اما از SVG ها هم پشتیبانی می کند و آن را انتخابی فوق العاده برای تمام انیمیشن های UI / UX می کند.

شما همچنین می توانید Velocity را با jQuery یا خودتان با استفاده از وانیل جاوا اسکریپت اجرا نمایید.

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

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

07-velocity-js-script-homepage

8.ویوس (Vivus.js)

با استفاده از Vivus.js شما می توانید یک نوع بسیار خاصی از انیمیشن ها را ایجاد کنید.

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

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

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

08-vivus-js-homepage


کلیدواژه: svg library svg library کتابخانه svg

منابع:

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.