آموزش کامل استفاده از تصاویر SVG در سایت

یک فرمت برای قرار دادن تصاویر وکتور در وب است. همونطور که میدونید وکتور به تصاویری گفته میشه که با زوم کردن یا ریسایز کردن کیفیتش کاهش پیدا نکنه. SVG مخفف عبارت Scalable Vector Graphics است. معمولا این نوع تصاویر در نرم افزار Adobe Ilustrator ساخته میشن. شما میتونید به راحتی از این تصاویر در طراحی وب استفاده کنید. اما نکاتی وجود داره که بهتره بدونید:

اصلا چرا باید از SVG استفاده کنیم؟

1. فایل های کوچکی هستند که به خوبی فشرده میشن.
2. بدون ذره ای افت کیفیت , قابلیت تغییر اندازه تا هر سایزی رو دارن. (به غیر از سایز های خیلی خیلی کوچک)
3. در صفحات نمایش رتینا, بسیار واضح و با کیفیت نمایش داده میشن.
4. امکان طراحی کنترلی رو دارن.

یک فرمت برای قرار دادن تصاویر وکتور در وب است. همونطور که میدونید وکتور به تصاویری گفته میشه که با زوم کردن یا ریسایز کردن کیفیتش کاهش پیدا نکنه. SVG مخفف عبارت Scalable Vector Graphics است. معمولا این نوع تصاویر در نرم افزار Adobe Ilustrator ساخته میشن. شما میتونید به راحتی از این تصاویر در طراحی وب استفاده کنید. اما نکاتی وجود داره که بهتره بدونید:

اصلا چرا باید از SVG استفاده کنیم؟

1. فایل های کوچکی هستند که به خوبی فشرده میشن.
2. بدون ذره ای افت کیفیت , قابلیت تغییر اندازه تا هر سایزی رو دارن. (به غیر از سایز های خیلی خیلی کوچک)
3. در صفحات نمایش رتینا, بسیار واضح و با کیفیت نمایش داده میشن.
4. امکان طراحی کنترلی رو دارن.

آماده کردن یک تصویر برای شروع کار

یه چیزی توی نرم افزار آدوبی ایلوستریتور بسازید. مثلا من کلمه ی WebToaster رو به شکل زیر در آوردم و آماده کردم:

دقت داشته باشید که Artboard دقیقا به اندازه مرز شکلتون بریده شده باشه.

شما میتونید تصویری که ساختید رو مستقیما در نرم افزار ایلوستریتور با فرمت svg ذخیره کنید.

برای اینکار از منوی File روی گزینه Save As کلیک کنید و در کادر باز شده, اول نام فایلتون رو وارد کنید و بعد در قسمت Save as type منوی کشویی رو باز کنید و گزینه SVG رو انتخاب کنید. (SVG Compressed رو انتخاب نکنید)

بعد از اینکه روی دکمه Save کلیک کردید یک پنجره جدید برای تنظیمات SVG باز میشه. صادقانه بگم, چیز زیادی درمورد این پنجره نمیدونم. به نظرم, در قسمت SVG Profiles گزینه SVG1.1 رو انتخاب کنید خوب کار میکنه.

قسمت جالبش اینجاست که میتونید با کلیک روی گزینه OK فایل اس وی جی تون رو ذخیره کنید یا با کلیک روی دکمه …SVG Code کد های xml تصویرتون رو مشاهده کنید. هردوتاش عالیه.

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

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

HTML

<img src="imagename.svg" alt="Image Description">

به جای imagename.svg آدرس عکس SVG خودتون رو قرار بدید.

توجه داشته باشید که اندازه عکس شما در صفحه وب, طبق اندازه ی Artboard عکستون در ایلوستریتور تعیین میشه. برای تعیین طول و عرض تصویر به اندازه دلخواه خودتون, میتونید از ویژگی width و height در خود تگ <img> یا در CSS بهره ببرید.

مثال:

HTML

<img src="imagename.svg" width="450px" height="200px" alt="Image Description">

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

استفاده از روش بالا فقط در بعضی از مرورگر ها جواب میده. درواقع روش بالا در همه ی سیستم ها و مرورگر ها به جز اینترنت اکسپلورر ۸ و پایینتر و همینطور آندروید ۲٫۳ و پایینتر, قابل نمایش هست.

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

یک راه تست کردن پشتیبانی مرورگر از تصاویر SVG با استفاده از Modernizr هست, تا درصورتی که مرورگر از این نوع تصویر پشتیبانی نمی کنه, خصوصیت src تصویرمون رو به یک فایل تصویری معمول تغییر بده. کد زیر رو ببینید:

JQuery

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

کد بالا در خط اول, بررسی می کنه که آیا مرورگر از svg پشتیبانی می کنه یا نه. در صورتی که پشتیبانی نکرد,در خط دوم خصوصیت src از عکس با کلاس logo img. رو به آدرس یک عکس با فرمت png تغییر میده. (دقت کنید عکس png باید شکل همون عکس svg باشه تا درصورتی که svg نمایش داده نشد, png نمایش داده بشه)

راهنمایی بیشتر برای مبتدی ها:

کد زیر رو به فایل html تون اضافه کنید:

JQuery

<script>
if (!Modernizr.svg) {
  $(".svg").attr("src", "logo.png");
}
</script>

در کد بالا به جای عبارت logo.png باید آدرس عکس با فرمت png رو قرار بدید.

حالا کد زیر رو جایی که میخواید عکستون نمایش داده بشه قرار بدید:

HTML

<img src="logo.svg" alt="WebToaster" class="svg">

در کد بالا به جای عبارت logo.svg باید آدرس عکس با فرمت svg رو قرار بدید.

به همین راحتی!

ترفندی جالب:

دیوید باشل ترفند واقعا جالبی برای اینکار داره:

HTML

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

فکر کنم کد بالا کاملا گویا باشه که چیکار باید بکنید.(به جای عبارت image.svg آدرس عکس svg و به جای عبارت image.png آدرس عکس png رو قرار بدید)

استفاده از تصاویر SVG به عنوان پس زمینه در CSS

قرار دادن عکس svg به عنوان پس زمینه در css هم مثل استفاده از تگ <img> آسونه. میتونید عکستون رو توسط background-image در سی اس اس قرار بدید.

مثال:

HTML

<a href="/" class="logo">
  WebToaster
</a>

CSS

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

توجه داشته باشید که خصوصیت background-size رو باید به اندازه طول و عرض المان logo تنظیم کنید. در غیر اینصورت تنها قسمتی از گوشه ی بالا سمت چپ عکس به عنوان پس زمینه نمایش داده میشه. این اعداد به نسبت سایز اصلی تصویر svg انتخاب میشن. اما اگر میخواید مطمئن بشید که تصویر پس زمینه کاملا فیت میشه میتونید از مقدار contain برای خصوصیت background-size استفاده کنید.

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

تصاویر svg به عنوان بک گراند در همه ی مرورگر ها و سیستم ها به جز اینترنت اکسپلورر۸ و پایین تر و همینطور آندروید ۲٫۳ و پایینتر, نمایش داده میشن.(دقیقا مثل تگ <img>)

استفاده از کتابخانه Modernizr میتونه بهتون کمک کنه. این کتابخانه رو از سایتش دانلود کنید و به سایتتون اضافه کنید. Modernizr در صورتی که مرورگر از SVG پشتیبانی نکنه, یک کلاس با نام no-svg. به تگ html شما اضافه می کنه. با قرار دادن کد زیر در CSS میتونید تعیین کنید که درصورت پشتیبانی نکردن مرورگر از svg چه عکسی در پس زمینه عنصر قرار بگیره.

CSS

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

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

یک راه هوشمندانه برای رفع مشکل پشتیبانی نکردن همه ی مرورگر ها از تصاویر SVG اینه که از چند بک گراند برای کلاسمون استفاده کنیم. به این صورت که اگر مرورگر از svg پشتیبانی کنه, خب تصویر رو نمایش میده اما اگر پشتیبانی نکنه تصویر دوم که از نوع png یا jpg یا … هست رو نمایش می ده. کد زیر یک مثال از این ترفنده:

CSS

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

مشکلی که هم در روش <img> و هم در روش background-image وجود داره …

در این دو روش شما هیچ کنترلی روی عناصر داخلی تصویر SVG توسط CSS ندارید. اما توسط دو روش زیر میتونید عناصر داخلی رو هم کنترل کنید. پس با ما باشید!

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

یادتونه چطور میتونستیم کد تصویر SVG رو هنگام سیو کردن در ایلوستریتور ببینیم؟(همچنین میتونید تصویر اس وی جی ذخیره شده رو با یک نرم افزار ویرایشگر متن باز کنید تا کدش رو ببینید) میتونید اون کدها رو کپی کنید و در فایل Html تون پیست کنید تا تصویرتون دقیقا مثل روش استفاده از تگ <img> نمایش داده بشه.

HTML

<body>

   <!-- paste in SVG code, image shows up!  -->

</body>

این روش میتونه مفید باشه چون تمام کد های مورد نیاز تصویرمون در یک فایل قرار داره و نیازی به ارسال یک درخواست http دیگه برای گرفتن فایل svg نیست. (درنتیجه سرعت لود بالاتر میره). اما مشکل کوچکی هم داره. و اون, شلوغ شدن کد ها و سخت شدن کار برنامه نویس هست. این روش واقعا سند Html تون رو حجیم میکنه.

اگر از زبان های سمت سرور (مثل PHP و ASP) استفاده می کنید میتونید از کد زیر برای فراخوانی تصویر استفاده کنید:

PHP

<?php echo file_get_contents("kiwi.svg"); ?>

یک نکته کوچک: تجربه به من ثابت کرده که استفاده از ()file_get_contents در اینجا درست تره, نه ()include یا ()include_once

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

فایل SVG ای که ایلوستریتور تولید می کنه, بیهنه شده نیست. این فایل شامل DOCTYPE و یادداشت ها و تگ های اضافه هست که همشون دور ریختنی ان.

بهینه ساز آنلاین SVG, ابزاریه که توسط Peter Collingridge طراحی شده. کافیه وارد سایتش بشید و نسخه قدیمی فایل SVGتون رو آپلود کنید و فایل جدید بهینه شده رو دانلود کنید.

هم اکنون می توانید به تصویر SVGتان توسط CSS استایل بدهید

حتما متوجه شدید که کد های SVG چقدر شبیه Html هستند. این به این دلیله که هردوی اون ها براساس XML هستند(شامل تگ ها و علامت های بزرگتر و کوچکتر)

ما در طرح خودمون چند تگ داریم که طرح رو شکل میدن, این تگ ها <polyline> , <path> و <line> و … هستند.(توجه داشته باشید که با توجه به طرحی که در ایلوستریتور طراحی کردید, این تگ ها میتونن متفاوت باشن) ما میتونیم داخل کد های فایل SVG بگردیم و این تگ ها رو پیدا کرده و نام کلاسشون رو بفهمیم. بعدش مثل Html توسط CSS بهشون استایل بدیم.

SVG

<svg ...>
<path class="st1" .../>
<polyline class="st3" .../>
<line class="st4" .../>
</svg>

حالا میتونیم تو همین صفحه(صفحه ی کد های تصویر SVG) کد های CSSای که دارای این کلاس ها هستند رو به وسیله CSS مخصوص تصاویر SVG, ویرایش کنیم. البته حتما نیازی نیست که کد های CSS به دیگر کد های SVG در یک صفحه چسبیده باشند و میتونن در برگه استایل جداگانه ای (مثلا فایل استایل اصلی سایت) قرار داشته باشن و توسط تگ <link> فراخوانی شده باشن. دقت داشته باشید که تصاویر SVG مجموعه خصیصه های CSS مخصوص به خودشون رو دارن. مثلا به جای background-color از fill استفاده می کنند. اگرچه میتونید از شبه عنصر معمولی مثل hover: هم استفاده کنید.

CSS

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

همچنین SVG فیلتر های مخصوصی داره. مثلا برای بلور کردن تصویر , فیلتر زیر رو در <svg> تعریف می کنیم:

SVG

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

حالا میتونید اون رو در CSS کنترل کنید:

CSS

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

مثال ما رو میتونید در زیر ببینید:
http://codepen.io/chriscoyier/pen/evcBu

همچنین ببینید:

• اعمال کردن فیلتر های بیشتر به تصاویر SVG
• لیستی کامل از خصوصیت های CSS مخصوص SVG (فقط برای مرورگر اپرا)
• فیلتر های بیشتر SVG (از سایت مایکروسافت)

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

تصاویر SVG درون خطی (inline) هم پشتیبانی مخصوص به خودشون رو دارن. اینها هم در همه ی مرورگر ها و سیستم ها به جز اینترنت اکسپلورر۸ و پایینتر و همینطور آندروید۲٫۳ و پایینتر, به خوبی نمایش داده میشن.

یک راه برای رفع مشکل, اضافه کردن کتابخانه Modernizr و قرار دادن کد زیر در html هست:

HTML

<svg> ... </svg>
<div class="fallback"></div>

حالا کد CSS زیر رو به استایلتون اضافه کنید:

CSS

.fallback { 
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}

توضیح: کد بالایی, در خط اول تصویر رو در حالت SVG به مرورگر ارائه می کنه. درصورتی که مرورگر پشتیبانی کرد که خوب نمایش میده اگر هم نکرد نمایش نمیده. اما در خط دوم یک کلاس تعریف کردیم که با استفاده از Modernizr, چک می کنه اگر مرورگر از SVG پشتیبانی میکنه:خصوصیت display رو در CSS با مقدار none تنظیم میکنه. اما اگر پشتیبانی نکرد, مدرنایزر یک کلاس no-svg. به تگ html اضافه می کنه و ما در سی اس اس تعیین می کنیم که کلاس no-svg .fallback. چه خصوصیتی داشته باشه(آدرس عکس بک گراند با فرمت png یا jpg رو بهش میدیم).

استفاده از SVG توسط تگ Object

اگر استفاده از SVG به صورت inline صفحه شما رو شلوغ میکنه (فراموش نکنید این روش مشکلاتی مثل به سختی کش شدن توسط مرورگر رو هم داره.), میتونید به یک تصویر SVG خارجی لینک بدید و با استفاده از تگ <object> قسمت های مختلف تصویر رو از طریق CSS کنترل کنید.

HTML

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

و باز هم استفاده از Modernizr و CSS :

CSS

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

استفاده از این روش هم امکان کش شدن تصویر توسط مرورگر رو افزایش میده و هم پشتیبانی مرورگر ها ازش نسبت به بقیه روش ها بهتره. اما اگر میخواید به عکستون استایل بدید نمیتونید از فایل استایل خارجی استفاده کنید و همچنین نمیتونید از تگ <style> درون سند html استفاده کنید. بلکه باید استایل رو به همراه تگ <style> درون کد های خود فایل SVG قرار بدید.

SVG

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

برگه های استایل خارجی برای تصاویر SVG که به صورت <object> فراخوانی میشوند

SVG روشی برای فراخوانی برگه استایل خارجی هم داره. (که باعث زیباتر شدن کد های صفحه ی ما میشه). این روش درصورتی کار می کنه که شما تصویرتون رو به صورت object در صفحه قرار بدید. کافیه کد زیر رو در بالای اولین تگ <svg> در فایل SVG اصلی قرار بدید.