Как сделать спрайт и взаимно позиционировать, масштабировать изображения, вызванные из этого спрайта
Если у вас немного svg изображений, то можно быстро сделать спрайт вручную, не подключая сторонних монстров для этих целей.
Преимущество очевидно, пока вручную делается спрайт легко разобраться, как всё устроено, что нужно настроить, чтобы получить желаемый результат.
Допустим у нас 2 SVG изображения:
Андроид
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 96 105" style="border:1px solid" >
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
</g>
<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
<g fill="#FFF">
<circle cx="36" cy="22" r="2"/>
<circle cx="59" cy="22" r="2"/>
</g>
</svg>
Дорожный знак
<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#FE4" stroke-width="3"/>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#CA0" fill="#CA0"/>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"/>
</svg>
Структура спрайта
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 96 105" style="border:1px solid" >
<!-- viewBox можно добавлять в symbol для более тонкой настройки размеров изображения -->
<symbol id="android" viewBox="0 0 96 105">
<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
</symbol>
<symbol id="znak" viewBox="0 0 180 180">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
</symbol>
</svg>
Изменяя viewBox
для каждого symbol
можно индивидуально настроить размеры каждого изображения.
Note
Увеличение 3 и 4-го атрибута viewBox
уменьшает размеры изображения и наоборот, - уменьшение атрибутов увеличивает размеры.
Обратите внимание, что я увеличил viewBox
у дорожного знака, чтобы уменьшить размер знака.
Было: viewBox="0 0 100 100"
Стало viewBox="0 0 180 180"
Вызов изображений из спрайта и их позиционирование
<use xlink:href="#android" x="0" y="0" />
<use xlink:href="#znak" x="20" y="20" />
Ниже полный код:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 96 105" style="border:1px solid" >
<symbol id="android" viewBox="0 0 96 105">
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
</g>
<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
<g fill="#FFF">
<circle cx="36" cy="22" r="2"/>
<circle cx="59" cy="22" r="2"/>
</g>
</symbol>
<symbol id="znak" viewBox="0 0 180 180">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#FE4" stroke-width="3"/>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#CA0" fill="#CA0"/>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"/>
</symbol>
<use xlink:href="#android" x="0" y="0" />
<use xlink:href="#znak" x="20" y="20" />
</svg>