Предполагам всички сте чували за Raphael (ако не сте ви препоръчвам това видео, както и да видите демотата на сайта). Наскоро все по-често започнах да използвам svg чрез Raphael, вместо flash, и резултатите поне до този момент са просто страхотни. Svg като технология я има от сумати време, въпреки че доста хора я слагат в графата на HTML5. Което не е много правилно.
В един svg файл има страшно много информация, но реално поне на този етап това което ме интересува от него са така наречените path-вете, който грубо казано са нещо такова:
"m 582.90435,347.34481 -0.875,0.99993 -0.625,1.18741 -0.49999,1.2499 -0.25,1.43739 -0.125,1.3749 0.0625,1.56238 0.1875,1.62488 0.43749,1.81237 0,0.62495 -0.37499,0.49996 -28.37474,18.87358 -0.375,0.125 -0.3125,0 -0.93749,-0.0625 -0.81249,0.0625 -0.81249,0.18748 -0.6875,0.43747 -0.68749,0.43747 -0.625,0.68744 -0.56249,0.81244 -0.4375,0.99993 -0.56249,1.18741 -0.5,1.3749 -0.43749,1.49988 -0.3125,1.68738 -0.375,1.81236 -0.24999,1.99985 -0.1875,2.18734 -0.125,2.37482 0,0.0625 0,0.18748 0,0.12499 -0.1875,1.93736 0,2.06234 3.12497,0.18749 1.49999,0.18749 1.49998,0.31247 2.81248,0.68745 1.31249,0.43747 1.37498,0.56246 1.74999,0.62495 1.68748,0.81244 1.56249,0.87493 1.49998,1.06242 1.37499,1.06242 1.31249,1.24991 1.18749,1.3124 1.12499,1.43739 1.125,1.68738 0.99999,1.93735 6.99993,0 0.24999,0 0.3125,0.18749 2.37499,1.87486 1.18749,0.87493 1.24999,0.93743 4.87495,3.49974 4.87496,3.12476 4.87495,2.99978 2.62498,0.74995 1.31249,0.24997 1.37498,0.18748 1.24999,0.0625 1.37499,0 1.31249,-0.12499 1.37499,-0.12499 1.24999,-0.31247 1.24998,-0.37498 1.24999,-0.43746 1.37499,-0.49997 1.24999,-0.62495 1.24999,-0.68745 1.24999,-0.81244 1.31248,-0.87493 0.25,-0.18749 0.4375,0 0.31249,0.12499 0.375,0.24999 9.18742,10.24922 0.62499,-0.31247 0.625,-0.24999 1.18749,-0.49996 0.0625,-0.12499 0.125,-0.0625 0.25,-0.125 0.5,-0.24997 0.0625,-0.12499 0.12499,-0.0625 0.25,-0.12499 0.4375,-0.24998 0.3125,-0.37498 0.12499,-0.18748 0.1875,-0.12499 0.5625,-0.62496 0.125,-0.37497 0,-0.12499 0,-0.0625 0.0625,0 0.12499,-0.12499 0.25,-0.62496 0.0625,-0.43746 0.25,-0.18749 0.25,-0.18749 0.31249,-0.0625 15.31236,-1.3749 0.375,0.0625 0.74999,0.12499 0.375,0.0625 0.4375,0.12499 1.49998,0.37498 0.6875,0.12499 0.74999,0.18748 1.37499,0.37497 0.25,0 0.12499,0 0.0625,0 0.125,0.0625 0.625,0.12499 1.18749,0.24998 0.49999,0.0625 0.5625,0.12499 0.99999,0.24997 0.56249,0 0.25,0 0.125,0 0.0625,0 0.125,0.0625 0.87499,0.12499 0.25,0 0.24999,0.0625 0.1875,0 0.125,0.0625 0.1875,-0.31247 0.4375,-0.18749 0.62499,-0.31247 0.62499,-0.37498 1.24999,-0.99992 0.625,-0.62495 0.62499,-0.68745 1.24999,-1.62488 1.12499,-1.99985 1.24999,-2.24983 1.12499,-2.6248 0.25,-0.74994 0.125,-0.37498 0.0625,-0.18748 0.125,-0.12499 0.625,-1.43739 -0.125,-6.56201 -0.125,-3.18726 0,-2.93728 -0.25,-5.68708 -0.125,-2.68729 -0.125,-2.56231 -0.24999,-2.56231 -0.1875,-2.37482 -0.25,-2.31233 -0.1875,-2.18733 -0.31249,-2.12484 -0.25,-1.93736 -0.3125,-1.93735 -0.25,-1.74987 -0.43749,-1.49989 -0.4375,-1.3124 -0.56249,-1.24991 -0.6875,-1.12491 -0.87499,-1.12492 -0.93749,-0.93743 -1.06249,-0.93743 -1.18749,-0.74994 -0.0625,0 -0.81249,-0.37497 -0.93749,-0.31248 -1.06249,-0.24998 -1.06249,-0.18749 -1.24999,-0.24998 -1.31249,-0.12499 -1.43749,-0.12499 -1.49998,-0.0625 -1.68749,-0.12499 -1.74998,-0.0625 -1.87499,0 -1.93748,0 -2.06248,0 -2.18748,0.0625 -2.24998,0.12499 -2.31248,0.12499 -4.06246,0.24998 -3.81247,0 -3.68746,-0.24998 -3.43747,-0.37497 -3.31247,-0.68745 -3.06247,-0.87493 -1.49999,-0.56246 -1.37499,-0.56246 -1.37498,-0.68745 -1.24999,-0.68745 -2.56248,-1.62487 -2.31248,-1.87486 -1.12499,-1.06242 -0.99999,-1.06242 -0.99999,-1.12492 -0.87499,-1.12491 -0.93749,-1.31241 -0.8125,-1.3124 -0.81249,-1.37489 -0.68749,-1.3749 -0.75,-1.49989 -0.62499,-1.49989 -0.62499,-1.62487 -0.5,-1.62488 -2.49998,0.37497 -2.24998,0.56246 -2.06248,0.56246 -1.81248,0.81244 -1.68749,0.81243 -1.43748,0.99993 -1.3125,1.06242 -0.99999,1.18741 z"
Красота нали (ей такива неща ни изкарват лошо име на разработчиците, но това е друга тема) ?
Та дизайнера ми дава един svg файл със 60-70 такива path-a и аз трябва да ги вградя в сайта. Както и сами се досещате се налагат промени, за което се изисква да се подава нов файл с променените path-ве. Защото няма как да се променят директно (или не познавам някой който може да го направи).
Path-вете поне до сега съм ги ползвал в два формата:
- Array – просто масив където като string е всеки path
- Object – където името на path-a е като като property, а самия path e като неговата стойност.
И вече с Raphael ги обхождам и правя това което ми трябва. Като това обръщане ми трябва да го правя доста често затова за удобство си направих две Rake задачи:
rake svg2js:array from=some.svg to=svg_data_in_array.js
rake svg2js:object from=some.svg to=svg_data_object.js
Като ето го и кода на самите задачи в gist – http://gist.github.com/618608
Тези двете сигурно са ми спестили часове излишна работата, надявам се и на вас да са ви полезни.
п.п. И един допълнителен съвет, ако svg-то което ползвате в сайта е изместено спрямо подадения svg файл проверете дали нямате наложена матрица.