54
تشکر

راهنمای کامل SVG

راهنمای کامل SVG

راهنمای کامل SVG

SVG یک فرمت برای استفاده از تصاویر وکتور است. شما میتوانید در برنامه Adobe Illustrator خروجی با فرمت SVG بگیرید. اما چیزهایی هست که ابتدا باید بدانید.

چرا استفاده از SVG توصیه میشود؟

  • حجم فایل کم است و به خوبی فشرده شده است.
  • میتواند به هر سایز دلخواهی تغییر اندازه بدهید بدون اینکه از وضوح آن کم کند (در بعضی مواقع خیلی کم).
  • در صفحه نمایش های Retina به خوبی نمایش داده میشود.
  • میتواند به صورت تعاملی و کنترلی طراحی شود.

در ادامه حتما با ما باشید…

نحوه کار با SVG

ابتدا باید یک چیزی در Adobe Illustrator طراحی کنید. در تصویر زیر یک پرنده را میبینید که روی یک بیضی قرار دارد.

راهنمای کامل SVG

راهنمای کامل SVG

شما میتوانید طراحی را به صورت مستقیم در Adobe Illustrator با فرمت SVG ذخیره کنید.

راهنمای کامل SVG

راهنمای کامل SVG

با انتخاب گزینه بالا پنجره ی دیگری باز خواهد شد که ما در تنظیمات آن دخالتی نمیکنیم. بهتر است SVG Profiles را گزینه SVG 1.1 بگذارید و سپس روی گزینه SVG Code… کلیک کنید.

با کلیک روی این گزینه کد SVG در یک تکست ادیتور مانند زیر باز میشود.

راهنمای کامل SVG

راهنمای کامل SVG

اما میتوانید به جای کلیک روی گزینه SVG Code… روی گزینه OK یا Save کلیک کنید که با اینکار کدها در یک فایل در محل موردنظر ذخیره میشوند. میتوان از هر دو روش استفاده کرد.

نحوه استفاده از SVG در اینترنت روش های مختلفی دارد که هر یک را بررسی میکنیم.

استفاده از SVG به عنوان تصویر (<img>)

اگر SVG را به صورت فایل ذخیره کنید میتوان از آن به عنوان یک تصویر استفاده کرد.

<img src="kiwi.svg" >

برای دانلود این SVG اینجا را کلیک کنید.

شما میتوانید عرض و ارتفاع تصویر را به سادگی عوض کنید بدون اینکه حتی از کیفیت آن کم شود.

img{
  width: 300px;
}

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

این راه استفاده دارای پشتیبانی مخصوص به خود است. این روش فقط در IE8 به پایین و Android 2.3 به پایین کار نمیکند.

اما اگر میخواهید مطمئن شوید که عکس به کاربر نمایش داده میشود میتوان از روشی که David Bushell ابداع کرده است استفاده کنید.

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

همانطور که در کد بالا میبینید ابتدا مرورگر سعی میکند تصویر SVG را فراخوانی کند اما در صورت بروز خطا تصویر png را فراخوانی خواهد کرد.

استفاده از SVG به عنوان بکگراند

اینکار به سادگی انجام می شود.

<a href="/" class="logo">
  Kiwi Corp
</a>
.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

نکته قابل ذکر در این روش این است که شما علاوه بر دادن Width و Height باید background-size را هم مقدار دهی کنید تا تصویر SVG کاملا مطابق با عرض و ارتفاع در بیاید.

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

پشتیبانی مرورگرها از این روش هم مخصوص به خود است. اما در این مورد پشتیبانی آن مانند روش قبلی است. یعنی در مروگرهای IE8 و Android 2.3 به پایین مشکل دارد.

اما اگر باز هم شما میخواهید مطمئن شوید که عکس حتما نمایش داده میشود ابتدا باید کتابخانه Modernizr را به صفحه اضافه کنید. این کتابخانه در صورت پشتیبانی نکردن مروگر از این روش یک کلاس به نام no-svg به تگ html اضافه میکند. پس میتوان مانند زیر عمل کرد:

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

در دو روش بالا هیچ کنترلی به عناصر داخلی تصویر SVG نداریم. اما در روش بعدی این امکان وجود دارد.

استفاده از SVG به صورت inline

شما به راحتی میتوانید همان کدهایی را که برنامه Illustrator به شما میدهد را در صفحه خود کپی کنید. یکی از مزیت های استفاده از این روش این است که دیگر به عنوان یک درخواست HTTP حساب نمیشود در حالی که در دو روش قبلی اینطور نبود. اما یکی از معایب این روش این است که با قرار دادن کدهای SVG در صفحه طراح و برنامه نویس وب تمرکز کافی رو صفحه ندارد زیرا صفحه خیلی شلوغ و درهم ریخته میشود.

اما اگر از زبان های سمت سرور هم استفاده میکنید میتوانید آنها را مثل زیر فراخوانی کنید.

<?php include("kiwi.svg"); ?>

کنترل SVG بوسیله CSS

اگر فایل SVG که در ابتدای مطلب گذاشتم را دانلود کرده باشید میبینید که دارای دو تگ ellipse و path است. زیرا زمانی که ما طراحی را در Illustrator انجام دادیم از این دو کنترل استفاده کردیم.

خب وقتی این دو تگ وجود دارد پس میتوان به راحتی به آنها یک کلاس داد و آنها را در CSS کنترل کرد.

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

برای مثال ما میخواهیم در زمانی که ماوس روی شکل مورد نظر رفت رنگ آن عوض شود. برای اینکار باید از خصوصیت fill استفاده کرد.

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

همچنین SVG دارای فیلترهای مخصوص به خود است. برای مثال ما یک فیلتر در زیر تعریف میکنیم. فقط تعریف میکنیم.

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

و میتوان به صورت زیر از آن استفاده کرد:

.ground:hover {
  filter: url(#pictureFilter);
}

برای مشاهده لیستی از فیلتر ها بهاینجا بروید.

مثال ما را میتوانید در زیر ببینید:

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

این روش هم پشتیبانی مخصوص به خود را دارد اما باز هم در IE8 و Android 2.3 به پایین مشکل خواهیم داشت.

برای حل مشکل مروگرهایی که از این روش پشتیبانی نمیکنند دوباره باید از Modernzir استفاده کرد.

<svg> ... </svg>
<div class="logo-fallback"></div>
.logo-fallback { 
  display: none;
}
.no-svg .logo-fallback { 
  background-image: url(logo.png);
  display: block;
}

استفاده از SVG به صورت Object

اگر استفاده از روش بالا صفحه شما را شلوغ میکند میتوانید از object برای اینکار کمک بگیرید.

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>

که در صورت پشتیبانی نکردن مرورگر از SVG میتوان مانند زیر عمل کرد (کتابخانه Modernzir فراموش نشود):

.no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

اما اگر در این روش بخواهید از کنترل CSS استفاده کنید حتما باید تگ style را داخل فایل svg تعریف کنید و همانجا کنترل را انجام دهید.

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

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

اما در این فایل SVG که نقشه ایران است کدهای اضافی زیادی وجود دارد. زیرا در این SVG برای هر عنصر path کدهای کنترل کننده CSS به صورت inline تکرار شده است. که در زمان تغییر این کدها دردسری خیلی زیادی باید کشیده شود. من این SVG را بهینه کردم و در اختیار شما قرار میدهم.

نظر شما در مورده SVG چیست؟ آیا تا به حال در پروژه خود استفاده کرده اید؟

  • ایمان می‌گه:

    با سلام

    ممنون از مطلب خوبتون…

    چندتا سوال داشتم:

    اول اینکه اگر بخوایم نام هر استان رو روی بخش مربوطش بنویسیم چیکار باید بکنیم؟

    دوم اینکه مثل سایت آسیاتک اگر بخوایم وقتی روی استان کلیک کرد شهرهاش نمایش داده بشه و بعدش هم نمایندگی های اون شهرهاو… چیکار باید کنیم؟چون الان فایلی که شما قرار دادید تنها نقشه خالیه و این قابلیت ها رو نداره برای اضافه کردن این قابلیت ها اگر امکانش هست راهنمایی کنید و اگرم آموزشی میشناسید معرفی کنید..

    با تشکر فراوان

  • مهدی می‌گه:

    http://www.polygon.com/a/xbox-one-review#xbl
    چطور تو این سایت این ها رو انیمیشن کرده ؟!

  • محمد حسین می‌گه:

    خوبه یک نگاهی به نقشه ایران رو کاغذ بندازی بعد طراحی کنی!!!

  • yeganeh می‌گه:

    سلام.ی روش دیگه پیدا کردم .به کمک svg editor یا inkscape خیلی راحتر میشه استان ها رو از هم جدا کرد.ولی باز هم اینجا من ب یک مشکل بر خوردم! مشکلم اینجاست ک نمیتونم مرز رو برای استانهای مرزی کات کنم:(

    • yeganeh می‌گه:

      سلام.خواستم بگم بالاخره تونستم در نقشه ایران هر استان رو با رنگهای متفاوت رنگ کنم و کدش رو هم بنویسم.در این مورد فعلا دیگه سوالی ندارم.

  • Yeganeh می‌گه:

    سلام،خسته نباشید،اگر بخوام هر کدام از استانهای ایران در نقشه رنگهای متفاوت داشته باشه،میشه کمکم کنید؟؟؟؟

    • یاشار امیرعابدین می‌گه:

      باید برای هر شهر یه class تعیین کنی
      کد ccs رو ببین path-city-g1 تا path-city-g4 داره
      یعنی 4 گروه رنگ تعیین کرده

  • یاشار امیرعابدین می‌گه:

    سلام
    از کد برای نمایش استفاده میکنم اما فقط توی گوگل کروم نمایش داده میشه
    فایرفاکس نمایش نمیده
    ورژن 26
    لوگو به صورت متن هست که با پسوند SVG ذخیره کردم اما فقط تو کروم نوع فونت درست نمایش داده میشه
    تو فایرفاکس با فونت معمولی نشون داده میشه

    • محمد جهانی می‌گه:

      فایرفاکس جز فونت‌ها، مشکلی با SVG نداره.
      کدتون رو داخل codepen یا jsfiddle بذارید و لینکش رو بدید تا بررسی بشه.

    • یاشار امیرعابدین می‌گه:

      خوب الان لوگوی من به صورت فونت هست
      که توی فایرفاکس هم درست نشون داده نمیشه
      ولی باز همون svg رو لود میکنه اگر بخوام تو فایرفاکس png لود کنه چیکار باید کنم؟

  • شهرام می‌گه:

    سپاس فراوان بابت داده های مفیدتان.
    درود

  • rahnema می‌گه:

    سلام لطفا نقشه اس وی جی ایران را برای دانلود بگذارید
    با تشکر

  • محمدرضا می‌گه:

    سلام.این نقشه ای که اینجا هست رو میشه ازش استفاده کرد ، البته با تغییرات؟؟
    با همه مرورگرا کارمیکنه؟؟
    سپاس


  • نظرات این مطلب بسته است.