SVG در HTML

شما می‌توانید عنصر SVG را مستقیماً در صفحه HTML گنجانده کنید.

SVG را مستقیماً در صفحه HTML گنجانده شود

در اینجا یک مثال ساده از تصویر SVG آورده شده است:

متاسفانه، مرورگر شما SVG درون‌صفحه را پشتیبانی نمی‌کند.

این کد HTML است:

<!DOCTYPE html>
<html>
<body>
<h1>SVG اولین من</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

شما خودتان امتحان کنید

توضیح کد SVG:

  • تصویر SVG با عنصر <svg> شروع می‌شود
  • ویژگی‌های width و height عناصر <svg> عرض و ارتفاع تصویر SVG را تعریف می‌کنند
  • عنصر <circle> برای ترسیم دایره استفاده می‌شود
  • ویژگی‌های cx و cy مختصات x و y مرکز دایره را تعریف می‌کنند. اگر cx و cy تنظیم نشوند، مرکز دایره به (0, 0) تنظیم می‌شود
  • ویژگی r محیط دایره را تعریف می‌کند
  • stroke و stroke-width属性 کنترل نحوه نمایش لبه‌های شکل را دارند. ما لبه‌های دایره را به رنگ سبز 4 پیکسلی تنظیم می‌کنیم
  • fill 属性设置圆内的颜色。我们将填充颜色设置为黄色
  • برچسب </svg> بسته‌سازی تصویر SVG

توجه: چون SVG با XML نوشته شده است، بنابراین تمام عناصر باید به درستی بسته شوند!