svg چیست ؟

SVG یا همان Scalable Vector Graphics است که در زبان فارسی آن را میتوان به نگاره‌سازی برداری مقیاس‌پذیر  ترجمه کرد.

SVG زبانی برای توصیف گرافیک دو بعدی و برنامه های گرافیکی در XML است.
این تکنولوژی مخفف کلمات Scalable Vector Graphics میباشد.
SVG برای ایجاد گرافیک های برداری در صفحات وب بکار میرود. و با زوم روی عکس های SVG کیفیت آنها پایین نمی آید.هر المانی که در SVG می بینید میتواند نقاشی شود.SVG یکی از توصیه‌های کنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت آن ها در کلیه سایزها حفظ میشود.

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

RASTER و VECTOR

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

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

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

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

ویژگی های فرمت SVG:

• واژه SVG مخفف عبارت “Scalable Vector Graphics” می باشد.
• SVG برای تعریف گرافیک وکتوری در وب سایت بکار می رود.
• از فرمت XML برای تعریف گرافیک وکتوری (Vector Graphics) در وب استفاده می شود.
• با افزایش اندازه تصاویر svg و یا زوم کردن روی آنها، کیفیت svg کاهش نمی یابد.
• روی تصاویر با فرمت svg می توان انیمیشن اعمال کرد.
• SVG با DOM (Document Object Model) تعامل دارد و می توان با استایل های css و یا کدهای جاوااسکریپت کار کند.
• SVG می تواند توسط گوگل ایندکس شود. بدین معنی که اگر متنی داخل فرمت SVG نوشته شود، خزنده های گوگل می توانند این متن را پیمایش و ایندکس کنند.
• SVG می تواند در هر رزولوشنی چاپ شود.
• SVG فرمت توصیه شده توسط کنسرسیوم جهانی وب (W3C) می باشد.
• تمام مرورگرهای مدرن از فرمت SVG پشتیبانی می کنند. اگرچه توسط نسخه های ۸ به قبل مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، توسط پلاگین هایی می توان این مشکل را حل کرد.

چه موقع SVG؟

بهترین موارد استفاده SVG:

• آیکون ها
• ترسیمات ساده مثل شکل های مختلف
• بنرهای تبلیغاتی
• ترسیمات متحرک
• اینفوگراف ها و مصورسازی داده ها

می باشند.

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

تفاوت بین Canvas و SVG

SVG زبانی برای توصیف گرافیک 2D در XML است.

Canvas گرافیک دو بعدی را به کمک JavaScript ترسیم میکند.

SVG مبتنی بر XML است به این معنی که هر عنصری در SVG DOM موجود است. شما میتوانید گرداننده رویداد جاوا اسکریپت را برای یک عنصر ضمیمه کنید.

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

Convas بصورت پیکسل به پیکسل ارائه میشود. در Convas پس از اینکه شکل رسم شد، مرورگر آنرا فراموش میکند. اگر مکان شکلی بخواهد تغییر کند باید کل شکل دوباره رسم گردد.

در این مقاله میتوانید توضیحات بیشتر در مورد CANVAS  را بخوانید.

رسم SVG با نرم افزار

نرم‌افزار Inkscape

Inkscape نرم افزاری متن باز برای گرافیک های برداری (Vector) نظیر برنامه های Adobe Illustrator، Corel Draw، Freehand و Xara X است. تصاویر وکتور دارای مشخصاتی متفاوت از تصاویر Bitmap است که بارزترین آن ها، امکان بزرگنمایی تصاویر تا حد دلخواه بدون افت پیکسل است که این مورد به دلیل شیوه نگارش برداری تصاویر است.
Inkscape بر خلاف نرم افزار های بر پایه Bitmap نظیر Photoshop و Gimp تصاویر خود را بر اساس Vector ایجاد می نماید.
اگر تا کنون سابقه کار با نرم افزار های وکتور را داشته اید کار با این نرم افزار نیز برایتان بسیار ساده خواهد بود. Inkscape از مطرح ترین نرم افزار های برداری است که به صورت کاملا رایگان و متن باز منتشر می شود. آخر همین پست دانلود برنامه موجود است.

تگ SVG  در HTML 

تگ svg تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره و … که همگی میتوانند درون تگ svg نگهداری شوند.

روش تعریف تگ SVG بدین صورت است که ابتدا تگ <svg> را تعریف کرده سپس از زبان نشانه گذاری xml برای تعریف شکل دلخواه استفاده می کنیم. در کد فوق پارامترهای زیر را تعریف کرده ایم:

• x1: مختصات شروع خط روی محور افقی x
• y1: مختصات شروع خط روی محور عمودی y
• x2: مختصات پایان خط روی محور افقی x
• y2: مختصات پایان خط روی محور عمودی y

با ما در مقاله های بعدی همراه باشید تا بیشتر در مورد SVG و نحوه نوشتن کد های آن آشنا شویم.