طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش HTML – تگ SVG در html


آموزش HTML - مقدمه

در جلسه قبلی آموزش 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 قرار بدید.

رسم اشکال با SVG

بخش زیر به شما نحوه کشیدن وکتورهای ساده را با استفاده از تگ SVG در HTML نشان می دهد.

حتما بخوانید  آموزش HTML - پخش ویدئو در HTML

رسم یک خط با SVG

خط یکی از ساده ترین اشکالی است که با SVG می توانید رسم کنید. مثال زیر به شما نحوه رسم یک خط مستقیم را با المان <line> در SVG را نشان می دهد:

خصوصیات x1, x2, y1, y2 برای المان <line> یک خط را از <x1,y1> به <x2,y2> رسم می کند.

آموزش HTML - تگ SVG در html

رسم یک مستطیل با SVG

شما می توانید مربع و مستطیل را با المان <rect> در SVG رسم کنید. مثال زیر به شما نحوه رسم یک مستطیل و استایل دهی به آن با SVG را نشان می دهد:

خصوصیات x,y المان <rect> مختصات گوشه سمت چپ مستطیل را نشان می دهند. خصوصیات width , height عرض و ارتفاع شکل را مشخص می کنند.

آموزش HTML - تگ SVG در html

رسم یک دایره با SVG

شما می توانید یک دایره (circle) را با المان <circle> در SVG رسم کنید. مثال زیر به شما نحوه رسم یک دایره و استایل دهی به آن با SVG را نشان می دهد:

خصوصیات cx, cy المان <circle> مختصات وسط دایره و r نیز شعاع دایره را مشخص می کند. اگر خصوصیات cx, cy مشخص نشوند, وسط دایره (۰,۰) درنظر گرفته می شود.

آموزش HTML - تگ SVG در html

رسم یک متن با SVG

شما می توانید یک متن را با SVG در صفحات وب طراحی کنید. متن در SVG مانند یک شی گرافیکی رندر می شود پس می توانید تمام خصوصیات یک گرافیک را لحاظ کنید اما هنوز هم مثل یک متن باشد.

حتما بخوانید  آموزش HTML – خواص و صفات تگ ها

به این معنا که متن می تواند توسط کاربر انتخاب و کپی شود.

خصوصیات x, y المان <text> مکان گوشه سمت چپ را در بصورت مطلق تعریف می کنند درحالی که خصوصیات dx و dy مکان نسبی را مشخص می کند.

آموزش HTML - تگ SVG در html

می توانید از المان <tspan> برای فرمت بندی دوباره یا موقعیت دهی مجدد متن داخل <text> استفاده کنید.

آموزش HTML - تگ SVG در html

 

امیدوارم در این بخش آموزش HTML , از تگ SVG در html نهایت استفاده را برده باشید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

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

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه