У меня была похожая проблема: я пытался создать гексагональную карту, а затем заполнить шестиугольники спрайтами, такими как лес, вода, луга. Когда я заливаю их сплошным цветом, на рендеринг 10K элементов уходит всего две секунды.
Если я пытаюсь использовать fill: url('image.png');, то на рисование всего 180 шестиугольников уходит больше времени, и браузер вылетает на 10K.
Насколько я могу судить, проблема в том, что Raphael JS создает отдельное определение текстуры для каждого элемента, а затем применяет его в качестве заливки. Это означает, что для 10K-элементов у вас есть 10K-определения текстур, которые указывают на одно и то же изображение. Это плохо.
Обновление:
В итоге я отказался от SVG для такого использования. Это намного быстрее, просто создавать элементы HTML и устанавливать фон с помощью CSS. Вы можете комбинировать их с SVG в качестве слоя сверху, например. Однако вы работаете с большим количеством элементов.
Я решил свою проблему, динамически загружая только те элементы, которые мне нужны, потому что все 10 КБ не должны одновременно находиться в области просмотра.
В вашем случае это не совсем вариант. Хорошей альтернативой будет использование Canvas для рисования элементов. Из моих экспериментов это будет быстрее, чем SVG, при рисовании этого числа, хотя, если вы используете некоторые анимации, их будет сложнее реализовать, чем с библиотекой RaphaelJS.