Тайна вырезания контура в фигуре SVG

#svg

Есть две версии иконки SVG. На одной стрелка вырезается, а на второй - нет, хотя
технологически всё верно. Почему не вырезается во второй и как исправить?



svg {width: 120px;}
Иконка №1:


Иконка №2:




    

Ответы

Ответ 1

По умолчанию правило SVG - fill-rule принимает значение равное nonzero
В патче иконки два подпути (начинаются с команды M) - первый рисует облако, второй
подпуть стрелку. 
При правиле fill-rule="nonzero", где будет закрашенная область, а где "дырка" - зависит
от взаимного направления подпутей.    
 Подробнее на русском о правиле fill-rule здесь.
В первой иконке в вопросе автора,  два подпути идут навстречу друг другу, поэтому
внутренняя область стрелки будет незакрашена см. Рис.2
Сделал для наглядности пример анимации: подпуть рисующий облако движется против часовой
стрелки. Подпуть стрелки - по часовой. 

Анимация начинается при клике. 






Ответ 2

Решается добавлением fill-rule: evenodd в стили или атрибуты тега path:



svg {width: 120px;}

#second path { fill-rule: evenodd; }
Иконка №1:


Иконка №2: