فونت آیکون‌های SVG

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

بعد از دانلود کردن و ذخیره کردن باید از پوشه fonts، فونت‌ها رو که به چهار نوع فرمت می‌باشد را در پوشه فونت خود قرار بدهیم و در CSS لینک دهید تا فونت در سایت قرار بگیرد؛ مثلاً:

@font-face {
 font-family: 'icomoon';
 src: url('../font/icomoon.eot?b1ihj2');
 src: url('../font/icomoon.eot?b1ihj2#iefix') format('embedded-opentype'), url('../font/icomoon.ttf?b1ihj2') format('truetype'), url('../font/icomoon.woff?b1ihj2') format('woff'), url('../font/icomoon.svg?b1ihj2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

و برای جلوگیری از مسائل با افزونه‌های مرورگر که فونت‌ها را تغییر می‌دهند از کد زیر استفاده می‌بریم که در style.css می‌باشد و باید نام و کد فونت‌ها رو در CSS معرفی کنیم تا موقع صدا کردن در HTML بتواند آن‌ها را تشخیص بدهد و به‌درستی آن‌ها را در سایت بیاورد. برای مثال:

[class^="icon-"],
[class*=" icon-"] {
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-1:before {
 content: "\e900";
}

.icon-2:before {
 content: "\e901";
}

.icon-3:before {
 content: "\e902";
}

خب در HTML برای صدازدن این آیکون‌ها کافی است فقط اسم آن‌ها را صدا بزنیم و در CSS هم آن‌ها را تغییر سایز و رنگ و هاور بدهیم.

<i class=" icon-1"></i>

برای صدازدن آیکون‌های SVG می‌توان از بیشتر تگ‌های HTML استفاده برد ولی مرسوم آن‌ها تگ <i></i> می‌باشد.

فونت آیکون‌های Font Awesome(فونتْ اَوْسام)

یکی از بهترین و کامل‌ترین فونت آیکون رایگان می‌باشد که شامل زیباترین فونت‌ها می‌باشد. برای استفاده از این فونت آیکون کافی است آن را از سایت Font Awesome دانلود کنید و دو پوشه css و font را در روت سایت خود کپی نمایید.
حال کافی است در فایل html خود و در داخل تگ head, از تگ link برای اتصال فایل css ای که در پوشه css قرار دارد استفاده نمایید. به‌صورت زیر

<link href="css/font-awesome.min.css" rel="stylesheet">

حال به‌راحتی و با یک خط کد در هر جای سایت خود استفاده کنید و در CSS هم آن را تغییر دهید. باید در نظر داشته باشیم برای صدازدن این آیکون‌ها حتماً در کلاس خود باید fa را صدا بزنیم.

<i class="fa fa-camera-retro"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-play"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"></i>
و ...

توجه: چون تمامی این عکس‌ها به‌صورت فونت می‌باشد، می‌توانید از خاصیت‌های font و color در css استفاده نموده و سایز و رنگ فونت را زیاد یا کم نمایید.

برای اینکه راحت‌تر بتوانید فونت موردنظر را پیدا کنید و از آن استفاده ببرید به این لینک بروید،تمام فونت‌ها بانام و کد می‌توان مورداستفاده قرارداد. می‌توان فونت را بر روی سیستم خود ذخیره کنید و از آیکون‌ها هم در سایر نرم‌افزارهای دیگر مانند فتوشاپ یا ایلاستاتور استفاده کرد (زیرا این وکتور های زیبا به‌صورت فونت هستند).

فونت آیکون‌های Glyphicons(گلیف آیکون)

یکی دیگر از فونت آیکون‌های زیبا و کم‌حجم که تصویر نیستند و فونت هستند، گلیف آیکون می‌باشد. است چراکه تصویر نیستند و فوت هستند را می‌توان از سایت Glyphicons خریداری کرد ولی اگر شما از بوت استرپ استفاده کنید به‌صورت رایگان می‌توانید از این فونت آیکون‌ها استفاده کنید. استفاده از این فونت آیکون در همه جای سایت امکان‌پذیر می‌باشد، کافی است فقط آن را صدا زد، مانند زیر:

<i class="glyphicon glyphicon-search"></i>

فونت آیکون‌های livicons(آیکون‌های زنده)

نسل جدید آیکون‌های سبک و برداری لایو آیکون‌ها هستند که برای سایت شما مورد می‌توان مورداستفاده قرار گرفت. این آیکون‌ها با فرمت SVG ساخته‌شده‌اند و توسط جاوا اسکریپت پشتیبانی می‌شوند. در مرورگرهای مدرن و هر دستگاهی قابل‌نمایش می‌باشند. نمونه این آیکون‌ها در سایت سازنده یا سایت اصلی livicon  هست. نسخه این آیکون‌ها باید خریداری شود تا بتوانید استفاده کنید که متأسفانه کاربران ایرانی به دلیل وجود محدودیت در دسترسی به درگاه‌های خارج از کشور به‌سختی می‌توان از این فونت‌ها بهره ببرند.
با فرض اینکه شما این آیکون‌ها را در اختیاردارید، برای استفاده از این آیکون‌ها شما می‌توانید فایل پیش‌فرض livicon.js استفاده کنید که شامل ۴۰۴ آیکون می‌شود که این کار توصیه نمی‌شود چون به‌اندازه‌ی تمام آیکون‌ها حجم فایل افزایش پیدا می‌کند. بهترین کار این است که آیکون‌های دلخواهتان رو انتخاب کنید و در پروژه تون به کار ببرید. در این صورت حجم کمتری در سایت شما بارگذاری می‌شود.
بسته‌ای که دریافت کردید بازکنید. پوشه‌ای به نام Customizer مشاهده می‌کنید، وارد این پوشه شوید و پوشه‌ی js رو بازکنید. از بین تمامی فایل‌های js موجود شما چهار فایل رو نیاز دارید.

•  jquery-1.9.1.min.js
•  raphael-min.js
•  livicons-1.2.min.js
•  json2.min.js

سپس هر 4 فایل را در مسیر خود در هاست یا فضا سایتتان متصل کنید و این آیکون‌های زیبا را در هر جای سایت خواستید صدا بزنید و از آن‌ها استفاده ببرید.

<i class="livicon" data-n="user-add" data-c="#000" data-hc="#ccc" ></i>

• class=”livicon”: این خصوصیت و مقدار همیشه ثابت هست.
• data-n: نام آیکونی هست که مدنظر شماست. این نام رو از همان صفحه customizerکپی کنید.
• data-c: این خاصیت رنگ آیکون رو مشخص می‌کند.
• data-hc: این خاصیت رنگ آیکون رو در زمان hoverمشخص می‌کند؛ یعنی زمانی که موس روی آیکون قرار می‌گیرد رنگ آیکون به رنگ انتخابی شما تغییر می‌کند.

این آیکون‌ها خاصیت‌های مختلی دارند که می‌توان آن‌ها را تغییر داد که شامل تکرار انیمیشن، تغییر رنگ انیمیشن، بازه زمانی اتفاق افتادن انیمیشن و… .

The post استفاده از فونت آیکون appeared first on وب دیزاین.

به معنی گرافیک برداری مقیاس‌پذیر می‌باشد که مخفف کلمه 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 وب دیزاین.