وب سایت آموزشی آرتور

شرکت در این دوره
لینک با موفقیت کپی شد !
صفحه اصلی آرشیو دوره ها دوره رایگان آموزش SVG و Canvas

آموزش کاربردی SVG و Canvas


 

SVG چیست ؟

کلمه Svg مختصر شده عبارت گرافیک بردار مقیاس پذیر (Scalable Vector Graphics) است.مقیاس پذیر یعنی بیننده می تواند اندازه تصویر را کم یا زیاد کند بدون اینکه کیفیت کم شود. دلیل این اتفاق این است که گرافیک برداری به وسیله اعداد تعریف می شود نه به وسیله پیکسل. کم وزیاد شدن اندازه تصویر یعنی ضرب و تقسیم اعدادی که شکل های svg را تعریف می کنند. با دوره آموزش svg می توانید کار با این فرمت شگفت انگیز را یاد بگیرید. 

Svg یک فرمت تصویری فوق العاده قدرتمند می باشد. با این فرمت گرافیکی می توانید شکل های خاصی را با زبان XML ایجاد کنید. برای رسم تصاویر برداری دوبعدی از این فرمت استفاده می شود.این فرمت گرافیک برداری برای رسم انواع نمودار ها مفید است. برای نمونه:

چرا باید SVG را یاد بگیرم ؟

این تصاویر با هر بار بزرگنمایی صفحه وب کیفیت خود را از دست نمی‌دهند و در موارد مختلفی، از جمله: رسم توابع ریاضی، طراحی انیمیشن، ساخت انواع طرح‌های نرم‌افزاری تحت وب مانند: اسلایدر و غیره کمک شایانی می‌کند. علاوه بر این، SVG به سادگی قابلیت ارتباط با زبان‌های برنامه‌نویسی تحت وب گوناگون، مانند: PHP, jQuery, CSS و غیره را دارد و همچنین از آن در (Content Management System) CMSهای مختلف مانند وردپرس (WordPress) می‌توان استفاده نمود. در حال حاضر اکثر مرورگرها از SVG پشتیبانی می‌کنند، لذا تسلط برنامه‌نویسان و توسعه‌دهندگان وب بر SVG، سبب پیشرفت کیفیت و کارآیی پروژه‌های نرم‌افزاری آن‌ها می‌گردد.

 

دوره آموزش SVG و Canvas

برای گذراندن دوره آموزش کار با svg لازم است زبان HTML را بلد باشید و با زبان Css نیز آشنایی داشته باشید در صورتی که با این دو زبان آشنا نیستید پیشنهاد می شود دوره آموزش جامع و رایگان HTML و دوره آموزش جامع css را بگذرانید. در این دوره با تگ های مهم Svg به طور کامل آشنا خواهید شد و طریقه استفاده از آنها را یاد خواهید گرفت. این دوره به شما کمک می کند که بتوانید اشکال و تصاویر مورد نیاز خود را به وسیله Svg رسم کنید.

در ضمن برای این که بتوانید قسمت Canvas را به خوبی متوجه شوید باید مقدار کمی جاوا اسکریپت بدانید که این را هم میتوانید به صورت رایگان به قسمت های ابتدایی از دوره آموزش جامع جاوا اسکریپت آموزش ببینید.

 

تفاوت بین SVG و Canvas

SVG در حقیقت یک زبان برای تعریف گرافیک دو بعدی در xml است. Canvas گرافیک دو بعدی رسم می کند اما توسط جاوا اسکریپت.

تگ <svg> برپایه xml کار می کند، این مسئله باعث می شود هر عنصر داخل <svg> در dom قابل دسترس باشد. شما می توانید یک event جاوا اسکریپت را برای هر عنصر داخل آن تعریف کنید.

در تگ <svg>، هر شکل به عنوان یک شی در نظر گرفته می شود. اگر خواص یک شی موجود در svg تغییر کند، مرورگر به صورت خودکار آن رسم شکل را به روز می کند.

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


1348 بازدید
yasershariati98
yasershari..

1 سال پیش

سلام استاد
یه پیشنهاد دارم
با توجه به اضافه شدن این دوره به لیست دوره های آرتور لطفا سعی کنید چارت آموزشی سایت رو مطابق با همین دوره بروز کنید
ممنون

yasershariati98
رضا کوهساری

1 سال پیش

سلام بله حتما

yasershariati98
yasershari..

1 سال پیش

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

yasershariati98
رضا کوهساری

1 سال پیش

سلام فعلا تنها راه اطلاع رسانی صفحه اینستاگرام آرتور می‌باشد. Rtor.ir

afshin
afshin

1 سال پیش

سلام وقت بخیر
چرا vs code تگ های داخل svg رو بهم پیشنهاد نمیده و باید خودم تگ ها را بنویسم؟

afshin
رضا کوهساری

1 سال پیش

سلام vs code ادیتور مورد علاقه من نیست و اطلاعی از این قضیه ندارم ولی صد در صد راه حلی وجود دارد که در صورت آپدیت دوره این قضیه رو هم بررسی میکنیم.

afshin
afshin

1 سال پیش

سلام وقت بخیر
آیا svg همه کارهای convas رو برامون انجام میده؟
آیا میتونیم svg و جاواسکریپت رو باهم استفاده کنیم؟مثلا با استفاده از 10svg تا دایره رندوم رو با هر بار رفرش سایت تولید کنیم ؟

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

afshin
رضا کوهساری

1 سال پیش

سلام بله شما اگر جاوا اسکریپت رو بدانید میشه تمامی کارها رو انجام داد چون Svg هم همانند باقی تگ های HTML یک تگ هست و میشه با کمی دانش جاوا اسکریپت کارهای مشابه رو انجام داد

رضا کوهساری

مدرس دوره:

رضا کوهساری

وضعیت دوره :

اتمام دوره

زمان دوره :

02:57:48

تعداد قسمت ها:

10

پیش نیاز:

HTML - CSS

سطح دوره :

قیمت دوره:

رایگانــ
دوره های پیشنهادی

پروژه فشرده سازی تصویر با جاوا اسکریپت
پروژه فشرده سازی تصویر با...

بر کسی پوشیده نیست که ابزار نویسی یکی از شیرین ترین قسمت در برنام...

دوره جامع SVG
دوره آموزش SVG و Canvas

امروزه در دنیای برنامه‌نویسی و در میان تکنولوژی های جدید و محبوب...

آموزش کامل فلکس باکس یا Flexbox
دوره رایگان آموزش flexbox

فلکس باکس یا (flexbox) در اصل یک مدل برای طراحی و لایه بندی صفحات...

آموزش پروژه محور Sass
دوره جامع و پروژه محور Sa...

Sass مخفف کلمات Syntactically Awesome Stylesheets است. از Sass را...

درباره ما


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

ارتباط با پشتیبانی


شما میتوانید با استفاده از یکی از راه‌های زیر با پشتیبانی ارتباط برقرار کنید

ایمیل: info@rtor.ir

تلگرام :rtor_dev@