در جلسه قبلی آموزش HTML با تگ Canvas در html برای رسم عناصر گرافیکی آشنا شدیم. در این بخش به تگ SVG در html خواهیم پرداخت.
SVG مخفف Scalable Vector Graphics است.
SVG چیست
SVG یک فرمت تصویر مبتنی بر XML است که برای تعریف وکتورهای دوبعدی بر اساس گرافیک ها برای وب است.
یک تصویر وکتور می تواند خیلی خیلی بزرگ یا خیلی کوچک شود بدون آن که کیفت تصویر افت کند.
تصاویر SVG در فایل های XML تعریف می شوند و به این معنی است که تصاویر می تواند توسط هر ویرایشگر متنی ساخته و ادیت شوند.
چندین مزیت SVG ها نسبت به دیگر فرمت های تصویر مانند jpeg, png, gif و غیره :
- تصاویر SVG می تواند جستجو, ایندکس, اسکریپت نویسی و فشرده شوند.
- تصاویر SVG می تواند بصورت real-time توسط جاوااسکریپت ساخته و ویرایش شوند.
- تصاویر SVG می تواند با کیفیت بسیار بالا در هر رزولوشینی پرینت شوند.
- تصاویر SVG می تواند می تواند توسط المان های انمیشنی, بصورت اینمیشن در آید.
- تصاویر SVG می تواند به یک سند دیگر لینک شوند.
نکته: تصاویر وکتور توسط مجموعه از اشکال با ریاضی تشکیل شده اند در حالی که تصاویر bitmap توسط نقطه هایی که پیکسل می نامیم ایجاد شده اند.
قرار دادن SVG در صفحات HTML
شما می توانید گرافیک های SVG را مستقیمان داخل سند خود با استفاده از تگ SVG در HTML قرار بدید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 SVG</title> </head> <body> <svg width="300" height="200"> <text x="10" y="20" style="font-size:14px;"> Your browser support SVG. </text> Sorry, your browser does not support SVG. </svg> </body> </html> |
رسم اشکال با SVG
بخش زیر به شما نحوه کشیدن وکتورهای ساده را با استفاده از تگ SVG در HTML نشان می دهد.
رسم یک خط با SVG
خط یکی از ساده ترین اشکالی است که با SVG می توانید رسم کنید. مثال زیر به شما نحوه رسم یک خط مستقیم را با المان <line> در SVG را نشان می دهد:
|
1 2 3 |
<svg width="300" height="200"> <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" /> </svg> |
خصوصیات x1, x2, y1, y2 برای المان <line> یک خط را از <x1,y1> به <x2,y2> رسم می کند.
رسم یک مستطیل با SVG
شما می توانید مربع و مستطیل را با المان <rect> در SVG رسم کنید. مثال زیر به شما نحوه رسم یک مستطیل و استایل دهی به آن با SVG را نشان می دهد:
|
1 2 3 |
<svg width="300" height="200"> <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" /> </svg> |
خصوصیات x,y المان <rect> مختصات گوشه سمت چپ مستطیل را نشان می دهند. خصوصیات width , height عرض و ارتفاع شکل را مشخص می کنند.
رسم یک دایره با SVG
شما می توانید یک دایره (circle) را با المان <circle> در SVG رسم کنید. مثال زیر به شما نحوه رسم یک دایره و استایل دهی به آن با SVG را نشان می دهد:
|
1 2 3 |
<svg width="300" height="200"> <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" /> </svg> |
خصوصیات cx, cy المان <circle> مختصات وسط دایره و r نیز شعاع دایره را مشخص می کند. اگر خصوصیات cx, cy مشخص نشوند, وسط دایره (۰,۰) درنظر گرفته می شود.
رسم یک متن با SVG
شما می توانید یک متن را با SVG در صفحات وب طراحی کنید. متن در SVG مانند یک شی گرافیکی رندر می شود پس می توانید تمام خصوصیات یک گرافیک را لحاظ کنید اما هنوز هم مثل یک متن باشد.
به این معنا که متن می تواند توسط کاربر انتخاب و کپی شود.
|
1 2 3 4 5 6 7 8 |
<svg width="300" height="200"> <text x="20" y="30" style="fill:purple; font-size:22px;"> Welcome to Our Website! </text> <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;"> Here you will find lots of useful information. </text> </svg> |
خصوصیات x, y المان <text> مکان گوشه سمت چپ را در بصورت مطلق تعریف می کنند درحالی که خصوصیات dx و dy مکان نسبی را مشخص می کند.
می توانید از المان <tspan> برای فرمت بندی دوباره یا موقعیت دهی مجدد متن داخل <text> استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 |
<svg width="300" height="200"> <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);"> <tspan style="fill:purple; font-size:22px;"> Welcome to Our Website! </tspan> <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;"> Here you will find lots of useful information. </tspan> </text> </svg> |
امیدوارم در این بخش آموزش HTML , از تگ SVG در html نهایت استفاده را برده باشید.
در بخش بعدی با قرار دادن مالتی مدیا در صفحه وب آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
