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

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

HTML5 SVG - گرافیک برداری مقیاس پذیر

SVG گرافیک های مبتنی بر وکتور را در قالب XML تعریف می کند.


SVG چیست؟

  • SVG مخفف Scalable Vector Graphics است
  • SVG برای تعریف گرافیک وب استفاده می شود
  • SVG یک توصیه W3C است

المان <svg> در HTML

المان <svg> ظرفی برای گرافیک SVG است.

SVG روشهای مختلفی برای ترسیم مسیرها ، جعبه ها ، دایره ها ، متن و تصاویر گرافیکی دارد.


پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که المان <svg> را کاملاً پشتیبانی می کند. .

المان Chrome Edge Firefox Safari Opera
<svg> 4.0 9.0 3.0 3.2 10.1

دایره SVG

مثال

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="orange" />
</svg>

</body>
</html>
خودتان آزمایش کنید »

مستطیل SVG



مثال

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
خودتان آزمایش کنید »

مستطیل گرد SVG

متأسفیم ، مرورگر شما از SVG درون خطی پشتیبانی نمی کند.

مثال

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
خودتان آزمایش کنید »

SVG ستاره

متأسفیم ، مرورگر شما از SVG درون خطی پشتیبانی نمی کند.

مثال

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
خودتان آزمایش کنید »

آرم SVG

SVG متأسفیم ، مرورگر شما از SVG درون خطی پشتیبانی نمی کند.

مثال

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  متأسفیم ، مرورگر شما پشتیبانی نمی کند درون خطی SVG.
</svg>
خودتان آزمایش کنید »

تفاوت SVG و Canvas

SVG زبانی برای توصیف گرافیک های دو بعدی در XML است.

Canvas گرافیک دو بعدی را در حال پرواز (با جاوا اسکریپت) ترسیم می کند.

SVG مبتنی بر XML است ، به این معنی که هر المانی در SVG DOM موجود است. می توانید کنترل کننده های رویداد JavaScript را برای یک المان پیوست کنید.

در SVG ، هر شکل کشیده شده به عنوان یک شی به یاد می آید. اگر ویژگی های یک شی SVG تغییر کند ، مرورگر می تواند به صورت خودکار شکل را دوباره ارائه دهد.

Canvas پیکسل به پیکسل ارائه می شود. در بوم ، به محض کشیدن گرافیک ، توسط مرورگر فراموش می شود. اگر موقعیت آن تغییر کند ، کل صحنه نیاز به ترسیم مجدد دارد ، از جمله اشیایی که ممکن است توسط این گرافیک پوشانده شده باشند.


مقایسه Canvas و SVG

جدول زیر چند تفاوت مهم بین Canvas و SVG را نشان می دهد:

Canvas SVG
  • به رزلوشن وابسته است
  • بدون پشتیبانی از هندلرهای برگزاری رویداد
  • قابلیت نمایش متن ضعیف
  • می توانید تصویر حاصل را به صورت .png یا .jpg ذخیره کنید
  • برای بازی های فشرده گرافیکی بسیار مناسب است
  • رزلوشن مستقل
  • پشتیبانی کننده رویداد
  • بهترین برای برنامه هایی با مناطق رندر بزرگ (نقشه های گوگل)
  • اگر پیچیده باشد ، ارائه کند است (هر چیزی که از DOM زیاد استفاده کند کند خواهد بود)
  • برای برنامه های بازی مناسب نیست

آموزش SVG

برای کسب اطلاعات بیشتر در مورد SVG ، لطفاً آموزش SVG ما را بخوانید.






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir