فایل SVG چیست؟

 به نام خدا

سلام

شاید شما هم تا به حال با فایل های 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>

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

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

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

چاپ

نوشتن دیدگاه
• لطفاً توجه داشته باشید که آدرس ایمیل www ندارد.
•اگر میخواهید پاسخ نظر شما به ایمیلتان ارسال شود تیک گزینه ی "مرا برای دیدگاه‌های بعدی به یاد بسپار" را علامت بزنید.
•همچنین استدعا دارم که هرگز عبارات سیاسی در نظر خود به کار نبرید

دیدگاه‌ها  
# تجهیزات آشپزخانه صنعتی 1395-04-13 10:06
خیلی عالی هست تشکر
پاسخ دادن
# حسام غلامی 1395-04-13 12:12
ممنون از نظر شما
پاسخ دادن
# سیدرضا بازیار 1394-06-28 07:19
ممنون
پاسخ دادن
# حسام غلامی 1394-06-28 17:10
ممنونم از نظرت رضا

موفق باشی
پاسخ دادن
# Pooya 1394-04-01 22:04
سلام
خداوکیلی داخل سایتا خیلی نظر نمی زارم ولی این یکی دیگه نشد نزارم
دمت گرم
;)
پاسخ دادن
# حسام غلامی 1394-04-02 15:01
پویا جان خیلی ممنونم از لطفی که داری.

خوشحالم که از این مطلب راضی بودی.

موفق باشی
پاسخ دادن
# hamed 1392-12-17 13:42
سلام. از اطلاعاتتون ممنون . دوستان برنامهInkspace , Real Draw برای ساختن این فایلها میتونه کمکتون کنه . البته برنامه اول راحت تره و خروجی اون واسه برنامه های زیادی مثل Sothink SWF Decompiler هم به سادگی مورد استفاده قرار میگیره
پاسخ دادن
# حسام غلامی 1392-12-18 17:18
سلام حامد جان
ممنون از نظرت
یک نرم افزار بسیار ساده و کاربردی به همراه مستند های SVG هم نرم افزار Amaya هست که توسط کنسرسیوم جهانی وب منتشر شده، میتونید از لینک زیر دریافت بکنید:
www.w3.org/Amaya/
پاسخ دادن
# دنياي صفر و يك 1392-07-11 12:15
جالبه
پاسخ دادن