آشنایی با SVG

1 Star2 Stars3 Stars4 Stars5 Stars ۱۸ امتیاز

Loading…

SVG چیست؟

به معنی گرافیک برداری مقیاس‌پذیر می‌باشد که مخفف کلمه Scalable Vector Graphics می‌باشد. برای گرافیک‌های دوبعدی استفاده می‌شود. ازنظر کیفیت بسیار عالی هستند که با ZOOM روی گرافیک  کیفیت آن تغییری نمی‌کند چون‌که تصاویر SVG وکتور و برداری هستند و   حجم این فایل‌ها از فرمت‌های پیکسلی کم‌تر است، چون فایل‌های SVG کاملاً XML هستند.

 

پشتیبانی مرورگرها

  • مرورگر chrome   : نسخه ۴٫۰
  • مرورگر FireFox :  ورژن۰
  • مرورگر internet Explorer  : ورژن۰
  • مرورگر Opera : نسخه ۰
  • مرورگر safari : نسخه ۳٫۲

رسم دایره در SVG

ما میتوانیو با SVG اشکال متفاوتی را رسم کنیم ولی من فقط رسم دایره را برای شما توضیح می‌دهم، بقیه اشکال را در زیر معرفی خواهم کرد. رسم دایره در SVG با استفاده از عنصر <circle>. از عنصر <circle> برای ایجاد یک دایره استفاده می‌شود.

در زیر کد SVG دایره‌ی بالا را در قالب یک مثال مشاهده می‌کنید:

<html>
  <head>
  </head>
  <body>
      <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
      </svg>
  </body>
</html>


توضیحات کد بالا:

  • برای رسم دایره به کد SVG خود یک طول و عرض مشخصی می‌دهیم.
  • خصوصیات cx و cy به ترتیب، مختصات x و y از مرکز دایره را مشخص می‌کنند. درصورتی‌که cx و cy مشخص نشوند، مرکز دایره به مختصات (۰,۰) در نظر گرفته خواهد شد.
  • خصوصیت r، شعاع دایره را مشخص می‌کند.

 

اَشکال SVG

SVG شامل تعدادی شکل از پیش تعریف‌شده است که می‌توانند توسط برنامه نویسان مورداستفاده قرار بگیرند:

<rect> مستطیل

<circle> دایره

<ellipse> بیضی

<line> خط

<polyline> چندخطی

<polygon> چندضلعی

<path> مسیر

نکته‌ای باید در اینجا بیان کرد این است که می‌توان از عنصر path برای رسم یک مسیر و شکل خاص استفاده کرد:

برای ایجاد یک رسم در SVG، از دستورات خلاصه‌ی زیر استفاده می‌شود:

M  = برو به یک نقطه

L  = خط رسم کن تا این نقطه

H  = خط افقی رسم کن تا این نقطه

V  = خط عمودی رسم کن تا این نقطه

C  = رسم منحنی تا این نقطه

S  = رسم منحنی صاف تا این نقطه

Q  = رسم منحنی درجه ۲

T  = رسم منحنی درجه ۲ صاف

A  = کمان بیضوی

Z  = بستن رسم

<html>

<head>
</head>

<body>
    <svg height="210" width="400">
        <path fill="#660066" d="M70 0 L170 0 L250 200  L0 200 Z " />
    </svg>
</body>

</html>

در کد بالا یک‌چند ضلعی را رسم کردیم.

SVG تعداد زیادی خصوصیت را برای ایجاد شیوه‌های رسم مختلف، ارائه می‌دهد. ازجمله :

  • خصوصیت stroke درواقع رنگ یک خط یا متن یا کادر دور عناصر را مشخص می‌کند.
  • خصوصیت stroke-width ضخامت یک خط یا کادر دور عناصر را مشخص می‌کند.
  • خصوصیت stroke-linecap باعث می‌شود تا برای یک رسم بازشده، حالت ابتدا یا انتهای آن رسم را مشخص کنیم.
  • از خصوصیت stroke-dasharray برای ایجاد خط‌ها به‌صورت فاصله‌دار، استفاده می‌شود.

تمامی خصوصیات شیوه‌ی رسم می‌توانند به هر نوع خط، یا متن یا خطوط دور عناصری همچون دایره، اضافه شوند.

ایجاد عکس‌های SVG

عکس‌های SVG می‌توانند به‌وسیله‌ی هر ادیتور متنی ایجاد شوند؛ اما این راحت‌تر است که برای ایجاد عکس‌های SVG از یک نرم‌افزار ترسیم‌کننده استفاده کنیم.

قرار دادن تصاویر SVG در Html به کمک تگ <img>

اگر تصویر SVG تون رو به‌عنوان یک فایل ذخیره کنید می‌توانید مستقیماً توسط تگ <img> آن را در سایتتان قرار بدید. کافیه کد زیر رو در کدهای html سایتتان قرار بدید:

<html>

<head>
</head>

<body>
    <img src="نام عکس.svg" alt="Image Description">
</body>

</html>

برای توضیحات بیشتر و آشنایی با نحوه ایجاد فونت های اختصاصی  اینجا کلیک  کنید.

 

4 نظر در “آشنایی با SVG

  1. سلام و احترام
    در خصوص قالب فروشگاهی سوالاتی داشتم. بخش پشتیبانی و تیکت غیر فعاله!
    آیا افزونه های مهم ، زرین پال ، کامپوزر، سئو یواست، و … پشتیبانی میکنه؟
    برای محافظت از فایل های قابل فروش امنیتش چطوری ایجاد میشه؟
    پشتیبانی چطوری انجام میشه در صورت خرید نسخه کامل؟
    ای کاش بخش وبلاگی هم داشت.
    سپاس از شما .

    1. علیکم السلام.
      پشتیبانی و تیکت فعاله:
      https://wd7.ir/support
      این افزونه ها کلیه و روی هر قالبی کار میکنه.غیر از کامپوزر.
      برای بحث دانلود از افزونه EDD استفاده شده که اگر طبق روال خودش کار کنین امنیت فایلها اکیه.
      پشتیبانی تو قسمت تیکت در خدمتیم.
      مورد وبلاگی رو تو قسمت تیکت اعلام کنید برای نسخه های بعدی مدنظر باشه.

  2. سلام و احترام خدمت شما بزرگوار
    سپاس از پاسخ شما . چندمین بار به سایت شما میام ولی باز هم تیکت فعال نیست . فک کنم دو حساب در سایت شما ایجاد کردم ولی صفحه تیکت نمیاد و هر بار از منوی بالا بر روی تب تیکت کلیک میکنم صفحه ثبت نام ظاهر میشه.

    ظمنا مطالب سایت wd7.ir منحصر بفرده موفق و سربلند بمانید.

نظرات شما را پذیراییم