HTML5 SVG - گرافیک برداری مقیاس پذیر
SVG گرافیک های مبتنی بر وکتور را در قالب XML تعریف می کند.
SVG چیست؟
- SVG مخفف Scalable Vector Graphics است
- SVG برای تعریف گرافیک وب استفاده می شود
- SVG یک توصیه W3C است
المان <svg> در HTML
المان <svg> ظرفی برای گرافیک SVG است.
SVG روشهای مختلفی برای ترسیم مسیرها ، جعبه ها ، دایره ها ، متن و تصاویر گرافیکی دارد.
پشتیبانی مرورگر
اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که المان <svg> را کاملاً پشتیبانی می کند.
.
| المان | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
دایره SVG
مثال
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50"
r="40" stroke="red"
stroke-width="4" fill="orange"
/>
</svg>
</body>
</html>
خودتان
آزمایش کنید »
مستطیل 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="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>
خودتان
آزمایش کنید »
آرم 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>
خودتان
آزمایش کنید »
تفاوت SVG و Canvas
SVG زبانی برای توصیف گرافیک های دو بعدی در XML است.
Canvas گرافیک دو بعدی را در حال پرواز (با جاوا اسکریپت) ترسیم می کند.
SVG مبتنی بر XML است ، به این معنی که هر المانی در SVG DOM موجود است. می توانید کنترل کننده های رویداد JavaScript را برای یک المان پیوست کنید.
در SVG ، هر شکل کشیده شده به عنوان یک شی به یاد می آید. اگر ویژگی های یک شی SVG تغییر کند ، مرورگر می تواند به صورت خودکار شکل را دوباره ارائه دهد.
Canvas پیکسل به پیکسل ارائه می شود. در بوم ، به محض کشیدن گرافیک ، توسط مرورگر فراموش می شود. اگر موقعیت آن تغییر کند ، کل صحنه نیاز به ترسیم مجدد دارد ، از جمله اشیایی که ممکن است توسط این گرافیک پوشانده شده باشند.
مقایسه Canvas و SVG
جدول زیر چند تفاوت مهم بین Canvas و SVG را نشان می دهد:
| Canvas | SVG |
|---|---|
|
|
آموزش SVG
برای کسب اطلاعات بیشتر در مورد SVG ، لطفاً آموزش SVG ما را بخوانید.
سایت توسط چارچوب farsiw3.ir طراحی شده است.
