0

I am using some svg fonts in a program, where I need exact information about the boundary boxes of each font. In my program I am using the path's ds of the fonts. When I open the shapes in a svg-renderer like Inkscape the shapes are upside-down, so I have to perform a transform="scale(1 -1)" to get them in the right form. This seems to cause a problem with the bounding box which I extract from the paths by doing the following steps:

  1. Write the path in the following form in a .svg file:

    <svg width="793.70081" height="1122.51965" version="1.1"  id="toplevel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- This calculates the Bbox. -->
      <rect id="bbox" fill="red" fill-opacity="0.4" />
      <path id="glyph" d="M0 -474c-1.85926 173.841 -2.63826 379.875   -2.63826 556.64c0 203.525 1.03271 368.249 2.63826 400.36c0.501868 10.037 9 14 19 16c18.4877 3.16932 33.0692 4.38553 48.0185 4.38553c13.352 0 26.9974 -0.970187 43.9815 -2.38553c7 -1 13 -5 13 -12 c0.146447 -55.3568
    

0.207107 -107.068 0.207107 -156.201c0 -237.234 -1.41421 -414.365 -1.41421 -651.599c0 -49.1328 0.0606602 -100.844 0.207107 -156.201c0 -12 -7 -22 -18 -24c-18.5 -3.5 -33.5 -5.5 -48.375 -5.5s-29.625 2 -47.625 6.5c-10 2 -9 14 -9 24zM187 -78 c0.5 -62.5 0.75 -126.5 0.75 -194.625s-0.25 -140.375 -0.75 -219.375c0 -4 -6.72925 -6 -13.4689 -6s-13.4896 2 -13.5311 6c-4 384 -7 822 -7 987c0 5 6.5 7.5 13 7.5s13 -2.5 13 -7.5c3 -159 2 -284 4 -410c0 -13 13 -12 18 -7c18 18 63 67 74 135 c1.0914 7.0941 7.84079 12.1037 15.0481 12.1037c6.0001 0 12.3176 -3.47199 15.9519 -12.1037c25 -60 44 -126 121 -126c60.1254 0 72.5607 95.38 72.5607 176.92c0 10.6793 -0.213306 21.1211 -0.560716 31.0802c-3 80 0 185 -87 185 c-35.6377 0 -84.0151 -20.5794 -84.0151 -36.5154c0 -13.3286 10.7177 -23.4846 24.0151 -23.4846c0.691046 0.0246802 1.38636 0.0371782 2.08524 0.0371782c26.1196 0 57.229 -17.4568 57.229 -68.8505c0 -2.94942 -0.102458 -6.01061 -0.314196 -9.18668 c-2.64451 -36.1416 -37.1479 -61.4045 -73.3715 -61.4045c-4.86947 0 -9.77002 0.456522 -14.6285 1.40451c-44.3181 9.06507 -71.0123 46.7289 -71.0123 94.0548c0 82.6302 60.1421 123.945 197.012 123.945c102.845 0 195.008 -91.6967 195.008 -237.291 c0 -8.71285 -0.330056 -17.6187 -1.00763 -26.7095c-10 -134 -83 -191 -188 -191c-42 0 -59 32 -95 32c-41 0 -56 -29 -56 -70c0 -43 20 -75 54 -75c40 0 48 30 102 30c147 0 209 -99 209 -253c0 -123 -66 -205 -233 -209 c-4.02166 -0.0946274 -8.08138 -0.144483 -12.1669 -0.144483c-82.2635 0 -174.975 20.2135 -177.833 102.144c-0.0743814 1.71077 -0.111418 3.42985 -0.111418 5.15418c0 44.2006 24.3356 91.86 67.8083 91.86c0.432482 0 0.866859 -0.00471685 1.30312 -0.0142009 c48.2537 -1.04899 80.0627 -40.1398 80.0627 -77.8604c0 -35.8133 -10.9004 -43.5585 -30.0627 -53.1396c-10 -5 -15 -12 -15 -22c0 -14 30 -24 70 -24c78 0 96 76 96 192c0 125 -9 210 -80 210c-67 0 -122 -80 -129 -107 c-2.56763 -10.2705 -10.4095 -17.6403 -18.6503 -17.6403c-7.80669 0 -15.9715 6.61369 -20.3497 23.6403c-9 36 -32 73 -51 109c-2.8828 5.28513 -9.92085 9.64686 -16.4557 9.64686c-7.06628 0 -13.5443 -5.09991 -13.5443 -19.6469z"/>

  <script type="text/javascript"><![CDATA[
  var x = document.getElementById("glyph");
  var bb=x.getBBox();
  var rect = document.getElementById("bbox");
  rect.setAttribute('x', bb.x);
  rect.setAttribute('y', bb.y);
  rect.setAttribute('width', bb.width);
  rect.setAttribute('height', bb.height);
  ]]></script>
 </svg>
  1. I open this .svg file in Firefox, start up the console (by hitting F12 Key), and issue this command in the console:

    document.documentElement.outerHTML
    

which outputs something like:

    "<svg width=\"793.70081\" height=\"1122.51965\" version=\"1.1\" id=\"toplevel\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
      <!-- This is the Bbox. -->
      <rect id=\"bbox\" fill=\"red\" fill-opacity=\"0.4\" x=\"-2.6382598876953125\" y=\"-504.5009765625\" width=\"671.6383056640625\" height=\"1007.886474609375\"/>
      <path id=\"glyph\" transform=\"scale(1 -1)\" d=\"M0 -474c-1.85926 173.841 -2.63826 379.875 -2.63826 556.64c0 203.525 1.03271 368.249 2.63826 400.36c0.501868 10.037 9 14 19 16c18.4877 3.16932 33.0692 4.38553 48.0185 4.38553c13.352 0 26.9974 -0.970187 43.9815 -2.38553c7 -1 13 -5 13 -12 c0.146447 -55.3568 0.207107 -107.068 0.207107 -156.201c0 -237.234 -1.41421 -414.365 -1.41421 -651.599c0 -49.1328 0.0606602 -100.844 0.207107 -156.201c0 -12 -7 -22 -18 -24c-18.5 -3.5 -33.5 -5.5 -48.375 -5.5s-29.625 2 -47.625 6.5c-10 2 -9 14 -9 24zM187 -78 c0.5 -62.5 0.75 -126.5 0.75 -194.625s-0.25 -140.375 -0.75 -219.375c0 -4 -6.72925 -6 -13.4689 -6s-13.4896 2 -13.5311 6c-4 384 -7 822 -7 987c0 5 6.5 7.5 13 7.5s13 -2.5 13 -7.5c3 -159 2 -284 4 -410c0 -13 13 -12 18 -7c18 18 63 67 74 135 c1.0914 7.0941 7.84079 12.1037 15.0481 12.1037c6.0001 0 12.3176 -3.47199 15.9519 -12.1037c25 -60 44 -126 121 -126c60.1254 0 72.5607 95.38 72.5607 176.92c0 10.6793 -0.213306 21.1211 -0.560716 31.0802c-3 80 0 185 -87 185 c-35.6377 0 -84.0151 -20.5794 -84.0151 -36.5154c0 -13.3286 10.7177 -23.4846 24.0151 -23.4846c0.691046 0.0246802 1.38636 0.0371782 2.08524 0.0371782c26.1196 0 57.229 -17.4568 57.229 -68.8505c0 -2.94942 -0.102458 -6.01061 -0.314196 -9.18668 c-2.64451 -36.1416 -37.1479 -61.4045 -73.3715 -61.4045c-4.86947 0 -9.77002 0.456522 -14.6285 1.40451c-44.3181 9.06507 -71.0123 46.7289 -71.0123 94.0548c0 82.6302 60.1421 123.945 197.012 123.945c102.845 0 195.008 -91.6967 195.008 -237.291 c0 -8.71285 -0.330056 -17.6187 -1.00763 -26.7095c-10 -134 -83 -191 -188 -191c-42 0 -59 32 -95 32c-41 0 -56 -29 -56 -70c0 -43 20 -75 54 -75c40 0 48 30 102 30c147 0 209 -99 209 -253c0 -123 -66 -205 -233 -209 c-4.02166 -0.0946274 -8.08138 -0.144483 -12.1669 -0.144483c-82.2635 0 -174.975 20.2135 -177.833 102.144c-0.0743814 1.71077 -0.111418 3.42985 -0.111418 5.15418c0 44.2006 24.3356 91.86 67.8083 91.86c0.432482 0 0.866859 -0.00471685 1.30312 -0.0142009 c48.2537 -1.04899 80.0627 -40.1398 80.0627 -77.8604c0 -35.8133 -10.9004 -43.5585 -30.0627 -53.1396c-10 -5 -15 -12 -15 -22c0 -14 30 -24 70 -24c78 0 96 76 96 192c0 125 -9 210 -80 210c-67 0 -122 -80 -129 -107 c-2.56763 -10.2705 -10.4095 -17.6403 -18.6503 -17.6403c-7.80669 0 -15.9715 6.61369 -20.3497 23.6403c-9 36 -32 73 -51 109c-2.8828 5.28513 -9.92085 9.64686 -16.4557 9.64686c-7.06628 0 -13.5443 -5.09991 -13.5443 -19.6469z\"/>

      <script type=\"text/javascript\"><![CDATA[
      var x = document.getElementById(\"glyph\");
      var bb=x.getBBox();
      var rect = document.getElementById(\"bbox\");
      rect.setAttribute('x', bb.x);
      rect.setAttribute('y', bb.y);
      rect.setAttribute('width', bb.width);
      rect.setAttribute('height', bb.height);
      ]]></script>
    </svg>"

The bounding box is now basically the coordinates of the rect as outputed by Firefox console: x=\"-2.6382598876953125\" y=\"-504.5009765625\" width=\"671.6383056640625\" height=\"1007.886474609375\".

Now as I said before if I use the path as is defined, the shape is upside-down (please note that the picture here is not exactly the same path as in the above example, but this is not a matter, since I have tested all of the paths and they are all defined the same way):

enter image description here

(The red rect is pointing to the top and left of the bounding box, which I have extracted with Firefox console as depicted above.)

Hence I need to do an extra scale(1 -1) to get it in the right shape:

enter image description here

But then this thing happens: the top edge of the shape has also moved and the bounding box information doesn't match any more. My question is: is there a way to get the bounding box information of the path in already correct form (i.e. as the scale(1 -1) has already been taken into consideration). I have tried putting a transform="scale(1 -1)" attribute in the path element in the .svg file above, before acquiring the Bbox information, but this seems to have no effect, as I get exactly the same Bbox coordinates.

Any helps are highly appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.