SVG درون‌صفحه HTML5

HTML5 از SVG درون‌محتوایی پشتیبانی می‌کند

SVG چیست؟

  • SVG به معنای گرافیک وکتور قابل انعطاف (Scalable Vector Graphics) است
  • SVG برای تعریف تصاویر وکتور مبتنی بر شبکه استفاده می‌شود
  • SVG با استفاده از قالب XML تعریف می‌شود
  • تصاویر SVG در صورت بزرگ کردن یا تغییر اندازه، کیفیت تصویر خود را از دست نمی‌دهند
  • SVG استاندارد وایرلس وب است

مزایای SVG

مزایای استفاده از SVG در مقایسه با فرمت‌های تصویری دیگر (مانند JPEG و GIF) عبارتند از:

  • تصاویر SVG می‌توانند با ویرایشگرهای متنی ایجاد و ویرایش شوند
  • تصاویر SVG می‌توانند جستجو، شمارش، اسکریپت‌سازی یا فشرده‌سازی شوند
  • SVG قابل انعطاف است
  • تصاویر SVG می‌توانند در هر رزولوشنی با کیفیت بالا چاپ شوند
  • SVG می‌تواند بدون کاهش کیفیت تصویر بزرگ شود

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

Internet Explorer 9، Firefox، Opera، Chrome و Safari از SVG درون‌ریز پشتیبانی می‌کنند.

SVG را مستقیماً در صفحه HTML قرار دهید

در HTML5، شما می‌توانید عناصر SVG را مستقیماً در صفحه HTML قرار دهید:

مثال

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

آزمایش کنید

نتیجه:

آموزش SVG

برای یادگیری بیشتر در مورد SVG، لطفاً از آموزش SVG.