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

SVG به چندین دلیل برای آرم ، نمودار و نماد ایده آل است:

  • ایجاد و دستکاری SVG در سرویس گیرنده یا سرور آسان است.
  • برخلاف bitmaps ، SVG ها را می توان در هر اندازه و بدون افت کیفیت مقیاس بندی کرد.
  • برخلاف آیکون های وب فونت ، SVG ها کاملاً تیز باقی می مانند و می توانند چندین رنگ ، شیب و حتی فیلترهای پیچیده را اعمال کنند.

Image Sprites چیست؟

Sprites های تصویری سالیان متمادی یک روش خوب بوده اند. اگر به تعدادی گرافیک منظم استفاده می کنید ، آنها را به جای فایل های منفرد ، در یک تصویر قرار می دهید. مثلا:

روحانی تصویر

این مثال شامل هشت نماد 24 × 24 در یک پرونده 192px × 24px است. این پرونده ممکن است فشرده سازی کمی بهتری داشته باشد و برای اینکه همه نمادها قابل مشاهده باشند فقط به یک درخواست HTTP نیاز دارد. بارگذاری هشت نماد جداگانه بعید است که بیش از HTTP / 2 بیشتر طول بکشد ، اما تصاویر می توانند در زمان های مختلف ظاهر شوند و فقط در اولین استفاده از حافظه پنهان می شوند.

اگر می خواهید درست ترین نماد چاپگر را نشان دهید ، CSS می تواند با قرار دادن پس زمینه تصویر صحیح را نمایش دهد:

#print
{
  width: 24px;
  height: 24px;
  background: url('sprite.png') -168px 0;
}

برای محاسبه موقعیت های پیکسل و تولید کد CSS می توان از ابزارهای مختلفی استفاده کرد:

SVG Image Sprites

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

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <symbol id="circle">
    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
  </symbol>

  <symbol id="square">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
  </symbol>

  <symbol id="triangle">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
  </symbol>

</svg>

یک sprite منفرد را می توان هر تعداد بار در سراسر صفحه با استفاده کرد SVG <use>:

<svg width="100" height="100">
  <use xlink:href="./spriteuse.svg#circle" />
</svg>

<svg width="100" height="100">
  <use xlink:href="./spriteuse.svg#square" />
</svg>

<svg width="100" height="100">
  <use xlink:href="./spriteuse.svg#triangle" />
</svg>

متأسفانه ، مرورگرهای قدیمی مانند IE11 و پایین تصویر خارجی را بارگیری نمی کنند. بهترین راه حل این است که SVG کامل را در نشانه گذاری HTML جاسازی کنید و با استفاده از هدف خود ، هر روح را ارجاع دهید. مثلا:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <symbol id="circle">
    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
  </symbol>

  

</svg>


<svg width="100" height="100">
  <use xlink:href="#circle" />
</svg>

پشته های SVG Sprite

<use> عنصر کمی طولانی است و فقط می تواند در یک مورد استفاده شود <svg> (یا یک تصویر مستقل یا درون HTML جاسازی شده). نمی توان از آن استفاده کرد <img>، <iframe>، <object>، یا به عنوان پس زمینه CSS.

روش SVG stacks اولین بار توسط مستند شده است simurai و erikdahlstrom در سال 2012 راهی برای محدود کردن این محدودیت فراهم کرده است. به روح های جداگانه یک کلاس اختصاص داده می شود "sprite" و CSS تعبیه شده آنها را بر روی تنظیم می کند display:none به صورت پیش فرض. با این حال، display:inline هنگامی که یک عنصر عنصر هدف است اعمال می شود:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <style><![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
    ]]></style>
  </defs>

  <g class="sprite" id="circle">
    <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
  </g>

  <g class="sprite" id="square">
    <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
  </g>

  <g class="sprite" id="triangle">
    <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
  </g>

</svg>

اگر این SVG نامگذاری شده باشد sprite.svg، می توانید a اضافه کنید #target-name به URL برای نشان دادن یک روح خاص. به عنوان مثال ، URL sprite.svg#circle لایه را با ID از نمایش می دهد "circle" در هر ابعادی که انتخاب کنید. بنابراین می تواند در یک مورد استفاده شود <img>:

<img src="./sprite.svg#circle" width="100" height="100" />

یا به عنوان پس زمینه CSS:

.myelement {
  background: url('./sprite.svg#circle');
}

یا در یک <iframe>:

<iframe src="./sprite.svg#circle">
  Your browser does not support iframes.
</iframe>

یا در یک <object> برچسب:

<object type="image/svg+xml" data="./sprite.svg#circle">
  <img src="./fallback-image.png" />
</object>

این روش در همه مرورگرها از جمله Internet Explorer 9 و بالاتر کار می کند.

امروزه پشته های SVG از محبوبیت کمتری برخوردار هستند ، زیرا تعبیه مستقیم SVG در HTML به روشی با بهترین روش تبدیل شده است. با این حال ، هنگامی که به بسیاری از نمادهای SVG نیاز دارید و نیازی به دستکاری مستقیم آنها با استفاده از CSS یا JavaScript نیست ، می تواند ایده آل باشد.