Как определить ширину / высоту svg-sprite и записать эти значения в файл (в Linux или Mac CLI)

Question

Я пытаюсь создать svg-sprite с помощью пакета npm svg-sprite. В конце концов я получаю спрайт, который выглядит так:

// icons-test.svg
...
<svg viewBox="0 0 108 54" ...>
  <svg height="54" width="54" viewBox="-2 -2 54 54" ...>
    <path d="...”>
   </svg>
  <svg height="54" width="54" viewBox="-2 -2 54 54" ...>
    <path d="...”>
  </svg>
</svg>

Чтобы определить размер (например, ширину) этого svg-спрайта, я использую команду identifier из утилиты ImageMagick.

identify -format '%w' icons-test.svg

или запишите это в файл

echo "\$spriteWidth = $(identify -format ‘%w’ icons-test.svg)px" >> styles.styl

Проблема в том, что в файле я не получаю ширину полного svg-sprite (108), а только ширину последнего вспомогательного svg-изображения (54), включенного в общий svg-sprite.

Пожалуйста, скажите мне, где моя ошибка? Как сделать так, чтобы вернуть верную ширину. Или посоветуйте мне другие варианты решения проблемы.

Answer 1

Я подозреваю, что вложенный svg теги сбивают с толку внутренний SVG-декодер ImageMagick. Попробуйте конвертировать SVG в MVG. Он должен выбросить вложенную структуру SVG.

$ convert icons-test.svg mvg:-

Который напечатает следующие инструкции MVG.

push graphic-context
viewbox 0 0 108 54
affine 1 0 0 1 0 0
push graphic-context
viewbox 0 0 54 54
affine 1 0 0 1 2 2
push graphic-context
path ''
pop graphic-context
pop graphic-context
push graphic-context
viewbox 0 0 54 54
affine 1 0 0 1 2 2
push graphic-context
path ''
pop graphic-context
pop graphic-context
pop graphic-context

С вложенными viewboxизолированы от graphic-contexts в стеке, вы должны быть в состоянии правильно определить.

$ convert icons-test.svg mvg:- | identify -format '%w' mvg:-
#=> 108