دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۵
  • اسفند

جلسه ۰۱ : بررسی و معرفی اجمالی SVG

  • دسته‌بندی‌ها :
جلسه ۰۱ : بررسی و معرفی اجمالی SVG
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

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

      بررسی و معرفی اجمالی SVG

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

      SVG چیست؟

      • SVG یا Scalable Vector Graphics یک زبان مبتنی بر XML برای تعریف وکتور ( بُردار ) مبتنی بر گرافیک است.
      • SVG در نظر گرفته شده تا تصاویر را در وب به نمایش بگذارد.
      • در تصاویر مبتنی بر وکتور،مهم نیست که چقدر تصاویر زوم شده یا تغییر اندازه می یابند؛ تصاویر SVG هرگز کیفیت خود را از دست نمی دهند.
      • تصاویر SVG از پویانمایی و انیمیشن پشتیبانی می کند.
      • SVG یک استاندارد W3C است.
      • فرمت های تصویری دیگر مانند تصاویر شطرنجی نیز می توانند با تصاویر SVG مورد استفاده قرار گیرند.
      • SVG با XSLT و DOM از HTML هماهنگ است.

      نقاط قوت استفاده از SVG

      • برای ایجاد و ویرایش تصاویر SVG از هر ویرایشگر متنی می توان استفاده کرد.
      • در XML، تصاویر SVG قابل جستجو، قابل ثبت و قابل اسکریپت و فشرده سازی هستند.
      • تصاویر SVG مهم نیست که چقدر زوم شده یا تغییر یافته اند؛ زیرا در هر حال بسیار مقیاس پذیر هستند زیرا هرگز کیفیت را از دست نمی دهند.
      •  تصاویر SVG با هر رزولوشنی برای چاپ و پرینت مناسب اند.
      • SVG یک استاندارد باز(Open Standard) محسوب می شود.

      نقاط ضعف استفاده از SVG

      • اگر از اندازه قالب متن ( text format size ) استفاده کنید در این صورت تصاویر binary شطرنجی، در قیاس با آن فرمت بزرگتری خواهد داشت.
      • در svg اندازه ها حتی برای عکس های کوچک، بسیار بزرگ هستند

      مثال

      تکه XML زیر می تواند برای کشیدن یک دایره در مرورگر وب مورد استفاده قرار گیرد.

      مثال : 

      SVG XML به طور مستقیم در یک صفحه HTML قرار دهید.

      مثال : estSVG.htm

      خروجی

      textSVG.htm را در مرورگر وب Chrome باز کنید. شما می توانید از Chrome / Firefox / Opera برای مشاهده تصویر SVG به طور مستقیم و بدون هیچ افزونه ای استفاده نمایید.

      بررسی و معرفی اجمالی SVG

      Sample SVG Image

      چگونه SVG با HTML ادغام می شود؟

      • عنصر <svg> شروع تصویر SVG را نشان می دهد.
      • ویژگی های طول و عرض در عنصر <svg> ،  ارتفاع و عرض تصویر SVG را تعریف می کند.
      • در مثال فوق، ما از یک عنصر <circle> برای رسم یک دایره استفاده کردیم.
      • ویژگی cx و cy نشان دهنده مرکز دایره است. مقدار پیش فرض بر (۰،۰) تنظیم شده است. ویژگی r نشان دهنده شعاع دایره است.
      • سایر ویژگی ها از قبیل stroke و stroke-width خطوط خارجی دایره راکنترل می نمایند.
      • ویژگی fill رنگ دایره را مشخص می کند.
      • برچسب بسته شدن </ svg> نشان دهنده پایان تصویر SVG است.

      کلام آخر

      در اولین جلسه از سری آموزش svg به بررسی و معرفی اجمالی svg پرداختیم و شما را با شماری از ویژگی های این ابزار و نقاط قوت و ضعف آن آشنا نمودیم.
      در جلسه بعد از دوره آموزش svg قرار است به بررسی اشکال (shapes) در svg بپردازیم.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۰۱ : بررسی و معرفی اجمالی SVG
      به اشتراک بگذارید