وبلاگ

روش های استفاده از فایل SVG در وب

بلاگ روش های استفاده از فایل SVG در وب

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

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


   <svg
                      xmlns="http://www.w3.org/2000/svg"

  x="0px"   y="0px"   width="269.6px"   height="258.8px"
   viewBox="0 0 269.6 258.8" > <path   style="fill:#2C9389;"
  d="M214.3,54.2V0h-26.4v36.2L134.8,0L0,91.9h37.4v166.9h194.8V91.9h37.4L214.3,54.2z" /> </svg>

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


                <img
                  src="vectorhome.svg"
                  alt="vectorhome logo"
                >                              ;     

اگر بادقت به تکه کد 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="vectorhome.svg"
                            >                     
                            
<img   src="vectorhome.png"   alt="لوگوی وکتورهوم" > </picture>

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

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


                .background-logo
                {
                  background-image:"url(vectorhome.svg);"
                  background-image:"200px 200px;"
                }

نکاتی که باید برای این روش در نظر داشت:
⚠ تعاملی با CSS وجود ندارد
⚠ نمی توان اسکریپت نوشت
⚠ انیمیشن های سی اس اس در این روش فقط زمانی کار می کنند که درون تگ <svg> نوشته شده باشند
⚠ درخواست اضافه به سرور
⚠ اگر تصویر را بوسیله Data URI درون فایل CSS قرار دهیم مرورگر آن را کش می کند اما از آنجا که در مورد لود شدن فایل سی اس اس این روش مورد مناسبی نیست، این کار در اکثر مواقع توصیه نمی شود.
پشتیبانی مرورگرها برای این روش تقریبا شبیه به روش اول یعنی استفاده از تگ img می باشد.

4-Inline SVG

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


                    <body
                    >
             
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      x="0px"
                      y="0px"
                      width="269.6px"     
					
  height="258.8px"   viewBox="0 0 269.6 258.8" > <path   style="fill:#2C9389;"
  d="M214.3,54.2V0h-26.4v36.2L134.8,0L0,91.9h37.4v166.9h194.8V91.9h37.4L214.3,54.2z" />
</svg> </body>

نکاتی که باید برای این روش در نظر داشت:
✅ انیمیشن و تعاملات سی اس اسی به خوبی کار می کند
✅ می توان اسکریپت برای SVG مورد نظر نوشت
✅ درخواست اضافه به سرور وجود ندارد
⚠ مرورگر تصویر را کش نمی کند (مگر اینکه فایل html کش شود)
⚠ تمام مرورگرهایی که HTML5 را پشتیبانی می کنند این روش را پشتیبانی می کنند
تنها نکته آزار دهنده در مورد این روش این است که در وسط کد شیک و تمیز HTML شما یک عالمه خرت و پرت از نوع SVG ریخته می شود که این موضوع می تواند مخصوصا از نظر نگهداری پروژه جالب نباشد.

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


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

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

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

6-<iframe>

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


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

7-<embed>
این روش هم مانند روش iframe فقط گفته شد تا بدانیم وجود دارند اما استفاده از اینها را فراموش کنید 🙂


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

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

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

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

1- قرار است انیمیشن داشته باشد؟
2- اگر انیمیشن دارد آن انیمیشن از نوع تعاملی است؟ (مثلا وقتی موس میره روی تصویر حرکت میکنه)
3- چه نوع انیمیشنی؟ جاوااسکریپت نیاز دارد؟
4- چه مرورگرهایی را باید پشتیبانی کنم (برای انیمیشن دادن SVG)؟
5- چه نوع محتوا و چه جایگزینی نیاز دارم؟
با در نظر داشتن این سوال ها و جدول زیر و نکات گفته شده در مورد هر روش می توانیم بهترین روش را انتخاب کنیم:

جدول