طراحی وب Archives - وب دیزاین https://wd7.ir/tag/طراحی-وب Web Design Mon, 06 Nov 2017 05:29:11 +0000 fa-IR hourly 1 https://wordpress.org/?v=6.8.5 آشنایی با SVG https://wd7.ir/introduction-to-svg.html https://wd7.ir/introduction-to-svg.html#comments Thu, 09 Nov 2017 07:20:54 +0000 https://wd7.ir/?p=1930 SVG چیست؟ به معنی گرافیک برداری مقیاس‌پذیر می‌باشد که مخفف کلمه Scalable Vector Graphics می‌باشد. برای گرافیک‌های دوبعدی استفاده می‌شود. ازنظر کیفیت بسیار عالی هستند که با ZOOM روی گرافیک  کیفیت آن تغییری نمی‌کند چون‌که تصاویر SVG وکتور و برداری هستند و   حجم این فایل‌ها از فرمت‌های پیکسلی کم‌تر است، چون فایل‌های SVG کاملاً XML […]

The post آشنایی با SVG appeared first on وب دیزاین.

]]> SVG چیست؟

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

 

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

  • مرورگر chrome   : نسخه 4.0
  • مرورگر FireFox :  ورژن0
  • مرورگر internet Explorer  : ورژن0
  • مرورگر Opera : نسخه 0
  • مرورگر safari : نسخه 3.2

رسم دایره در 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 مشخص نشوند، مرکز دایره به مختصات (0,0) در نظر گرفته خواهد شد.
  • خصوصیت r، شعاع دایره را مشخص می‌کند.

 

اَشکال SVG

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

<rect> مستطیل

<circle> دایره

<ellipse> بیضی

<line> خط

<polyline> چندخطی

<polygon> چندضلعی

<path> مسیر

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

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

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

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

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

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

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

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

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

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

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>

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

 

The post آشنایی با SVG appeared first on وب دیزاین.

]]> https://wd7.ir/introduction-to-svg.html/feed 4