مقدمه
با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به دوره آموزش 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 width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /> </svg> |
SVG XML به طور مستقیم در یک صفحه HTML قرار دهید.
مثال : estSVG.htm
| <html> <title>SVG Image</title> <body> <h1>Sample SVG Image</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /> </svg> </body> </html> |
خروجی
textSVG.htm را در مرورگر وب Chrome باز کنید. شما می توانید از Chrome / Firefox / Opera برای مشاهده تصویر 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 بپردازیم.
با پی وی لرن همراه باشید.