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

برای ایجاد جلوه های گرافیکی در صفحات وب،‌امکانات و تکنولوژی های مختلفی پیش روی توسعه دهندگان Front-End‌ قرار دارد. شاید اصطلاحا دم دست ترین آنها CSS است که با ارائه ی CSS3 ویژگی هایی زیادی را در خود جای داده است.

اگر بخواهیم تیتروار سایر فناوری ها را نام ببریم باید به Canvas، WebGL و ThreeJS نیز اشاره کنیم که هرکدام ویژگی های خاص خود را دارند و موضوع این دوره ی آموزشی نیستند لذا علاقه مندان میتوانند خود به دنبال مطالعه ی بیشتر پیرامون آنها بروند.

اما SVG نیز راهکاری دیگر برای ایجاد گرافیک در دنیای وب است که از یک منظر با سایر دوستان خود متفاوت است و آن تفاوت در نوع خروجی حاصل شده است! حتما تا به حال تصاویری را دیده اید که با افزایش بزرگنمایی (زوم کردن) کیفیت خود را از دست میدهند و پیکسل های تصاویر اصطلاحا بلوک بلوک میشوند. تصاویری مانند این در واقع از Raster Graphics استفاده میکنند.

اما در مقابل روش دیگری نیز برای ایجاد پیکسل ها وجود دارد که Vector Graphics نام دارد. در این روش با استفاده از فرمول های ریاضی پیکسل ها طوری در کنار هم قرار میگیرند که با افزایش یا کاهش اندازه ی تصویر، کیفیت پایین نیامده و حالت قبلی رخ نمیدهد.

با این توضیحات حالا وقت آن است که با عبارت کامل SVG آشنا شوید. این کلمه در واقع سرنام عبارت Scalable Vector Graphics به معنای گرافیک برداری مقیاس پذیر است. ما با استفاده از SVG میتوانیم گرافیک برداری را به صفحات وب بیاوریم و عناصر گرافیکی با کیفیت تری را تولید کنیم. ضمنا SVG پیشنهاد کنسرسیوم جهانی وب نیز هست.

پیش از شروع این دوره آموزشی شما باید با HTML تا حد خوبی آشنا بوده و اطلاتی درباره ی XML نیز داشته باشید. پس در صورت نداشتن پیش نیازها بهتر است ابتدا آنها را فرا بگیرید و سپس با ما همراه باشید.

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

SVG گرافیک برداری را در قالب XML تعریف میکند.

منتظر قسمت بعدی باشید.