Может ли любой глификон быть просто одним путем?

Question

Я говорю о монохроматическом значке в формате SVG. Примером этого могут служить значки в верхнем правом углу веб-сайта stackoverflow.

Я заметил, что все иконки в начальной загрузке Twitter - это просто один путь (даже если они состоят из множества элементов): https://getbootstrap.com/docs/3.3/components/

  <path d="M250 700h800q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5z" />

Но другие наборы иконок, такие как: https://glyph.smarticons.co/

Их глификоны состоят из нескольких элементов:

<path d="M7.984,0.053 C3.599,0.053 0.045,3.614 0.045,8.006 C0.045,12.398 3.6,15.959 7.984,15.959 C12.368,15.959 15.923,12.398 15.923,8.006 C15.923,3.614 12.369,0.053 7.984,0.053 L7.984,0.053 Z M7.49,2.045 C8.328,2.045 9.009,2.699 9.009,3.505 C9.009,4.311 8.328,4.965 7.49,4.965 C6.65,4.965 5.971,4.311 5.971,3.505 C5.971,2.699 6.65,2.045 7.49,2.045 L7.49,2.045 Z M8.035,14.908 C4.984,14.908 2.342,10.918 8.101,7.984 C13.357,5.308 10.904,0.744 8.035,1.008 C12.41,1.008 14.974,4.119 14.974,7.958 C14.975,11.797 11.867,14.908 8.035,14.908 L8.035,14.908 Z" class="si-glyph-fill"></path>
<ellipse cx="8.493" cy="11.445" rx="1.493" ry="1.445" class="si-glyph-fill"></ellipse>

Я заметил, что с помощью векторной программы я могу превратить объекты в пути, а затем объединить все пути.

Но мне интересно, теоретически возможно ли, чтобы каждый глифик мог быть преобразован в один путь таким образом? Или есть ситуации, когда иконка не может быть?

Answer 1

Это глупый пример: у вас есть 2 простых изображения SVG. Первый имеет только один путь. Для второго я взял очки из первого SVG и сделал 2 пути. 2 изображения выглядят одинаково.

svg{display:inline-block;border:1px,solid;}
path{fill:none; stroke:black;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z"/>
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>

Теперь вы удалите обводку и сделаете заливку черной:

svg{border:1px solid;display:inline-block;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z" />
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>