|  
صفحه اصلی > فهرست مقالات > آشنایی با SVG (Scalable Vector Graphics)
مقالات وب، شبکه
 

آشنایی با SVG (Scalable Vector Graphics)

SVG - Scalable Vector Graphicsگرافیک برداری مقیاس ‌پذیر (Scalable Vector Graphics)‏ یا SVG زبانی ‏ از نوع XML است که به منظور ایجاد، انتشار، و کار با گرافیک دو بعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است. SVG به عنوان استانداردی نسبتا" جدید از سوی کنسرسیوم جهانی وب (W3C)، باعث کوچک‌تر گردیدن، سریع‌تر بودن و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب شده است. نرم‌افزارهای گوناگونی از جمله Inkscape برای ایجاد تصاویر SVG به کار می‌روند.
SVG نسخه 1.1 در ژانویه 2003 برای اولین بار توسط W3C ارائه شد. شرکت های Sun, Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند.

برخی از ویژگی ها و قابلیت های یک سند SVG به این ترتیب می باشد:

  • بزرگ (Zoom In) و کوچک (Zoom Out) نمودن یک سند SVG تاثیری بر کیفیت آن ندارد.
  • متون داخل آن قابلیت ویرایش و جستجو دارد.
  • با هر رزولوشنی قابلیت چاپ دارد.
  • قابلیت اسکریپت نویسی و استایل پذیری داشته و به سادگی قابل ویرایش هستند.
  • سرعت بارگذاری و حجم آنها در مقایسه با سایر فرمت های گرافیکی بهتر و مناسب تر است.
  • هر عنصری در سند SVG به صورت مستقل طراحی و ایجاد می گردد.
  • با تغییر اندازه کیفیت آنها تغییر نمی کند.
  • انیمیشن پذیر هستند.
  • قابلیت موقعیت یابی پیکسلی دارند.
  • پشتیبانی برای سایر دستگاهها مانند GPS و موبایل
  • SVG با تکنولوژی جاوا کار میکند و یک استاندارد است.
  • نسخه SVGZ نسخه فشرده شده SVG است.

چند نمونه از کدهای SVG و خروجی آن:

مثال 1: رسم دایره ای به شعاع 50 ، به مرکز (50 , 30) با محیطی به ضخامت 5 و به رنگ قرمز. (اندازه ها بر حسب پیکسل) :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="50" cy="30" r="50" fill="violet" stroke="red" stroke-width="5"/></svg>

مثال 2: رسم پاره خطی با مختصات آغازین (70,30) و مختصات پایانی (250,300) و به ضخامت 10 پیکسل و به رنگ سبز:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><line x1="70" y1="30" x2="250" y2="300" fill="green" stroke-width="10" /></svg>


نوشته فوق مختصری بود در مورد SVG و ویژگی های آن.
جهت اطلاعات بیشتر و یادگیری نحوه ترسیم گرافیک با SVG و کدنویسی آن از سایت زیر بازدید نمایید:

SVG Tutorial (آموزش SVG)

منبع: fa.wikipedia.org
 
 
ارسال به دوستافزایش اندازه فونتکاهش اندازه فونت