استفاده از SVG

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

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


<svg xmlns="http://www.w3.org/2000/svg" width="199" height="194" viewBox="0 0 199 194">
  <path fill="#FFC400" d="M199.322 97.183l-35.46 14.67 25.603 28.59-38.32-2.217 10.663 36.873-33.585-18.577-6.395 37.843L99.66 163.02l-22.166 31.346-6.395-37.844-33.586 18.576 10.664-36.873-38.32 2.217 25.603-28.588L0 97.184l35.46-14.67-25.603-28.59 38.32 2.217L37.516 19.27 71.1 37.843 77.493 0 99.66 31.346 121.83 0l6.395 37.844 33.585-18.575-10.664 36.872 38.32-2.218-25.603 28.59"/>
  <circle fill="none" stroke="#FFF" stroke-width="6.003" stroke-miterlimit="10" cx="99.661" cy="97.183" r="53.73"/>
</svg>
مرورگر شما خیلی گرز می باشد

1. <img>

در اولین روش اگر تکه کد بالا را در یک فایل با پسوند svg ذخیره کنیم می توانیم از آن در تگ img بصورت زیر استفاده کنیم:


<img src="sun.svg" alt="خورشید نه چندان تابان">

اگر بادقت به تکه کد SVG در بالای مطلب نگاه کنیم دو ویژگی width و height را برای خورشیدمان می بینیم. زمانی که از تگ img برای نمایش این طرح استفاده کنیم دقیقا به اندازه مشخص شده در کد SVG نمایش داده می شود اما اگر بخواهیم، می توانیم با تعیین عرض و ارتفاع برای عنصر img (در HTML یا CSS) اندازه نهایی را تغییر دهیم.

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

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

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

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

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

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

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

2. <picture>

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


<picture>
  <source type="image/svg+xml" srcset="sun.svg">
  <img src="sun.png" alt="">
</picture>

به عنوان نمونه اگر کد بالا توسط مرورگر IE8 خوانده شود تصویر خورشید با پسوند png نمایش داده می شود.

برای بررسی این موضوع این لینک را در کروم باز کنید چیزی که خواهید دید خورشید خانوم خواهد بود. ولی اگر همین لینک را IE8 باز کنید تصویر جایگزینی که من برایش انتخاب کرده ام را می بینید که دیگر آن خورشید نیست.

اگه گفتین چیه؟ :)

3. background-image

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


.sky {
  background-image: url(sun.svg);
  background-image: 200px 200px;
}

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

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

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

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

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

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

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

این روش را در دموی زیر بررسی کنید:

 

See the Pen svg-css by Mojtaba Seyedi (@seyedi) on CodePen.


 

4. Inline SVG

در روش خطی کافی است که کد SVG را در هرکجای سند HTML نیاز داریم قرار دهیم تا تصویر ما توسط مرورگر نمایش داده شود:


<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="199" height="194" viewBox="0 0 199 194">
    <path fill="#FFC400" d="M199.322 97.183l-35.46 14.67 25.603 28.59-38.32-2.217 10.663 36.873-33.585-18.577-6.395 37.843L99.66 163.02l-22.166 31.346-6.395-37.844-33.586 18.576 10.664-36.873-38.32 2.217 25.603-28.588L0 97.184l35.46-14.67-25.603-28.59 38.32 2.217L37.516 19.27 71.1 37.843 77.493 0 99.66 31.346 121.83 0l6.395 37.844 33.585-18.575-10.664 36.872 38.32-2.218-25.603 28.59"/>
    <circle fill="none" stroke="#FFF" stroke-width="6.003" stroke-miterlimit="10" cx="99.661" cy="97.183" r="53.73"/>
  </svg>
</body>

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

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

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

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

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

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

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

5. <object>

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

روش خوب وجود نداره، هر کدوم از روش ها می تونن توی شرایط مختلف خوب یا بد باشند :)


<object type="image/svg+xml" data="sun.svg">
  <!-- Fallback (تصویر جایگزین یا متن جایگزین) -->  
</object>

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

وقتی از این روش استفاده می کنیم خروجی کار درون DOM بصورت زیر خواهد بود:

svg درون تگ object

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

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

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

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

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

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


<svg ...>
  <style>
    /* استایل های مربوطه میاد اینجا */
  </style>
  ...
</svg>

6. <iframe>

این روش تقریبا شبیه به روش object عمل می کند و همان خصوصیات را دارد اما در حالت کلی استفاده از تگ iframe برای این کار توصیه نمی شود بهتر است از object کنیم:


<iframe src="sun.svg">
  <!-- Fallback (تصویر جایگزین یا متن جایگزین) -->  
</iframe>

7. <embed>

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


<embed type="image/svg+xml" src="sun.svg" />

از کدام روش استفاده کنیم؟

برای اینکه بتوانیم هر نوع عملیاتی را بر روی SVG اعمال کنیم باید از روش <object> استفاده کنیم. البته می توان به جای آن از روش خطی (Inline SVG) هم استفاده کرد و دیگر درخواست اضافه ای هم به سرور وجود ندارد اما توجه داشته باشید که دیگر SVG توسط مرورگر کش نمی شود.

اگر قرار است فقط از SVG به عنوان یک تصویر ساده و بدون تعامل استفاده کنیم بهتر است روش های <img> و background-image را انتخاب کنیم.

همینطور از دو روش embed و iframe در حد امکان استفاده نکنید. و ما هم در ادامه بحثی در مورد این دو روش نمی کنیم.

در کل قبل از استفاده از 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 همه جا همه جا

مطالب مرتبط

19 دیدگاه برای “استفاده از SVG”

  1. سلام
    تشکر از مطالب خوبتون
    آقای سیدی، تو سایت css-tricks.com یه مطلب نوشته بود درباره استفاده از svg که تو سورس نمونه، از تگ استفاده کرده بود…

    این تگ هم کاربرد تگ های بالا رو داره؟

    پاسخ

    1. سلام. ممنون

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

      پاسخ

  5. سلام . تشکر بابت مطالب جامع و خوبتون .

    سوالی که دارم اینه الان تصاویر svg از یک آدرس خاصی لود میشن؟ مثلا اگر بخوایم تصویر svg بک گراند شمارو استفاده کنیم که به این صورت هست :
    url(“data:image/svg+xml;charset=utf-8,%3Csvg width=’84’ height=’48’ viewBox=’0 0 84 48′ xmlns=’http://www.w3.org…”)

    الان این داره از سرور شما لود میشه یا نه تصاویر svg کلا ربطی به این قضایا نداره؟

    پاسخ

    1. سلام. ممنونم

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

      پس در نتیجه نه، از جایی لود نمیشه.

      در ضمن از اینا میخواین برید به این سایت:

      http://www.heropatterns.com

      پاسخ

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

    پاسخ

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

    پاسخ

    1. سلام، اگر منظورتون از برنامه یک وب سایت هستش، نه شما دسترسی به فایل هایی اونطوری ندارید و محتواتون رو میتونید مثلا داخل یک فایل json قرار بدید و این کار رو با جاوااکسریپت انجام بدید.
      اگر فایل اکسل شما روی گوگل هستش، این ابزار اون فایل رو تبدیل میکنه به json

      https://github.com/jsoma/tabletop

      پاسخ

  10. من کد زیر وارد کردم ولی مرور گر بعد از این کد را نشان نمیده چیکار گنم

    البته تگ استفاده کردم نشون نداد دروغ فکر کنم

    من میخوام متن روی فایل svg بشه کپی کرد و گر نه فرمت png ذخیره میکردم این دردسر های کد زیاد یا نمایش ندادن را نداشتم اگه روش مناسبی سراغ دارید لطفاً جواب بدین؟؟؟من سی اس اس border:0px solid blue; قرار دادم

    پاسخ

  11. من کد زیر وارد کردم ولی مرور گر بعد از این کد را نشان نمیده چیکار گنم

    البته تگ استفاده کردم نشون نداد دروغ فکر کنم

    من میخوام متن روی فایل svg بشه کپی کرد و گر نه فرمت png ذخیره میکردم این دردسر های کد زیاد یا نمایش ندادن را نداشتم اگه روش مناسبی سراغ دارید لطفاً جواب بدین؟؟؟من سی اس اس border:0px solid blue; قرار دادم

    پاسخ

  12. با سلام، گفتین در روش دوم هیچ تعاملی با css نیست ولی من سایتی دیدم که به روش دوم svg را لود می کند و رنگ آیکون نیز تغییر پیدا می کند. این چگونه ممکن است؟https://dogmehshop.com/

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *