معرفی و کاربرد تگ svg در html تصاویر و انیمیشن svg

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

در این مقاله از سایت آموزی در مورد تگ svg در html جهت استفاده شما مخاطبان محترم توضیحاتی را ارائه می نماییم. با ما همراه باشید.

آموزش کامل svg انیمیشن siteamoozi سایت آموزی

کاربرد عنصر جدید svg در html5

SVG مخفف کلمه Scalable Vector Graphics است.

عبارت انگلیسی Scalable Vector Graphics به معنی گرافیک برداری مقیاس پذیر میباشد.

SVG برای تعریف گرافیک در وب سایت استفاده می شود.

تگ <svg> یک تگ جدید است که در HTML5 معرفی شده است.

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

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

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

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

روش های استفاده از تگ جدید SVG در HTML5

تگ <svg> دارای چندین روش استفاده برای رسم مسیر ها ، رسم مربع ، رسم مستطیل ، رسم دایره ، ایجاد متن و عکس های گرافیکی است.

مثال در مورد رسم مستطیل با تگ <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 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 width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</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>

مثال در مورد رسم logo با تگ <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> در HTML 4.01 و HTML5

تگ <svg> یک تگ جدید در HTML5 می باشد. و در HTML 4.0.1 و ورژن های قدیمی تر پشتیبانی نمی شود.

تفاوت بین تگ <SVG> و تگ Canvas

تگ svg در html انیمیشن

SVG زبانی برای رسم اشکل دوبعدی گرافیکی یا ۲d در XML است.

اما تگ Canvas ، اشکال هندسی دو بعدی را در حال حرکت رسم با کمک جاوا اسکریپت خلق می کند.

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

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

پشتیبانی مرورگرها از عنصر <svg> در HTML

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ svg در html تصاویر و انیمیشن svg – اختصاصی سایت آموزی