Web Devs

#SVG
#ScalableVectorGraphics

🔻 این SVG چیست و چرا باید از آن استفاده کنیم؟

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


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

➖ این بدین معنی نیست که در آینده نزدیک از تصاویری با فرمت های PNG، JPG و غیره دیگر استفاده نمی شود، نه، بلکه آنها همچنان کاربرد خود را در وب خواهند داشت و در کنار SVG به حیات خود در دنیای وب ادامه خواهند داد.

🔻 حالا SVG چیست؟
SVG (Scalable Vector Graphics)

در دنیای کامپیوتر ترسیمات می توانند از دو نوع Raster یا Vector باشند.

➖ در Raster Graphics یا گرافیک شطرنجی تصویر به صورت مجموعه ‌ای از پیکسل‌ها ذخیره می‌شود و رنگ هر پیکسل به طور جداگانه ذخیره می‌شود. تغییر اندازه این تصاویر کیفیت آنها را تحث تاثیر قرار می دهد. اکثر فرمت‌های رایج فایل‌های تصویری مانند jpg، gif، و bmp بر مبنای گرافیک شطرنجی هستند.

➖ در Vector Graphics یا گرافیک برداری روشی در تولید و ذخیرهٔ فایل‌های تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. واژهٔ «بردار» در این کاربرد معنایی وسیع‌تر از یک خط راست دارد.

➖ تصاویر تعریف شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل شده‌اند که به صورت ریاضی تعریف می‌شوند. اجزای این تصاویر را می‌توان بدون از دست دادن کیفیت به راحتی جا به جا کرد و تغییر اندازه داد.

➖ این تصاویر مستقل از رزولوشن هستند و می‌توان آنها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد. یکی از شناخته شده ترین فرمت‌های ذخیرهٔ فایل‌های گرافیک برداری، فرمت SVG است.

➖ در SVG بر اساس XML است این یعنی سینتکس آن خیلی هم غریبه نخواهد بود و به HTML شباهت دارد. به این صورت که برای ترسیم شکل های مختلف تگ های مختلف وجود دارد مثلا برای ترسیم دایره از تگ

<circle/>

استفاده می شود و در نهایت همه اشکال، درون یک تگ

<svg />

قرار می گیرند.
ادامه در پست بعدی ...
@fullStackDevs

Wikipedia

گرافیک شطرنجی

نگاشتار شطرنجی یا گرافیک شطرنجی (به انگلیسی: Raster Graphics) روشی از گرافیک است که به وسیله تقسیم کردن تصویر به چهارخانه‌های کوچک یا عناصر کوچک تصویر که پیکسل نام دارند ساخته می‌شود. پیکسل‌ها، محتوای اطلاعاتی مثل حافظ، کنترل شفافیت و رنگ می‌باشند. این اطلاعات…

www.tgoop.com/fullStackDevs/449

1.77K viewsedited  Oct 14, 2019 at 09:46

#SVG
#ScalableVectorGraphics

🔻 این SVG چیست و چرا باید از آن استفاده کنیم؟

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


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

➖ این بدین معنی نیست که در آینده نزدیک از تصاویری با فرمت های PNG، JPG و غیره دیگر استفاده نمی شود، نه، بلکه آنها همچنان کاربرد خود را در وب خواهند داشت و در کنار SVG به حیات خود در دنیای وب ادامه خواهند داد.

🔻 حالا SVG چیست؟
SVG (Scalable Vector Graphics)

در دنیای کامپیوتر ترسیمات می توانند از دو نوع Raster یا Vector باشند.

➖ در Raster Graphics یا گرافیک شطرنجی تصویر به صورت مجموعه ‌ای از پیکسل‌ها ذخیره می‌شود و رنگ هر پیکسل به طور جداگانه ذخیره می‌شود. تغییر اندازه این تصاویر کیفیت آنها را تحث تاثیر قرار می دهد. اکثر فرمت‌های رایج فایل‌های تصویری مانند jpg، gif، و bmp بر مبنای گرافیک شطرنجی هستند.

➖ در Vector Graphics یا گرافیک برداری روشی در تولید و ذخیرهٔ فایل‌های تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. واژهٔ «بردار» در این کاربرد معنایی وسیع‌تر از یک خط راست دارد.

➖ تصاویر تعریف شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل شده‌اند که به صورت ریاضی تعریف می‌شوند. اجزای این تصاویر را می‌توان بدون از دست دادن کیفیت به راحتی جا به جا کرد و تغییر اندازه داد.

➖ این تصاویر مستقل از رزولوشن هستند و می‌توان آنها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد. یکی از شناخته شده ترین فرمت‌های ذخیرهٔ فایل‌های گرافیک برداری، فرمت SVG است.

➖ در SVG بر اساس XML است این یعنی سینتکس آن خیلی هم غریبه نخواهد بود و به HTML شباهت دارد. به این صورت که برای ترسیم شکل های مختلف تگ های مختلف وجود دارد مثلا برای ترسیم دایره از تگ

<circle/>

<svg />

BY Web Devs