SVG مخفف عبارت (Scalable Vector Graphics) می باشد و یک فرمت تصویری مبتنی بر XML است که برای تصاویر با گرافیک دو بعدی استفاده می شود.
در سال ۱۹۹۸، SVG پس از شش طرح پیشنهادی برای زبان های برداری گرافیکی، به W3C ارائه شد و از سال ۱۹۹۹ در کنسرسیوم جهانی وب (W3C) توسعه یافت. مشخصات اس وی جی، در سال ۲۰۱۱ به نسخه ۱٫۱ به روزرسانی شد.
تصاویر SVG و رفتار آنها در فایل های متنی XML تعریف شده است. این بدین معنی است که آن ها می توانند جستجو، ایندکس، اسکریپت، فشرده و همچنین متحرک سازی شوند.
تمام مرورگرهای مهم، از جمله موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم، اپرا، سافاری و مایکروسافت ادج، از اس وی جی پشتیبانی می کنند.
SVG سه نوع از المان های گرافیکی را در بر می گیرد:
- اشکال گرافیکی برداری (vector graphic)؛ مانند مسیرها و خطوط متشکل از خطوط مستقیم و منحنی
- تصاویر بیت مپ (bitmap images)
- متن (text)
و مجموعه ویژگی های آن شامل موارد زیر می شود:
- transformation
- clipping path
- alpha mask
- filter effect
- template objects
طراحی های SVG می توانند از المان های XML یا اسکریپت هایی که به DOM دسترسی دارند، استفاده کنند. SVG از CSS برای ظاهر طراحی و از جاوااسکریپت برای اسکریپت کردن، استفاده می کند.
مزایای SVG در مقایسه با فرمت های دیگر (jpeg و gif)
- قابلیت ایجاد و ویرایش با هر ویرایشگر متن
- قابلیت جستجو، نمایه سازی، اسکریپت و فشرده سازی
- مقیاس پذیری
- قابلیت چاپ با کیفیت بالا در هر رزولوشن
- عدم کاهش کیفیت با بزرگنمایی و تغییر اندازه
- open source بودن
SVG در HTML
با یک مثال، توضیحاتی در مورد اس وی جی در html ارائه می دهیم:
<html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
نتیجه این کد، شکل زیر می باشد:
– SVG را با تگ <SVG> آغاز می کنیم.
– طول و عرض المان SVG را با مقدار دهی به width و height تعیین می کنیم.
– المان circle مشخص می کند که دایره رسم شود.
– ویژگی های cx و cy نقطه مرکز دایره را نشان می دهد که اگر مقدار دهی نشوند، مرکز دایره، نقطه (۰،۰) در نظر گرفته می شود.
– ویژگی r مشخص کننده شعاع دایره است.
– با ویژگی stroke رنگ حاشیه دایره و با stroke-width ضخامت آن را تعیین می کنیم.
– fill رنگ دایره را تعیین می کند.
– تگ <SVG/> تگ پایانی کد می باشد.
SVG در وب
در ابتدا، به دلیل عدم پشتیبانی اس وی جی در نسخه های قدیمی اینترنت اکسپلورر (IE)، استفاده از آن در وب، محدود بود.
گوگل در ۳۱ اوت ۲۰۱۰ اعلام کرد که از این تاریخ، محتویات حاوی اس وی جی را در وب ایندکس می کند، خواه در فایل های مستقل باشند یا در فایل های HTML و کاربران قادر به مشاهده اس وس جی در میان نتایج جستجو می باشند.
همچنین گوگل در تاریخ ۸ دسامبر ۲۰۱۰ اعلام کرد که Google Image Search نیز نمایه سازی فایل های اس وی جی را آغاز خواهد کرد.
Great
سلام دوست عزیز. ان شا الله که مطالب وب تی ام ال، کمکی باشه جهت پیشرفت شما.