Skip to main content
Inspiring
June 15, 2018
Question

Determining Width/Height of SVG from Text/Code

  • June 15, 2018
  • 3 replies
  • 831 views

The code below is the SVG code for the letter G. What in this code sets the width and height, or the relationship between the width and height? Is there some common way in SVG code to determine the height and width or the relationship between the two?

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">

  <defs>

    <style>

      .cls-1 {

        fill: #59d80f;

      }

    </style>

  </defs>

  <title>Artboard 1G</title>

  <path class="cls-1" d="M210.2998,306.1001A21.11562,21.11562,0,0,1,220.19971,304a21.74637,21.74637,0,0,1,10,2.1001Q236.5,309.30152,236.5,316.7998v13.4004H224.7998V319.3999q0-7.1997-4.60009-7.1997-4.5,0-4.5,7.1997v49.2002q0,7.1997,4.5,7.1997,4.59887,0,4.60009-7.1997V352.8999H221v-7.7998h15.5v37.2998h-4.1001l-1.1001-5.7998h-2.8999l-.5,1.1997a9.59957,9.59957,0,0,1-4.5,4.7002,11.75586,11.75586,0,0,1-5.7998,1.5q-6.50172,0-10.0503-3.3501Q203.999,377.30054,204,371.2002V316.7998Q204,309.2998,210.2998,306.1001Z"/>

</svg>

    This topic has been closed for replies.

    3 replies

    JETalmage
    Inspiring
    June 15, 2018
    The code below is the SVG code for the letter G.

    No, the code in your SVG is for a path. An SVG path is defined by the series of XY coordinate pairs for its nodes and handles, which is what you see in the code you pasted between the path tags (<path.../>).

    There is nothing in that code which expressly "sets the width and height, or the relationship between the width and height" of the path. (Just as there is nothing in that code which defines the path as a "G".)

    Trying to do a "bounding box calculation" based on the "largest and smallest values" of the coordinate pairs, as Mylenium proposes, would in no way ensure the bounds, since the curves in Bezier paths are interpolated between nodes. So such a calculation would be pointless unless the path happens to have nodes at the vertical and horizontal extremes and no handle coordinates are outside those positions.

    Just do a web search for "SVG get bounds of a path" and start reading.

    JET

    Inspiring
    June 15, 2018

    My developer has done a fair bit of digging and has been been unsuccessful. I'm not a code guy (I can cause trouble in HTML/CSS, but by no means a coder) and I've dug around a bit myself to try and help him out and resorted to a few forum posts to get some insights. I can assure you we're trying to do our own homework on this, just not had any luck yet.

    Mylenium
    Legend
    June 15, 2018

    A simple bounding box calculation of the largest and smallest values in the path would do, which are in your case derived in pixels based on the view box' default setting. Otherwise width and height have no intrinsic meaning - like in most vector formats. Without the view box information, your artwork could be any size.

    Mylenium

    Monika Gause
    Community Expert
    Community Expert
    June 15, 2018

    You might want to ask this question in an SVG and coding related forum.

    Inspiring
    June 15, 2018

    Thanks for the recommendation, finding an active SVG code forum has been hard so I thought I'd give this forum a try as there is a skillset overlap! I'll keep looking for a good SVG forum.