Правильно ли сделан svg спрайт?

Question

[Muvka]

Для рейтинга потребовалось создать svg спрайт. Погуглив сделал вот такое

<svg width="196" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 16">
  <symbol id="star">
    <path d="M8 1L10.0161 5.22507L14.6574 5.83688L11.2621 9.05993L12.1145 13.6631L8 11.43L3.8855 13.6631L4.73788 9.05993L1.3426 5.83688L5.9839 5.22507L8 1Z"/>
  </symbol>
  <use href="#star" fill="#FF9C28"></use>
  <use x="20" href="#star" fill="#FF9C28"></use>
  <use x="40" href="#star" fill="#FF9C28"></use>
  <use x="60" href="#star" fill="#FF9C28"></use>
  <use x="80" href="#star" fill="#FF9C28"></use>
  <use x="100" href="#star" fill="#D0D8E2"></use>
  <use x="120" href="#star" fill="#D0D8E2"></use>
  <use x="140" href="#star" fill="#D0D8E2"></use>
  <use x="160" href="#star" fill="#D0D8E2"></use>
  <use x="180" href="#star" fill="#D0D8E2"></use>
</svg>

В браузерах вроде все хорошо, но смущает, что ни inkscape ни просмотрщик изображений не показывают звезды. Это нормально или я что-то неправильно сделал?

Comments

[Михаил]

обычно спрайт это 1 файл со всеми иконками, а тут намешано непонятно что

[Muvka]

Тут 10 звед в строку. Сначала 5 оранжевых, потом 5 серых.

Answer 1

[Петр]

Use не имеет href, есть только xlink:href
<use xlink:href="#star" />

Comments

[Muvka]

Сделал, как вы сказали - теперь в просмотрщике изображений есть звезды, а в FF вот такое - Изображение

[Muvka]

Так, я добавил xmlns:xlink="www.w3.org/1999/xlink" в svg

<svg width="196" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 196 16">
  <symbol id="star">
    <path d="M8 1L10.0161 5.22507L14.6574 5.83688L11.2621 9.05993L12.1145 13.6631L8 11.43L3.8855 13.6631L4.73788 9.05993L1.3426 5.83688L5.9839 5.22507L8 1Z"/>
  </symbol>
  <use xlink:href="#star" fill="#FF9C28"></use>
  <use x="20" xlink:href="#star" fill="#FF9C28"></use>
  <use x="40" xlink:href="#star" fill="#FF9C28"></use>
  <use x="60" xlink:href="#star" fill="#FF9C28"></use>
  <use x="80" xlink:href="#star" fill="#FF9C28"></use>
  <use x="100" xlink:href="#star" fill="#D0D8E2"></use>
  <use x="120" xlink:href="#star" fill="#D0D8E2"></use>
  <use x="140" xlink:href="#star" fill="#D0D8E2"></use>
  <use x="160" xlink:href="#star" fill="#D0D8E2"></use>
  <use x="180" xlink:href="#star" fill="#D0D8E2"></use>
</svg>

Теперь и в браузере нормально. Только в этом была ошибка?

[Петр]

Muvka, Так обьявите namespace

<svg ...  xmlns:xlink="http://www.w3.org/1999/xlink">

[Muvka]

Петр, Ага. Спасибо. Я немного раньше сам успел разобраться) Теперь полностью валидный svg?

[Петр]

Muvka, https://validator.w3.org/#validate_by_uri+with_options там "Document Type" - svg