نحوه استفاده از svg

نحوه استفاده از svg

استفاده از svg  امروزه که حتی یک بایت هم در سرعت سایت موثر است یکی از ملزومات در طراحی سایت است.

وقتی صحبت از SVG در وب می شود چندین راه برای استفاده از آن وجود دارد که ما می توانیم با توجه به نیاز و شرایط بهترین آنها را انتخاب کنیم.

اضافه کردن SVG به صفحات وب

در این بخش با روش‌های مختلفی که می‌توان گرافیک‌های برداری SVG را به صفحه‌های وب اضافه کرد و نحوه استفاده از svg  آشنا می‌شویم.

در کل میتوان یا روش های زیر svg را استفاده کرد :

• تگ img
• تگ embed
• تگ picture
• تگ object
• تگ iframe
• استفاده از inline svg
• استفاده در background image

 

اگر هنوز با svg آشنایی کامل ندارید بهتر است مقاله svg چیست؟ را مطالعه کنید.

 

نحوه استفاده از svg

 

تگ img

برای جای دادن یک SVG از طریق عنصر <img> کافی است در خصوصیت src آن به فایل مربوطه ارجاع بدهید. شما به خصوصیت‌های height و یا width هم نیاز دارید. البته در صورتی که نسبت ابعادی ذاتی وجود نداشته باشد، باید هر دو را تعیین کنید. اگر قبلاً چنین کاری انجام نداده‌اید پیشنهاد می‌کنیم به مطلب آموزشی زیر مراجعه کنید:

<img  src="kiwi.svg"  alt="یک تصویر svg" height="87px" width="100px" >

نکاتی که باید برای این روش در نظر داشت:

مرورگر تصویر را کش می کند

تعاملی با CSS وجود ندارد (مثلا اگر بخواهیم زمانی که موس روی تصویر رفت رنگ تصویر تغییر کند)

نمی توان اسکریپت نوشت (به دلایل امنیتی)

انیمیشن های سی اس اس در این روش فقط زمانی کار می کنند که درون تگ <svg> نوشته شده باشند

درخواست اضافه به سرور (در HTTP/2 این مساله دیگه اهمیت ندارد)

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

 

عیب‌یابی و پشتیبانی روی چند مرورگر

در مورد مرورگرهایی که از SVG پشتیبانی نمی‌کنند (مانند IE8 و پایین‌تر، اندروید 2.3 و پایین‌تر) می‌توانید در خصوصیت src به یک PNG یا JPG ارجاع بدهید و از خصوصیت srcset که صرفاً مرورگرهای جدیدتر شناسایی می‌کنند، برای اشاره به SVG استفاده کنید. در چنین حالتی، تنها مرورگرهایی که از SVG پشتیانی می‌کنند، این فایل‌ها را بارگذاری می‌کنند و مرورگرهای قدیمی از نسخه PNG استفاده خواهند کرد:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

 

 استفاده در background image

روش دیگر نمایش فایل svg قرار دادن آن به عنوان پس زمینه یک عنصر می باشد.

در کد زیر مرورگرهای قدیمی تنها از PNG (که آن را درک می‌کنند) استفاده می‌کنند در حالی که مرورگرهای جدیدتر SVG را نیز بارگذاری خواهند کرد:

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

 

نکاتی که باید برای این روش در نظر داشت:

تعاملی با CSS وجود ندارد

نمی توان اسکریپت نوشت

انیمیشن های سی اس اس در این روش فقط زمانی کار می کنند که درون تگ <svg> نوشته شده باشند

درخواست اضافه به سرور

اگر تصویر را بوسیله Data URI درون فایل CSS قرار دهیم مرورگر آن را کش می کند اما از آنجا که در مورد لود شدن فایل سی اس اس این روش مورد مناسبی نیست، این کار در اکثر مواقع توصیه نمی شود.

پشتیبانی مرورگرها برای این روش تقریبا شبیه به روش اول یعنی استفاده از تگ img می باشد.

 

گنجاندن کد SVG درون HTML

در نحوه استفاده از svg شما می‌توانید فایل SVG را در یک ویرایشگر متنی نیز باز کنید، کد SVG را کپی کنید و آن را در سند HTML خود قرار دهید. این کار در برخی موارد به نام SVG inline یا SVG درون‌خطی نامیده می‌شود. در این مرحله باید مطمئن شوید که قطعه کد SVG به ترتیب با تگ‌های <svg> و </svg> باز و بسته می‌شود. در ادامه مثال کاملاً ساده‌ای از آن چه می‌توانید در سند خود جای دهید را مشاهده می‌کنید:

<svg>

<rect width="100%" height="100%" fill="green" >

</svg>

 

نکاتی که باید برای این روش در نظر داشت:

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

می توان اسکریپت برای SVG مورد نظر نوشت

درخواست اضافه به سرور وجود ندارد

مرورگر تصویر را کش نمی کند (مگر اینکه فایل html کش شود)

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

تنها نکته آزار دهنده در مورد این روش این است که در وسط کد شیک و تمیز HTML شما یک عالمه خرت و پرت از نوع SVG ریخته می شود که این موضوع می تواند مخصوصا از نظر نگهداری پروژه جالب نباشد.

 

 

 

 

استفاده از SVG با استفاده از <object>

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

<object data="rectangle.svg" width="110" height="60" type="image/svg+xml">
مرورگر شما از این فرمت پشتیبانی نمیکند.
</object>

نکاتی که باید برای این روش در نظر داشت:

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

مرورگر تصویر را کش می کند

می توان اسکریپت نوشت ( با اون DOM معلومه که میشه نوشت :) )

درخواست اضافه به سرور

 انیمیشن ها و تعاملات سی اس اسی در این روش فقط زمانی کار می کنند که درون تگ <svg> نوشته شده باشند.

 

شیوه جاسازی یک SVG با استفاده از <iframe>

شما می‌توانید تصاویر SVG را در مرورگر خود همانند هر صفحه وب دیگری باز کنید. بنابراین نحوه استفاده از svg با استفاده از عنصر <iframe> دقیقاً به همان روشی که در مطلب زیر توضیح داده شده است، امکان‌پذیر است:

<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

 

نکاتی که باید برای این روش در نظر داشت:

iframe-ها همان طور که در کد فوق می‌بینید دارای ساز و کار fallback هستند؛ اما مرورگرها تنها در صورتی این fallback را نمایش می‌دهند که به طور کلی از iframe-ها پشتیبانی نکنند.

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

 

استفاده از تگ picture برای svg

ین روش هم کاملا شبیه به روش اول است با این تفاوت که می توان جایگزینی (Fallback) برای فایل svg درون تگ <picture>  در نظر گرفت تا اگر به هر دلیلی مرورگر نتوانست فایل svg را نمایش دهد به جای آن تصویر پشتیبان را نمایش دهد:

<picture>

<source type="image/svg+xml" srcset="logo.svg">

<img src="logo.png" alt="لوگو">

</picture>

 

 

روش embed برای svg

این روش هم مانند روش iframe میباشد و فقط گفته شد تا بدانیم وجود دارند اما استفاده از اینها را فراموش کنید.

<embed type="image/svg+xml" srcset="logo.svg" />

 

جمع‌بندی

در این مقاله یک مرور سریع در مورد نحوه استفاده از svg داشتیم و از دلایل مفید بودن آن‌ها و شیوه درجشان در صفحه‌های وب صحبت کردیم. البته این مقاله هرگز یک راهنمای جامع در مورد SVG محسوب نمی‌شود و صرفاً برای آشنایی مقدماتی با SVG مناسب است. بنابراین اگر حس می‌کنید به قدر کافی در زمینه SVG-ها تجربه کسب نکرده‌اید، نباید نگران باشید. در بخش بعدی این سری مقالات راهنمای کاربردی به بررسی دقیق‌تر تصاویر واکنش‌پذیر پرداخته و ابزارهایی که HTML برای ایجاد شرایط کارکرد بهتر تصاویر روی دستگاه‌های مختلف ارائه کرده است را معرفی می‌کنیم.

در کل هنگام نحوه استفاده از svg باید سوال های زیر را از خودمان بپرسیم:

1. قرار است انیمیشن داشته باشد؟

2. اگر انیمیشن دارد آن انیمیشن از نوع تعاملی است؟ (مثلا وقتی موس میره روی تصویر حرکت میکنه)

3. چه نوع انیمیشنی؟ جاوااسکریپت نیاز دارد؟

4. چه مرورگرهایی را باید پشتیبانی کنم (برای انیمیشن دادن SVG)؟

5. چه نوع محتوا و چه جایگزینی نیاز دارم؟

با در نظر داشتن این سوال ها و جدول زیر و نکات گفته شده در مورد هر روش می توانیم بهترین روش را انتخاب کنیم:

 

روش	تعامل	نوع انیمیشن	مکان انیمیشن CSS	مکان انیمیشن JS
<img>		CSS	داخل <svg>	–
<picture>		CSS	داخل <svg>	–
url()		CSS	داخل <svg>	–
<object>		CSS,JS	داخل <svg>	همه جا
<svg>		CSS,JS	همه جا	همه جا