روش های استفاده از تصاویر SVG در طراحی سایت

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

روش های استفاده از تصاویر SVG در طراحی سایت :

روش Inline

اولین روش، روش مستقیم و درج کدهای SVG در داخل تگ‌های HTML است. کد زیر مربوط به یک گل هست که تقدیم به شما میشه و نتیجه اش رو پایینش می‌بینید .اینکه این کدها چی هستند رو در دوره کار با تصاویر SVG خواهیم آموخت.

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B99B98;stroke:#2E3192;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;}
</style>
<g id="Layer_1">
<path class="st0" d="M381.4,189.6c-33.5,0-63.6,8-84.4,20.7c11.4-20.6,18.5-49.1,18.5-80.6c0-62.8-28.1-113.7-62.7-113.7
c-34.6,0-62.7,50.9-62.7,113.7c0,31.5,7.1,60,18.5,80.6c-20.8-12.7-50.9-20.7-84.4-20.7c-62.8,0-113.7,28.1-113.7,62.7
c0,34.6,50.9,62.7,113.7,62.7c33.5,0,63.6-8,84.4-20.7c-11.4,20.6-18.5,49.1-18.5,80.6c0,62.8,28.1,113.7,62.7,113.7
c34.6,0,62.7-50.9,62.7-113.7c0-31.5-7.1-60-18.5-80.6c20.8,12.7,50.9,20.7,84.4,20.7c62.8,0,113.7-28.1,113.7-62.7
C495.1,217.7,444.2,189.6,381.4,189.6z"/>
</g>
<g id="Layer_2">
<circle class="st1" cx="252.9" cy="252.3" r="40.6"/>
</g>
</svg>

مزیا و معایب: این روش برای وقتی که بخواهیم با تصویر تعاملی داشته باشیم (توسط CSS یا JavaScrip) مناسبه. در مقاله svg چیست و چرا باید از اون استفاده متوجه شدیم که یکی از قابلیت‌های جذاب تصاویر SVG ایجاد تغییرات در موقعیت، رنگ و سایر ویژگی های بصری و همینطور پویا نمایی آنها توسط CSS و JavaScrip است. اگر می‌خواهید درکی از تعامل داشته باشید انتهای صفحه طراحی سایت رو ببینید، از دیگر مزیت های این روش؛ درخواست اضافه به سرور وجود نداره و مرورگر تصویر رو کش نمی کنه  (مگر اینکه فایل html کش بشه). تنها عیبش هم اینه که کد شمار  رو کمی چِرک می‌کنه.

استفاده از تگ <img>

اگر کد بالا رو در یک فایل متنی کپی کنیم و با فرمت svg. ذخیره اش کنیم می‌تونی با استفاده از تگ <img> اون رو وارد صفحه کنیم درست مانند تصاویر عادی

<img src="flower.svg" alt="این گل تقدیم شما">

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

مزایا و معایب: استفاده از این روش مزیت خاصی نداره جز اینکه کد HTML تون تمیز تره (البته باید این نکته رو هم در نظر گرفت که تصاویر SVG با توجه به نحوه ساخته شدن و ایجادشون ذاتا کم حجم هستند و این هم خودش یک مزیت به حساب میاد) اما دیگه نمی‌تونید با تصویر تعاملی داشته باشید(مثلا وقتی موس رفت روی اون، رنگش تغییر کنه و … ) و انیمیشن‌ها زمانی که داخل تگ <svg> باشند کار می‌کنند. همچنین باید مراقب پشتیبانی مرورگرها باشید. IE8  و Android 2.3 به پایین این روش را پشتیبانی نمی‌کنند.

تگ <picture>

به کد پایین نگاهی بیاندازید؛

<picture>
<source type="image/svg+xml" srcset="flower.svg">
<img src="another-flower.png" alt="یه گل دیگه تقدیم شما">
</picture>

این تگ مانند تگ <img> است با این تفاوت که می‌توان جایگزینی برای تصویر SVG درون این تگ تعریف کرد که هر موقع مرورگر به هر دلیل نتونست تصویر SVG را نمایش دهد، تصویر جایگزین نمایش داده بشه.

مزایا و معایب: به جز مزیت فوق بقیه مزایای و معایب این روش هم مشابه استفاده از تگ <img> است.

استفاده از ویژگی background-image

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

در این روش نیز نمی‌توان با تصویر تعاملی داشت و انیمیشن‌ها زمانی که داخل تگ <svg> باشند کار می‌کنند. پشتیبانی مرورگرها برای این روش تقریبا شبیه به روش استفاده از تگ img می باشد.

.you{
background-image: url(flower.svg);
background-image: 250px 250px;
}

روش استفاده از تگ <object>

یکی دیگر ازروش های استفاده از تصاویر SVG در طراحی سایت استفاده از تگobject است؛

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

مزایای این روش:

✔️ می توان به صورت پیشفرض جایگزینی برای فایل svg قرار داد. این جایگزین می تواند تصویر یا در برخی موارد متن باشه. 

✔️ مرورگر تصویر را کش می کنه

✔️ در این روش می توان با تصویر SVG تعامل داشت و برای اون اسکریپت نوشت

معایبش:

❌ درخواست اضافه به سرور (زیاد مهم نیست )

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

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

روش استفاده از تگ <iframe>

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

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

تگ <embded>

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

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

 راهنمای سریع  و کاربرد استفاده از تصاویر SVG در طراحی سایت

در نهایت به این سوال بنیادی بر می‌خوریم که بالاخره کدام روش استفاده از تصاویر SVG  برای هدف مورد نظر ما مناسب‌تر است؟

✔️ در کل قبل از استفاده از SVG باید سوال های زیر را از خودمان بپرسیم:

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

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

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

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

پاسخ به سوالات پرتکرار شما

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