将SVG路径数据转换为可用图像

Question

I am new to Raphael JS. I am trying to take the SVG data from an image I like and make it usable. However, the documentation is not intuitive at all.

I have tried various ways to resize the paper to the image and vice-verse with no success. Can someone show me how to make this image:

• Not be upside down when it renders
• Be a reasonable size

THE CODE:
I took out all my horrible attempts...

    <div id="paper"></div>

    function DrawPerson(raphael) {
                var paper = raphael('paper');    
                var path = "M 677 5943 c 8 -6 -21 -25 -86 -59 l -97 -51 l 14 -59 c 7 -32 11 -77 7 -99 c -3 -22 -7 -60 -9 -85 c -4 -53 -19 -118 -41 -179 c -20 -58 -20 -58 20 -65 c 43 -8 44 -11 38 -66 c -4 -38 -11 -49 -35 -63 c -23 -13 -29 -23 -27 -45 c 2 -15 -4 -38 -14 -52 c -9 -13 -17 -33 -17 -43 c 0 -10 -6 -28 -14 -40 c -7 -12 -21 -62 -31 -112 c -9 -49 -25 -110 -35 -135 c -35 -89 -120 -466 -120 -534 c 0 -18 -10 -40 -25 -56 c -40 -42 -57 -163 -40 -277 c 8 -56 54 -110 100 -119 c 64 -12 68 -27 35 -131 c -37 -119 -50 -214 -47 -338 c 3 -95 16 -145 38 -145 c 6 0 8 -26 3 -72 c -3 -40 -1 -118 6 -173 c 6 -55 15 -165 20 -245 c 9 -174 30 -296 77 -450 c 20 -63 46 -158 59 -210 c 12 -52 33 -117 44 -144 c 23 -50 23 -75 4 -236 c -5 -47 -2 -65 22 -120 c 25 -58 29 -82 37 -235 c 12 -234 12 -324 -2 -435 c -7 -52 -16 -133 -20 -180 c -9 -84 -20 -125 -49 -187 c -13 -27 -14 -41 -4 -94 c 10 -53 9 -66 -3 -79 c -9 -10 -14 -34 -13 -60 c 1 -36 -3 -47 -26 -67 c -15 -12 -40 -23 -55 -23 c -15 0 -72 -15 -127 -34 c -54 -19 -129 -38 -166 -41 c -87 -9 -103 -21 -94 -69 l 7 -36 l 428 1 l 428 1 l 17 31 c 9 18 28 48 42 67 c 16 22 24 46 23 65 c -1 16 4 43 10 60 c 7 16 17 52 22 80 c 6 27 15 59 20 71 c 10 20 5 46 -31 158 c -8 24 -6 34 8 49 c 24 27 19 162 -13 317 c -13 66 -27 166 -31 223 c -6 94 -5 108 16 153 c 36 80 40 101 26 137 c -8 17 -19 69 -25 115 c -7 45 -21 108 -31 140 c -22 65 -25 93 -10 108 c 7 7 7 21 -1 43 c -9 25 -9 42 0 71 c 17 57 13 184 -10 290 c -35 166 -37 184 -28 240 c 4 30 16 114 25 185 c 9 72 23 142 30 157 c 8 15 14 37 14 50 c 0 13 14 59 32 103 c 42 106 54 240 48 555 c -1 47 5 117 14 157 c 16 73 99 296 155 415 c 17 37 31 74 31 83 c 0 8 9 48 20 87 c 11 40 20 97 20 127 c 0 47 -31 214 -60 321 c -5 19 -12 59 -16 88 c -4 33 -16 64 -29 80 c -12 15 -30 43 -40 62 c -10 19 -30 51 -45 70 c -85 109 -95 222 -26 291 c 42 42 102 124 121 166 c 36 78 0 269 -62 331 c -9 9 -12 25 -9 41 c 5 22 5 23 -5 8 c -10 -17 -12 -16 -27 12 c -30 54 -213 152 -231 123 c -6 -9 -79 -2 -141 13 c -15 4 -20 3 -13 -2 Z m -67 -1158 c -5 -11 -19 -46 -30 -77 c -14 -38 -38 -74 -72 -109 l -51 -52 l 6 59 c 7 71 41 140 96 197 c 23 23 41 46 42 52 c 0 5 5 -3 10 -20 c 6 -19 5 -37 -1 -50 Z";
                var person = paper.path(path);

                person.attr({
                    'fill': '#000000'
                });

return person;
            }

Answer 1

You can transform your path to have it display as you like. Your source SVG has some big path coördinates, so the transformation needs to be big as well. From a working JS Bin :

function DrawPerson(raphael) {
  var paper = raphael('paper', 0, 0, 1000, 1000); 
  var path = ""; # Removed

  var person = paper.path(path);
  person.transform("r180,s0.1,t5500,26500");
  person.attr({
      'fill': '#000000'
  });

  return person;
}