آموزش طراحی سایتآموزش HTML

آشنایی با svg در HTML

ساخت تصاویر برداری مقیاس پذیر در HTML

منظور از SVG چیست؟ چگونه می‌توانیم تصاویر برداری مقیاس پذیر ایجاد کنیم؟ چگونه تگ <svg> را یاد بگیریم؟ SVG چیه؟ در این مقاله می‌خواهیم در رابطه با تگ <svg> صحبت کنیم.

SVG در html چیست؟

  • SVG معادل scalable vector graphics به معنای تصاویر برداری مقیاس پذیر است.
  • این عنصر یا تگ برای تعریف گرافیک در وب استفاده می شود.
  • همچنین SVG توسط w3c توصیه شده است.

عنصر یا تگ SVG در html

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

البته ما می‌توانیم از تصاویر خروجی گرفته شده نیز که در اینترنت موجود است استفاده کنیم. خب بریم در آخرین مقاله از فصل آشنایی با گرافیک در HTML با چند مثال بیشتر با 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> یک مستطیل رسم می‌کنیم که پس زمینه آبی و حاشیه ۱۰ پیکسلی مشکی رنگ دارد.

<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 با رسم یک مستطیل

رسم مربع گوشه خمیده

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

<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 با رسم یک مربع گرد شده

رسم ستاره

برای ایجاد اجزاء Polygon استایل مثل ستاره، از تگ <polygon> داخل تگ <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> برای رسم لوگو ها نیز می‌توانیم استفاده کنیم. برای مثال در مثال زیر با استفاده از گرادینت ها و نوشتار یک لوگو ساده با عنوان Mizfa ایجاد کرده ایم.

<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="40" y="86">Mizfa</text>
  Sorry, your browser does not support inline SVG.
</svg>
طراحی لوگو با استفاده از SVG
طراحی لوگو با استفاده از SVG

تفاوت بین SVG و Canvas

SVG در حقیقت یک زبان برای تعریف گرافیک دو بعدی در xml است. Canvas گرافیک دو بعدی رسم می کند اما توسط جاوا اسکریپت.

تگ <svg> برپایه xml کار می کند، این مسئله باعث می شود هر عنصر داخل <svg> در dom قابل دسترس باشد. شما می توانید یک event جاوا اسکریپت را برای هر عنصر داخل آن تعریف کنید.

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

Canvas به صورت پیکسل به پیکسل رسم می کند. در canvas پس از رسم گرافیک مرورگر دیگر محتوای داخل canvas را به روز نمی کند. اگر قرار به تغییر موقعیت عنصر canvas باشد باید کل صحنه آن دوباره رسم شود، که این شامل هر شی که داخل آن است نیز می شود.

یک مقاله در رابطه با آشنایی با Canvas در پایگاه دانش میزفا موجود هست که می‌تونید آن را بخوانید.

مقایسه Canvas و SVG

در اینجا به شرح مهم ترین تفاوت های svg و canvas می پردازیم.

canvas<svg>
وابسته به رزولیشنغیر وابسته به resolution
هیچ پشتیبانی بر روی رویداد ها نداردپشتیبانی بر روی روایداد ها
سازگاری پایین در رسم متونمناسب برای اپلیکیش های مقیاس بزرگ مانند گوگل مپ
می توانید نتیجه را به صورت png یا jpg  ذخیره کنیدرسم کند در استفاده های پیچیده(هر چیزی که به دفعات زیاد از dom استفاده کند آهسته می شود).
مناسب برای بازی های گرافیک محوربرای بازی مناسب نیست

نتیجه گیری

در این مقاله از سری مقالات آموزش متن محور HTML با تگ SVG آشنا شدیم، مثال هایی از آن زدیم و تفاوت‌های آن را با Canvas مورد بررسی قرار دادیم. امیدوارم استفاده لازم را از محتوای این مقاله برده باشید و به خوبی آموزش گرافیک در HTML را آموخته باشید. اگر سوال پیشنهاد یا انتقادی داشتید حتما آن را با من در میان بگذارید.

تا مقاله بعدی ….

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر