Почитайте доку для разнообразия.
Неймспейсы и директивы use работают на уровне файлов. То есть use связывает полное имя с кратким/алиасом только в том файле, где его написали.

Могу посоветовать, с чего начать.

1) кладем картинку на canvas
2) получаем при помощи getImageData() массив пикселов
3) пытаемся тыкать в него палочкой

Пункт 3 как бы самый интересный, но тут программировать надо.

Я ради фана соорудил вот такую тупую демку на CodePen, называется "Png to Html". Оттуда можно скопипастить первые два пункта и примерно понять, чо делать с третьим. Оно читает картинку из file-input, кладет на канву, затем считывает попиксельно, и для пикселов, у которых альфа-канал не равен 1 и цвет не белый (точнее avg от rgb < 250) создает DOM-узел, раскрашенный нужным цветом и спозиционированный в нужное место. И обязательно с css-анимацией! +) Так что берегите свои браузеры )))

Дальше вам надо эти пиксели как-то сгруппировать. Я бы начал с чтения статьи Connected-component labeling и гугления слов оттуда с приставкой "js". Придумаете реализацию - расскажите нам =)

А, ну и вместо канвы можно изучить png-декодеры, они бывают для браузера (если у вас только сервер - соответственно, с них и начинаем). Должно работать шустрее, но не так наглядно.