این آموزش دو روش ایجاد را توصیف می کند روحیه حاوی تصاویر زیادی است. با این حال ، از 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 نیست ، می تواند ایده آل باشد.