Решил эту проблему вот ответ если кому нужно:
При добавлении svg файла нужно убедиться что внутри него есть прописанные координаты контуров типа (path) по всем линиям рисунка
M 0.00 0.00 L 27.39 0.00 C 27.82 0.61 28.68 1.82 29.11 2.42 C 32.78 4.14 33.05 8.47 33.97 11.91 C 35.39 9.61 36.73 7.26 38.06 4.91 C 37.99 7.33 37.89 9.75 37.85 12.18 C 38.54 8.95 38.63 5.61 37.92 2.37 C 36.80 4.54 35.77 6.75 34.76 8.96 C 33.95 5.24 31.80 1.99 28.54 0.00 L 50.00 0.00 L 50.00 29.99 C 48.25 27.65 45.99 25.77 43.58 24.16 C 45.00 26.32 46.59 28.35 48.14 30.40 C 47.53 30.47 46.30 30.59 45.68 30.65 C 46.80 31.84 47.91 33.03 49.01 34.23 C 49.26 33.74 49.75 32.74 50.00 32.25 L 50.00 51.00 L 0.00 51.00 L 0.00 0.00 Z
если файл внутри имеет тег , то в иллюстраторе (или в чем там у вас) нужно конвертнуть так, чтобы появились слои прописанные на каждый контур, рафаэль будет использовать их координаты, фактически только эти контуры и нам нужны.
Потом заливаем этот файл в
конвертер, получаем код с рафаэльными добавками.
Из этого кода вырываем те же координаты контуров, (я делал так, можете попробовать без конвертера напрямую) потом их прописываем в одну строку без пробелов, в одну строку, заменяем пробелы запятой, внутри координат контура, а на месте стыков контуров пишем слитно, без пробелов. Самая последняя буква Z должна быть в нижнем регистре, обязательно (иначе рафаэль не поймет)!
Например мы получили код из конвертера такой
var rsr = Raphael('rsr', '29.266', '29.507'); var XMLID_1_ = rsr.set(); XMLID_1_.attr({'id': 'XMLID_1_','name': 'XMLID_1_'}); var XMLID_2_ = rsr.set(); var path_a = rsr.path("M32.04,18.55c-2.92,2.46-5.71,5.67-7.67,9.9c-0.49,1.04-1.17,3.71-2.11,3.84 c-1.109,0.15-1.38-1.17-1.859-1.75c-0.36-0.43-1.28-1.32-2.101-1.87c-0.32-0.21-2.27-0.979-2.45-1.5 c-0.4-1.25,1.05-2.79,1.75-2.91c2.18-0.399,3.43,2.11,4.43,3.141C24.23,23.32,27.56,20.35,32.04,18.55z").attr({fill: '#8F8F8F',parent: 'XMLID_1_','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_a'); var path_b = rsr.path("M22.84,22.04c-0.2,0.66-0.8,0.9-1.04,1.52c-1.63-1.189-3.6-2.119-5.47-1.27 c-1.16,0.51-2.55,2.19-2.8,3.479c-0.6,3.181,2.07,4.051,4.07,5.24c-3.22,0.271-6.6,0.33-10-0.359c-2.79-0.54-5.56-1.62-4.65-5 C3.36,24.09,5.34,22.84,6.9,21.93c1.42-0.83,4.5-1.609,4.77-2.91c0.3-1.479-1.03-2.35-1.52-3.14C7.27,11.07,7.82,2,15.62,2.85 c5.26,0.56,6.439,7.07,4.32,11.86c-0.681,1.53-2.82,2.71-1.98,4.771C18.6,21.1,21.47,20.7,22.84,22.04z").attr({fill: '#8F8F8F',parent: 'XMLID_1_','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_b'); XMLID_2_.attr({'id': 'XMLID_2_','parent': 'XMLID_1_','name': 'XMLID_2_'}); var rsrGroups = [XMLID_1_,XMLID_2_]; XMLID_1_.push( ); XMLID_2_.push( path_a , path_b );
из него выдергивает нужное и имеем такой вид
"M32.04,18.55c-2.92,2.46-5.71,5.67-7.67,9.9c-0.49,1.04-1.17,3.71-2.11,3.84 c-1.109,0.15-1.38-1.17-1.859-1.75c-0.36-0.43-1.28-1.32-2.101-1.87c-0.32-0.21-2.27-0.979-2.45-1.5 c-0.4-1.25,1.05-2.79,1.75-2.91c2.18-0.399,3.43,2.11,4.43,3.141C24.23,23.32,27.56,20.35,32.04,18.55zM22.84,22.04c-0.2,0.66-0.8,0.9-1.04,1.52c-1.63-1.189-3.6-2.119-5.47-1.27 c-1.16,0.51-2.55,2.19-2.8,3.479c-0.6,3.181,2.07,4.051,4.07,5.24c-3.22,0.271-6.6,0.33-10-0.359c-2.79-0.54-5.56-1.62-4.65-5 C3.36,24.09,5.34,22.84,6.9,21.93c1.42-0.83,4.5-1.609,4.77-2.91c0.3-1.479-1.03-2.35-1.52-3.14C7.27,11.07,7.82,2,15.62,2.85 c5.26,0.56,6.439,7.07,4.32,11.86c-0.681,1.53-2.82,2.71-1.98,4.771C18.6,21.1,21.47,20.7,22.84,22.04z"
Сей код добавляем в конец файла стока бесплатных иконок и обзываем его как хотим по примеру как обозваны другие иконки.
Юзаем и радуемся.
