معرفی و کاربرد تگ svg در html
در این مقاله از سایت آموزی در مورد تگ svg در html جهت استفاده شما مخاطبان محترم توضیحاتی را ارائه می نماییم. با ما همراه باشید.
کاربرد عنصر جدید svg در html5
SVG مخفف کلمه Scalable Vector Graphics است.
عبارت انگلیسی Scalable Vector Graphics به معنی گرافیک برداری مقیاس پذیر میباشد.
SVG برای تعریف گرافیک در وب سایت استفاده می شود.
تگ <svg> یک تگ جدید است که در HTML5 معرفی شده است.
تگ <svg> ظرفی برای گرافیک SVG درون وبسایت فراهم می کند.
جهت استفاده از تگ <svg> روش های مختلفی وجود دارد. که در ادامه به معرفی این روش ها می پردازیم.
روش های استفاده از تگ 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> در html
<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> در html ( تصاویر 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 در html
SVG زبانی برای رسم اشکل دوبعدی گرافیکی یا 2d در XML است.
اما تگ Canvas ، اشکال هندسی دو بعدی را در حال حرکت رسم با کمک جاوا اسکریپت خلق می کند.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
پشتیبانی مرورگرها از تگ <svg> در HTML
تگ | |||||
svg | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
معرفی و کاربرد تگ svg در html تصاویر و انیمیشن svg – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید