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

چگونه از فایلهای SVG استفاده نماییم
ارسال شده در ج, 10/07/1397 - 23:16 -- توسط mjamali

چگونه از فایلهای SVG استفاده نماییم

در چندین ماه گذشته صحبت ها پیرامون گرافیک های SVG بسیار شنیده میشود. فایل های SVG در چندین سال گذشته وجود داشته اند, اما در حال حاضر طراحان وب سایت در مقیاس گسترده ای از این فایل ها استفاده مینمایند. چنانچه از فایل های SVG در طراحی وب سایت های خود زیاد استفاده مینمایید نگران نباشید, فایل های SVG به راحتی و کامل میتوانند مشکلات فرمت های دیگر عکسی مانند jpeg را برطرف نمایند. اگر شما میخواهید که از فایل های SVG استفاده نمایید, این مقاله از سری مقاله های شرکت طراحی وب پویا پرداز وب میتواند به شما کمک بسیار زیادی نماید. به شما خواهیم گفت که چگونه میتوانید فایل SVG را از نرم افزار Illustrator وارد زبان HTML نماییدو چگونه میتوانید آن تصویر را با زبان CSS تغییر دهید. البته این فایل ها هیچ ارتباطی به سئو و بهینه سازی سایت ندارد

فایل SVG چه میباشد؟

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

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

SVG در سال 1999 توسط سازمان W3C به صورت استاندارد در آمد, و هم اکنون میبینید که بعد از یک دهه طراحان وبسایت تازه به فکر استفاده نمودن آن در طراحی های خود نموده اند.

 

چرا ما باید از فایل های عکسی SVG استفاده نماییم؟

نوع کاری و روند انجام کارها میتواند در انجام یک پروژه موفق تاثیر گذار باشد. اگر شما میخواهید از فرمت های تصویری مانند jpeg یا png به فرمت svg منتقل شوید, باید برای این کار دلیل داشته باشید. خوشبختانه این فایل میتواند بسیاری از این مزیت ها و دلایل را برای شما فراهم نماید که عبارتند از:

1 – فایل SVG بسیار کم حجم تر از فایل های jpeg و png میباشد, به این معنا که میتواند در مرورگر کاربران به سرعت لود شده و صفحات وب سایت را سریعتر به کاربران نمایش دهد.

2 – تصاویر ساخته شده با SVG بسیار انعطاف پذیر میباشند, به این معنا که اصلا اهمیت ندارد شما از چه سایزی استفاده مینمایید و همچنین برای نمایشگرهای رتینا یا retina بسیار سودمند میباشد.

3 – فایل ها و تصاویر SVG برای طراحی های ریسپانسیو و معماهای آن بسیار مناسب میباشد, به این معنا که با یک سایز میتواند در تمامی حالتها به درستی نشان داده شوند.

4 – تصاویر SVG برای طراحی های Flat Design بسیار عالی میباشند.

5 – به دلیل اینکه تصاویر SVG کلا بر مبنای XML هستند, میتوانیم به راحتی آنها را با CSS و Javascript کنترل نماییم, با این کار میتوانیم قابلیت های انعطاف پذیر بیشتری را در طراحی سایت داشته باشیم.

6 – تصاویر SVG درخواست HTTP ارسال نمی نمایند, به این معنا که دستورات SVG خودش بخشی از صفحه وب محسوب میشود و همیشه قابل دسترس خواهد بود.

 

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

 

از نرم افزار Illustrator به وب

چندین نرم افزار وجود دارد که به شما خروجی  SVGمیدهد و شما میتوانید از هر یکی از آنها استفاده نمایید.  اما بسیاری از طراحان Adobe Illustrator را انتخاب می نمایند.

همانطور که در تصویر بالا مشاهده مینمایید شکل بسیار ساده ای میباشد, اما باید ببینیم که در کد چه اتفاقی می افتد.

در مرحله بعد باید آن را به فرمت SVG تبدیل نماییم.

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

این گزینه مانند وارد نمودن یک تصویر معمولی در قالب تگ img میباشد.

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

گزینه دوم : استفاده از کدهای SVG

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

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

این روش بسیار عالی میباشد به دلیل اینکه ما به کدهای SVG دسترسی داریم و توسط دستورات CSS میتوانیم آن را ویرایش نماییم.

همانطور که در نتیجه میبینید کدها دقیقا مانند زبان XML میباشد, و مطمئنا این زبان برای افرادی که در وب کار میکنند بسیار آشنا میباشد. این آشنایی برای کار کردن با تصاویر SVG بسیار عالی میباشد.

همانطور که میبینید Attributeهای بسیار زیادی در این کد وجود دارد مانند کد رنگها یا موقعیت آنها و غیره. تمامی این خصوصیت ها بعدها میتواند تغییر پیدا نماید.

 

کدهای خود را تمیز تر نمایید

اگر شما با کدهای XML آشنا هستید و اگر هم آشنایی ندارید اصلا نگران نباشید, شما میبینید که کدی که توسط Illistrator به وجود آمده است کمی درهم میباشد. این امر به دلیل این است که از زبان CSS مستقیما در کدها استفاده شده است. این کار میتواند کدها را به هم ریخته نماید.

در مرحله بعد لازم است که این کدهای CSS به جای دیگری منتقل شوند.

همانطور که میبینید تمامی شکل ها دارای رنگ داخلی هستند که به راحتی میتواند این خصوصیت یا Attribute را به فایل CSS منتقل نماییم.

در این مرحله میتوانیم خصوصیت های دیگر مانند نوع فونت و .... را به CSS منتقل نمایید

عکس زیر زمانی را نشان میدهد که تمامی این کدها به فایل CSS منتقل شده است.

نتیجه گیری

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

دسته بندی: 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.