آموزش طراحی وب

نحوه کار با SVG

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

نحوه کار با SVG

به زبان ساده SVG  یا Scalable Vector Graphics یک تکنولوژی برای گرافیک ۲ بعدی و برنامه های گرافیکی در XML است که توسط این تکنولوژی میتوان به راحتی طرح های مختلف و پیچیده را در قالب سایت خود لحاظ کنید بطوری که بدون استفاده از تصاویر حجیم می توانید اشکال پیچیده ای را بصورت کد در قالب خود بیافزایید که حتی با Zoom بیش از حد روی آن از کیفیت آن کاسته نمی شود . این تکنولوژی یکی از توصیه های کنسرسیوم w3 میباشد .

SVG نسخه ۱.۱  در ژانویه ۲۰۰۳ برای اولین بار توسط W3C توصیه شد . شرکت های Sun Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند .

مزایای SVG نسبت به سایر فرمت های موجود :

–  این فرمت توسط برنامه های بسیاری قابل خواندن است ، حتی notepad !

–  حجم این فایل ها از فرمت های پیکسلی کم تر است .

–  این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند .

–  متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو میباشد !

– SVG با تکنولوژی جاوا کار میکند و یک استاندارد است .

– فایل های SVG کاملا XML هستند .

این تکنولوژی OpenSource بوده و می توان به راحتی آن را ویرایش کرد . تنها مشکلی که پیش پای SVG قرار دارد این است که هنوز تمام مرورگر ها بصورت کامل از آن پشتیبانی نمی کنند . گرچه میتوان آینده SVG را روشن توصیف کرد . زیرا بنیاد موزیلا و مایکروسافت هر دو برنامه هایی برای پشتیبانی از SVG در مرورگر هایشان دارند . همچنین برنامه Adobe Golive 5 بطور کامل از ویرایش SVG پشتیبانی میکند و ادیتور های آن درحال گسترش هستند . با توجه به اینکه تصاویر SVG در واقع از اشکال هندسی، خطوط، رنگ‌ها و متون تشکیل شده‌اند، برای تصاویر ساده مانند گرافیک‌های تشکیل دهنده رابط کاربری اپلیکیشن‌ها و وب‌سایت‌ها بسیار مناسب هستند. این تصاویر همچنین امکان استفاده از انیمیشن را در ساختار خود دارند. با توجه به اینکه تصاویر SVG با ساختار XML تولید می‌شوند، توسط جاواسکریپت و دیگر زبان‌های برنامه‌نویسی که امکان پردازش XML و DOM را دارند، می‌شود آن‌ها را به سادگی تغییر داد. باید بدانید که فایل های SVG با پسوند .svg ذخیره میشوند .

 نحوه ایجاد فایل های SVG :

برای ترسیم اشکال با SVG شما دو حالت دارید :

راه اول نوشتن کدهای SVG در فایل html

راه دوم نوشتن کدهای SVG در یک فایل جداگانه با پسوند .svg و فراخوانی آن فایل در html توسط تگ های iframe , Embed , Object و یا توسط background

 

آموزش راه اول :

کد زیر را در یک فایل html نوشته و سپس ذخیره کنید ، در مرورگر خود باز کرده و نتیجه را مشاهده نمایید :

تصویر زیر برای شما نمایش داده می شود :

svg

آموزش راه دوم :

یک فایل txt باز کنید و کدهای زیر را در ان paste کنید ، سپس آن را با پسوند .svg ذخیره نمایید :

حال یک فایل html باز کنید و کد زیر را در آن قرارداده و ذخیره نمایید ، دقت کنید که آدرس Background را با توجه به آدرس فایل svg ویرایش کنید :

نتیجه ی کدهای بالا تصویر زیر خواهد شد :

 svg

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

حتما به این فکر می کنید که این کدهای پیچیده قابل یادگیری نخواهند بود و هیچ گاه قادر به کدنویسی svg نخواهید بود ، اما باید بگم اصلا نگران نباید . شما می توانید هر طرحی که میخواهید در نرم افزار illustrator و سایر نرم افزارهایی که این تکنولوژی را پشتیبانی می کنند ، طراحی کرده و خروجی svg بگیرید . بعد از گرفتن خروجی svg به راحتی می توانید با فراخوانی آن ، در فایل html خود از آن استفاده کنید و لذت ببرید .

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۴

  • سلام.
    آقای همت یار وقتتون به خیر، ممنون از آموزشی که قرار داید .
    امکانش هست یک آموزش هم برای تبدیل فایل های لایه باز PSD به SVG بنویسید؟!

    • سلام دوست عزیز
      بله حتما یه آموزش در بخش مقالات قرار میدم .
      موفق باشید .

  • جالب بود.
    من چند ماه پیش قالب ویندوز ۷ رو توی نت پیدا کردم که بدون اینکه تصویری داشته باشه تمام تصاویر منوی استارت ویدنوز ۷ رو داشت.
    خیلی تعجب کرده بودم
    حالا می فهم از این تکنولوژی استفاده شده.
    🙂 😀

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی