فایل SVG چیست؟

An SVG file is a Scalar Vector Graphics file that uses XML based text format for describing the appearance of an image. The word Scalable refers to the fact that the SVG can be scaled to different sizes without losing any quality. Text-based description of such files makes them independent of resolution. It is one of the most used formats for building a website and print graphics in order to achieve scalability. The format can only be used for two-dimensional graphics though. SVG files can be viewed/opened in almost all modern browsers including Chrome, Internet Explorer, Firefox, and Safari.

تاریخچه مختصر

SVG specifications are available as open standard by World Wide Web Consortium (W3C) since 1999. قبل از این، مشخصات فرمت فایل مشابه در شش فرمت مختلف تا سال 1998 به W3C ارسال شده بود. در سال 2011 به روز رسانی برای مشخصات اعمال شد و نسخه 1.1 شد. در سال 2016، SVG 2 به عنوان نسخه جدیدتر منتشر شد که دارای ویژگی هایی علاوه بر موارد موجود در SVG 1.1 بود.

مشخصات فرمت فایل

SVG Document Object Model (DOM) پایه و اساس تمام مشخصات و رابط‌هایی را که با بخش‌های خاص مشخصات مطابقت دارند، ایجاد می‌کند. بینندگان SVG باید رابط های SVG DOM را همانطور که در مشخصات W3C تعریف شده است پیاده سازی کنند. DOM آن چندین رابط را برای انواع داده ها و عناصر مختلف در معرض دید قرار می دهد.

اشکال SVG

SVG دارای برخی از عناصر شکل از پیش تعریف شده است که می تواند توسط توسعه دهندگان استفاده شود:

مستطیل
دایره
بیضی

*خط

پلی لاین
چند ضلعی
مسیر

بر اساس این اشکال و مشخصات، حوزه های کاربردی SVG به شرح زیر است.

مسیرها - از مسیرها برای نمایش خطوط ساده و همچنین ترکیبی استفاده می شود. کدگذاری برای تعریف ماهیت عملیات استفاده می شود. به عنوان مثال، M برای Move To، L برای Line To، Z برای بستن یک مسیر و غیره استفاده می شود.

اشکال پایه - مسیرها و مسیرهای خط مستقیم که از یک سری قطعات خط مستقیم متصل (چندخط) و همچنین چند ضلعی های بسته، دایره ها و بیضی ها تشکیل شده اند را می توان ترسیم کرد. مستطیل ها و مستطیل های گوشه گرد نیز از عناصر استاندارد هستند.

متن - نمایش متن به عنوان داده های کاراکتر XML بیان می شود که در آن می توان جلوه های بصری زیادی را روی متن اعمال کرد. مشخصات اجازه می دهد تا متن دو جهته، متن عمودی و کاراکترها را در یک مسیر منحنی مدیریت کنید.

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

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

** گرادیان ها و الگوها ** - اشکال در یک فایل SVG را می توان با رنگ های ثابت، شیب ها یا الگوهای تکراری پر یا مشخص کرد.

افکت های فیلتر - در واقع یک سری عملیات گرافیکی است که برای ایجاد نتیجه اصلاح شده بر روی گرافیک برداری منبع داده اعمال می شود.

تعامل - کاربران می توانند با تغییر فوکوس، کلیک های ماوس، اسکرول یا بزرگنمایی تصویر با فایل های SVG تعامل داشته باشند. تعامل به تصاویر SVG اجازه می دهد تا همانطور که در بالا ذکر شد به روش های مختلف با کاربران تعامل داشته باشند.

پیوند - این امکان وجود دارد که تصاویر SVG دارای پیوندهایی به اسناد دیگر باشند. این از طریق XML Linking Language یا XLink به دست می آید. این امکان ایجاد حالت های نمای خاصی را فراهم می کند که برای بزرگنمایی/کوچک کردن یک منطقه خاص یا محدود کردن نما به یک عنصر خاص استفاده می شود.

اسکریپت - مشابه HTML، تمام جنبه های یک سند SVG برای دستکاری با استفاده از اسکریپت ها قابل دسترسی هستند. اشیاء SVG DOM راهنمایی برای دستیابی به این امر با استفاده از عنصر و ویژگی SVG ارائه می دهد. اسکریپت‌ها در عناصر برچسب «اسکریپت» محصور شده‌اند و می‌توانند در صورت لزوم در پاسخ به رویدادهای اشاره‌گر، صفحه‌کلید یا سند اجرا شوند.

** انیمیشن ** - عناصر DOM ، و به شما امکان می دهد انیمیشن را برای محتوای SVG اضافه کنید. البته این امر بدون استفاده از اسکریپت ها و تایمرهای داخلی قابل دستیابی نیست. این انیمیشن ها می توانند پیوسته باشند و می توانند در حلقه و همچنین تکرار شوند و در عین حال به رویدادهای کاربر پاسخ دهند.

** فونت** - متن در SVG می تواند به فایل های فونت خارجی مانند فونت های سیستم اشاره کند. در صورت عدم وجود چنین فونت‌هایی، متن SVG به خروجی نمایش داده نمی‌شود. می توان با اضافه کردن حروف مورد نیاز در چنین فایلی به عنوان یک فونت که سپس با استفاده از عنصر

مثال ها

خطوط زیر نشان می دهد که چگونه یک دایره با استفاده از اسکریپت SVG نشان داده می شود.

<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 height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>