استفاده از 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 همه جا همه جا

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

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

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

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

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

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