0

مقدمه ای بر Scalable Vector Graphics(SVG): آنها چیستند؟ (قسمت اول)

در این مقاله ، من توضیح می دهم که یک گرافیک برداری مقیاس پذیر (SVG) چیست و تفاوت آن با سایر انواع گرافیک ها چیست.

 

مقدماتی در مورد گرافیک رایانه ای

یک گرافیک رایانه ای  یک گرافیک bitmap یا یک گرافیک برداری است.

به جای اینکه شما را با جزئیات فنی برای شروع خسته کنم ، بیایید تفاوت این گرافیک ها را با یک آزمایش تصویری توضیح دهیم …

 

Bitmap Graphics

عکس صفحه نمایش فعلی خود را ذخیره کنید. سپس ، آن را باز کنید.

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

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

اکثر ما احتمالاً به  کلمه  “پیکسلی” عادت داریم. این کلمه در واقع منشأ فنی دارد.

پیکسل کلمه ی تراکم عناصر تصویر است.

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

به طور خلاصه ، گرافیک bitmap گرافیکی است که از پیکسل تشکیل شده است.

منطقی است ، اما کلمه bitmap از کجا آمده است؟

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

Bitmap (bit-map) به تعداد بیت های پیکسل های مپ شده در یک نمودار گفته می شود.

از این رو ، یک گرافیک پیکسلی گرافیک bitmap نامیده می شود.

 اما صبر کنید ، چرا هنگام زوم پیکسل ها را می بینم؟

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

وضوح یک دستگاه کیفیت بصری یک گرافیک bitmap ارائه شده را تعیین می کند.

وضوح بهتر می تواند پیکسل های بیشتری را کنترل کند ، به این معنی که غلظت مربع های رنگی بالاتر خواهد بود. غلظت مربع های رنگی بالاتر باعث ایجاد یک گرافیک واضح تر می شود.

 

نکات تکمیلی:

  • گاهی اوقات raster graphics نیز نامیده می شود
  • انواع فایل های رایج  آن عبارتند از: png ، .jpg ، .jpeg.
  • برنامه هایی که با این نوع گرافیک کار می کنند عبارتند از: Gimp ، Paint ، Photoshop

گرافیک برداری

یک تفاوت اساسی وجود دارد که باید بین گرافیک bitmap و گرافیک برداری به خاطر بسپارید.

در حالی که گرافیک bitmap بلاک های ساختمانی میسازد که جعبه های مربع مجزا هستند (عناصر تصویر با نام مستعار پیکسل) ، بلوک های ساختاری گرافیک برداری از  اشکال جداگانه هستند.

در سطح پایین ، بیت مپ و گرافیک برداری با استفاده از “دستورالعمل” تولید می شوند.

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

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

این اشکال را می توان از نظر ریاضی محاسبه کرد تا بر روی هر رزولوشن ارائه شود.

 

بنابراین ، گرافیک برداری را می توان بدون از دست دادن کیفیت ، مقیاس بندی کرد.

 

 

نکات تکمیلی:

  • نوع پرونده متداول  گرافیک برداری svg. است (در ادامه توضیح خواهیم داد 🙂)
  • برنامه هایی که با این نوع گرافیک کار می کنند عبارتند از: Adobe Illustrator، Sketch، Figma، Affinity Designer
  • مزایای مختلفی وجود دارد ، اما در این مرحله ، تنها موردی که باید به آن توجه شود این است که آنها می توانند در هر مقیاسی / رزولوشن کار کنند و همیشه به همان کیفیت اولیه و واضح به نظر برسند.

 

گرافیک برداری مقیاس پذیر (SVG)

 

من توضیحی بهتر از موارد زیر برای SVG ها پیدا نکرده ام (و نه توانسته ام ایجاد کنم ):

Graphics Vector Scalable (SVG) یک زبان نشانه گذاری مبتنی بر XML برای توصیف گرافیک برداری دو بعدی است. SVG اساساً همان گرافیکی است که HTML برای نوشتن دارد. – منبع

HTML می گوید: “در اینجا چند دستورالعمل در مورد نحوه تولید این متن وجود دارد” و SVG می گوید “در اینجا برخی از دستورالعمل ها در مورد چگونگی ایجاد اشکال برای تولید این گرافیک وجود دارد.”

SVG برای استفاده در وب مورد استفاده قرار می‌گیرد. آنها را می توان در کنار HTML شما بر روی هر برنامه وب متصل کرد.

 

علامت گذاری

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

 

میتوایند از codepen برای اجرای این کدها استفاده کنید.

اطمینان حاصل کنید که “SCSS” را به عنوان پیش پردازنده CSS انتخاب کنید.

اول از همه ، ما می توانیم body را استایل دهی کنیم :

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #25A9FC;
}

<svg>

بیرونی‌ترین عنصر یک SVG المنت svg است:

<svg>
</svg>

پایان قسمت اول 🙂

 

قسمت دوم

 

 

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *