تگ <svg> HTML

التعريف والاستخدام

<svg> يحدد العلامة <svg> صندوق SVG.

SVG يحتوي على العديد من طرق الرسم في المسارات، النوافذ، الدوائر، النصوص والصور الرسومية.

للتعرف على المزيد حول SVG، يرجى قراءة دروس SVG。

يرجى الرجوع أيضًا إلى:

دليل HTML:HTML SVG

دليل SVG:دروس SVG

مثال

مثال 1

رسم دائرة:

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

آزمایش کنید

مثال 2

رسم مستطيل:

<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>

آزمایش کنید

مثال 3

رسم مستطيل ذو زوايا مكتملة:

<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>

آزمایش کنید

مثال 4

رسم نجمة:

<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>

آزمایش کنید

مثال 5

رسم رمز 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>

آزمایش کنید

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که از این ویژگی پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1