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

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

SVG در HTML5

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 خود از آن استفاده کنید و لذت ببرید .

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • Mohamad

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

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟