تصاویر SVG چیست؟
تصاویر SVG چیست؟

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

SVG نسخه ۱٫۱  در ژانویه ۲۰۰۳ برای اولین بار توسط W3C توصیه شد . شرکت های Sun Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند .

مزایای SVG نسبت به سایر فرمت های موجود مانند GIF , JPG :

  • این فرمت توسط برنامه های بسیاری قابل خواندن است ، حتی notepad !
  • حجم این فایل ها از فرمت های پیکسلی کم تر است .
  • این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند .
  • متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو می باشد !
  • SVG با تکنولوژی جاوا کار میکند .و یک استاندارد است .
  • فایل های SVG کاملا XML هستند .

قابل مقایسه ترین نوع فایلی با SVG را می توان تصاویر برداری فلش نامید . با این تفاوت که SVG یک استاندارد بیش از فلش دارد و آن موازی بودن تکنولوژی آن با استاندارد هایی مانند XSL و DOM است . در ضمن فلش یک تکنولوژی اوپن سورس نیست . تنها مشکلی که پیش پای SVG قرار دارد این است که هنوز تمام مرورگر ها بصورت کامل از آن پشتیبانی نمی کنند . گرچه می توان آینده SVG را روشن توصیف کرد . برنامه Adobe Golive 5 بطور کامل از ویرایش SVG پشتیبانی می کند و ادیتور های آن درحال گسترش هستند . باید بدانید که فایل های SVG با پسوند .svg ذخیره می شوند .
برای نشان دادن SVG در فایل های HTML میتوان از ۳ کد برای این کار استفاده کرد :

  • تگ Embed
  • تگ Object
  • تگ  iframe

برای نمونه می توانید به چند مثال از SVG های ساده برای شروع کار مراجع نمایید، همچنین جهت توضیحات بیشتر به بخش آموزشی SVG در W3schools مراجعه نمائید.

با توجه به اینکه تصاویر SVG در واقع از اشکال هندسی، خطوط، رنگ‌ها و متون تشکیل شده‌اند، برای تصاویر ساده مانند گرافیک‌های تشکیل دهنده رابط کاربری اپلیکیشن‌ها و وب‌سایت‌ها بسیار مناسب هستند. این تصاویر همچنین امکان استفاده از انیمیشن را در ساختار خود دارند. با توجه به اینکه تصاویر SVG با ساختار XML تولید می‌شوند، توسط جاواسکریپت و دیگر زبان‌های برنامه‌نویسی که امکان پردازش XML و DOM را دارند، می‌شود آن‌ها را به سادگی تغییر داد. یکی دیگر از مزیت‌های استفاده تصاویر SVG اینست که با توجه به اینکه این تصاویر بر اساس خطوط و اشکال هندسی رسم می‌شوند، نتیجه حاصل از این تصاویر فاقد مشکل تاری نیم پیکسلی است.تصاویر SVG برای عناصر ساده‌تر رابط کاربری که از اجزای ساده تر و هندسی تشکیل شده‌اند مناسب تر است. امکان اضافه کردن «عکس» به تصاویر SVG با استفاده از تگ <image> وجود دارد، ولی عکس‌ها را نمی‌شود بر اساس اعداد محاسبه کرد چرا که از اشکال هندسی تشکیل نشده‌اند و حتما باید بر اساس پیکسل‌ها نمایش داده شوند. بنابراین، بهترین راه برای نمایش عکس‌ها (مانند عکس‌های اشخاص، محصولات و  (… استفاده از آن‌ها با فرمت JPG است. تصاویر JPEG سالیان زیادی است که برای نمایش عکس‌ها در سیستم‌های الکترونیکی کاربرد دارند و از قدرت فشرده‌سازی بسیاری خوبی برخوردارند و می‌توان برای پایین آوردن حجم فایل عکس‌ها از آن‌ها استفاده کرد.

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

شما با هر ویرایشگر متنی می توانید به راحتی تصاویرSVG را بسازید ولی اگر بخواهید از نرم‌افزارهای گرافیکی که بتوانند به صورت خودکار برای شما فایلSVG را بسازند استفاده کنید می توانید از نرم افزارهایی مثل  Inkscape استفاده کنید.

SVG وHTML5

در اچ تی ام ال نسخه ۵ امکان استفاده ازsvg به صورت مستقیم فراهم شده است.
تگsvg نشان دهنده شروع تصویر Svg است و مقادیرwidth  وheight  طول و عرض تصویر را مشخص می کنند .
تگ  circle نوع شکل را مشخص می کند و مقادیرcx  وcy وr  اندازه و محل قرار گیری دایره را مشخص می کنند.
مقادیر fill مشخص کننده رنگ دایره و مقدار storke-width ضخامت خطی که دایره با آن رسم می شود را مشخص می کند.در انتها تگرsvg  نشان دهنده پایان اطلاعات تصویر است.

تهیه و تالیف: ایده ساز

پاسخ دهید

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