فایل SVG چیست؟

نوشته شده توسط حسام در 11 آذر 1391. ارسال شده در اینترنت

 به نام خدا

سلام

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

مزیت این فایل ها حجم کم در مقابل کارایی بالا هست و میتوان با آنها اشکال برداری و حتی سه بعدی رو ایجاد کرد که با زوم کردن و بزرگ شدن هرگز تغییر کیفیت نمیدهند. برای اینکه بهتر با این فایل ها آشنا بشید یه مثال میزنم. شما تصویر زیر رو فرض کنید:

تصویری که در بالا مشاهده میکنید یک فایل گیف GIF هست. حالا من این تصویر رو بزرگ میکنم:

همانطور که مشاهده میکنید ، تصویر آزار دهنده شده!

حالا میخوایم با کد یک فایل SVG ایجاد کنیم.

کد زیر رو در یک فایل متنی ذخیره کنید و پسوند فایل رو به SVG تغییر بدید.

<svg width="16" height="16" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -100,-100 0 0,0 -70.711,-170.711 z" fill="#3d7fe6"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" /> </path> </svg>

حالا این فایل رو داخل مرورگر اینترنت بکشید تا چیزی شبیه به شکل زیر نمایش داده بشه:

بله درست متوجه شدید! این همون شکلی هست که در بالای مرورگر کروم نمایش داده میشه.

حالا به تصویر زیر نگاه کنید:

این تصویر ، بزرگ شده ی همون تصویر قبلی هست!بدون هیچ افت کیفیت...

حالا به این یکی نگاه کنید:

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

<svg width="60" height="60" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -130,-130 0 0,0 -70.711,-170.711 z" fill="#444"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 150 150" to="360 150 150" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" /> </path> </svg>

حالا خودتون سعی کنید به وسیله ی یک ویرایشگر کد و یا هر برنامه ی دیگه ای این کد رو ویرایش کنید و لذت ببرید!

آینده ی وب دست این فایلهاست...

موفق و موید باشید...

چاپ