آموزش SVG در HTML

Ratings
(0)

 

SVG مخفف کلمات Scalable Vector Graphics می باشد.

SVG گرافیک های مبتنی بر بردار را در XML تعریف می کند که می تواند مستقیماً در صفحات HTML اضافه شود. گرافیک های SVG مقیاس پذیر هستند و اگر روی آنها زوم شود یا تغییر اندازه داده شوند، کیفیت آنها از دست نمی رود.

 

SVG توسط تمام مرورگرهای اصلی پشتیبانی می شود.

SVG چیست؟

  • SVG مخفف عبارات Scalable Vector Graphics به معنی: گرافیک های برداری مقیاس پذیر می باشد.
  • از SVG برای تعریف گرافیک های مبتنی بر بردار برای وب استفاده می شود.
  • SVG گرافیک هایی را در فرمت XML تعریف می کند.
  • هر عنصر و خصوصیتی(attribute) در فایل های SVG می توانند متحرک سازی شوند.
  • SVG توسط W3C پیشنهاد شده است.
  • SVG با دیگر استانداردها، از قبیل CSS، DOM، XSL و جاوا اسکریپت ادغام می شود.

بررسی عنصر <svg>

عنصر <svg> در HTML، یک ظرف برای گرافیک های SVG می باشد. SVG روش های زیادی برای ترسیم مسیرها، مستطیل ها، دایره ها، چند ضلعی ها، متن ها و بسیاری چیزهای دیگر دارد.

رسم دایره در SVG

مثال شماره 1

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

مثال شماره 2

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
امتحان کنید

رسم مستطیل در SVG به همراه شفافیت(Opacity) و گوشه های گرد شده

مثال شماره 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>
امتحان کنید

یک بیضی در SVG با شیب رنگ و یک متن

مثال شماره 4

<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>
  مرورگر شما از اس وی جی پشتیبانی نمی کند
</svg>
امتحان کنید

تفاوت بین SVG و Canvas

SVG یک زبان برای توصیف گرافیک های دو بعدی در XML است، در حالیکه Canvas گرافیک های دوبعدی را با استفاده از جاوا اسکریپت در حین اجرا(on the fly) ترسیم می کند.

SVG مبتنی بر XML است؛ یعنی هر عنصری که در داخل SVG DOM قرار دارد (را پوشش می دهد). ما می توانیم شنونده های رویداد(event handlers) جاوا اسکریپت را به گرافیک های SVG ضمیمه کنیم.

در SVG، هر شکلی که رسم شده است، بعنوان یک آبجکت(object) در نظر گرفته می شود. اگر خصوصیت های(attribute) یک آبجکت SVG تغییر کنند، مرورگر به طور اتوماتیک می تواند شکل را مجدداً رندر(re-render) کند.

عنصر Canvas به صورت پیکسل به پیکسل رندر می شود. در Canvas وقتی که گرافیک نمایش داده می شود، توسط مرورگر فراموش می شود. اگر موقعیت آن تغییر داده شود، نیاز است تا تمام صحنه(scene) و هر آبجکتی که توسط گرافیک مورد نظر پوشش داده می شود، مجدداً رسم شود؛

مقایسه بین SVG و Canvas

در جدول زیر، تفاوت های مهم بین Canvas و SVG نشان داده شده است:

Canvas SVG
رزولوشن وابسته رزولوشن مستقل
پشتیبانی نکردن از event handler ها پشتیبانی از event handler ها
ضعف در قابلیت رندر گیری خوب متن قابلیت رندر گیری خوب متن
می توانیم تصویر تولید شده را به صورت png.  یا jpg. ذخیره کنیم. رندر گیری کند در صورت پیچیدگی
برای بازی های گرافیکی بسیار مناسب است برای برنامه های بازی مناسب نیست

 

  • بازدید: 186

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال