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

SVG در HTML5

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

svg  در html5

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

به زبان ساده 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 ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

  • سلام و ممنون ، خوب بود ولی تعداد کدهایی که استفاده میشه زیاد میشه ، یک آیکون کوچیک بهتر نیست؟
    باتشکر

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

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین