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

چکیده:

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

روش Inline

اولین روش  روش مستقیم و بی دردسرِ کد زیر مربوط به یک گل هست که تقدیم به شما میشه و نتیجه اش رو پایینش میبینید .اینکه این کدها چی هستن و ازچه چیزایی درست شدهرو در جلسات بعدی یاد میگیریم.

<svg xmlns=&quothttp://www.w3.org/2000/svg&quot width=&quot250&quot height=&quot250&quot x=&quot0px&quot y=&quot0px&quot 
  viewBox=&quot0 0 500 500&quot style=&quotenable-background:new 0 0 500 500;&quot 
  xml:space=&quotpreserve&quot> 
    <style type=&quottext/css&quot> 
          .st0{fill:#B99B98;stroke:#2E3192;stroke-miterlimit:10;} .st1{fill:#FFFFFF;}
     </style> 
    <g id=&quotLayer_1&quot> <path class=&quotst0&quot d=&quotM381.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&quot/>
     </g> 
     <g id=&quotLayer_2&quot> <circle class=&quotst1&quot 
        cx=&quot252.9&quot cy=&quot252.3&quot r=&quot40.6&quot/>
     </g> 
</svg>

مزیا و معایب: این روش برای وقتی که بخواهیم با تصویر تعاملی داشته باشیم (توسط CSS یا JavaScrip) مناسبه اگر میخواهید درکی از تعامل داشته باشید انتهای صفحه طراحی سایت رو ببینید، درخواست اضافه به سرور وجود نداره و مرورگر تصویر رو کش نمی کنه  (مگر اینکه فایل html کش بشه) تنها عیبش هم اینه که کمی سوس کد رو چِرک میکنه.

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

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

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

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

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

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

<picture> <source type=&quotimage/svg+xml&quot srcset=&quotflower.svg&quot>
     <img src=&quotanother-flower.png&quot alt=&quotیه گل دیگه تقدیم شما&quot>
 </picture>

فکر نکنم لازم باشه بگم که این تگ مانند تگ &amp;amp;amp;amp;amp;amp;lt;img&amp;amp;amp;amp;amp;amp;gt; است با این تفاوت که میتوان جایگزینی برای تصویر SVG درون این تگ تعریف کرد که هر موقعه مرورگر به هر دلیل نتونست تصویر SVG را نمایش دهد، تصویر جایگزین به نمایش درباید. لازمه؟

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

روش background-image

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

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

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

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

استفاده از این روش به این صورته:

<object type=&quotimage/svg+xml&quot data=&quotflower.svg&quot>
     <!-- Fallback (تصویر جایگزین یا متن جایگزین) --> 
</object>

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

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

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

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

معایبش:

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

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

<svg ...>

     <style>

         /* Styles comes here */ 

    </style>

      ...

 </svg>

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

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

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

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

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

<embed type=&quotimage/svg+xml&quot src=&quotsun.svg&quot />

جمع بندی: از کدام روش استفاده کنیم؟

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

? برای اینکه بتوانیم هر نوع عملیاتی را بر روی SVG اعمال کنیم بهترین روش استفاده از روش &amp;amp;amp;amp;amp;lt;object&amp;amp;amp;amp;amp;gt; است. البته می توان به جای آن از روش خطی(Inline SVG) هم استفاده کرد و دیگر درخواست اضافه ای هم به سرور وجود ندارد اما توجه داشته باشید که دیگر SVG توسط مرورگر کش نمی شود.

? اگر قرار است فقط از SVG به عنوان یک تصویر ساده و بدون تعامل استفاده کنیم بهتر است روش های &amp;amp;amp;amp;amp;lt;img&amp;amp;amp;amp;amp;gt; و background-image را انتخاب کنیم.

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

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

ادامه دارد…