گرافیک SVG در HTML
SVG (گرافیک برداری مقیاس‌پذیر)
SVG گرافیک مبتنی بر بردار را در قالب XML تعریف می‌کند که می‌تواند مستقیماً در صفحات HTML جای‌گذاری شود. گرافیک‌های SVG مقیاس‌پذیر هستند و در صورت بزرگ‌نمایی یا تغییر اندازه، هیچ کیفیتی را از دست نمی‌دهند:
SVG
SVG توسط تمام مرورگرهای اصلی پشتیبانی می‌شود.
SVG چیست؟
-
SVG مخفف Scalable Vector Graphics (گرافیک برداری مقیاس‌پذیر) است.
-
SVG برای تعریف گرافیک مبتنی بر بردار برای وب استفاده می‌شود.
-
SVG گرافیک را در فرمت XML تعریف می‌کند.
-
هر عنصر و ویژگی در فایل‌های SVG را می‌توان متحرک‌سازی کرد.
-
SVG یک توصیه‌نامه از کنسرسیوم وب جهانی (W3C) است.
-
SVG با استانداردهای دیگر مانند CSS، DOM، XSL و جاوااسکریپت یکپارچه می‌شود.
عنصر <svg>
عنصر <svg> در HTML یک محفظه (container) برای گرافیک SVG است. SVG متدهای مختلفی برای ترسیم مسیرها، مستطیل‌ها، دایره‌ها، چندضلعی‌ها، متن و موارد بسیار دیگر دارد.
دایره در SVG
مثال
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"
/>
</svg>
</body>
</html>مستطیل در SVG
مثال
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</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
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</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>
Sorry, your browser does not support inline SVG.
</svg>تفاوت‌های بین SVG و Canvas
SVG زبانی برای توصیف گرافیک دوبعدی در XML است، در حالی که Canvas گرافیک دوبعدی را به صورت پویا (on the fly) (با جاوااسکریپت) ترسیم می‌کند. SVG مبتنی بر XML است، به این معنی که هر عنصر در DOM مربوط به SVG در دسترس است. شما می‌توانید کنترل‌کننده‌های رویداد (event handlers) جاوااسکریپت را به گرافیک‌های SVG متصل کنید. در SVG، هر شکل ترسیم‌شده به عنوان یک شیء در حافظه باقی می‌ماند. اگر ویژگی‌های یک شیء SVG تغییر کند، مرورگر می‌تواند به طور خودکار آن شکل را دوباره رندر کند. Canvas به صورت پیکسل به پیکسل رندر می‌شود. در canvas، هنگامی که گرافیک ترسیم شد، توسط مرورگر فراموش می‌شود. اگر موقعیت آن نیاز به تغییر داشته باشد، کل صحنه باید دوباره ترسیم شود، از جمله هر شیئی که ممکن است توسط آن گرافیک پوشانده شده باشد.
مقایسه SVG و Canvas
جدول زیر برخی از تفاوت‌های مهم بین Canvas و SVG را نشان می‌دهد: