# getting width of element created by \`tex2svg\`

**URL:** <https://talk.observablehq.com/t/getting-width-of-element-created-by-tex2svg/7401>\
**Category:** Help\
**Created:** [December 7, 2022, 5:56pm UTC](https://talk.observablehq.com/t/getting-width-of-element-created-by-tex2svg/7401 "2022-12-07T17:56:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![stuvjordan-uroc](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/stuvjordan-uroc/32/6808_2.png) [@stuvjordan-uroc](https://talk.observablehq.com/u/stuvjordan-uroc)\
**Post date:** [December 7, 2022, 5:56pm UTC](https://talk.observablehq.com/t/getting-width-of-element-created-by-tex2svg/7401/1 "2022-12-07T17:56:26Z")

</div>

Hey folks…

So I like to put nicely formated math in my svgs using MathJax’s `tex2svg`, following the fantastic guidance from @mcmcclur such as here: [SVG and MathJax 3 / Mark McClure | Observable](https://observablehq.com/@mcmcclur/svg-and-mathjax-3).

I’m wanting to get more precise about how I position the elements created by `tex2svg`. For this purpose, I’d like to be able to get the width and height of any bit of math inserted by `tex2svg`.

I’ve been banging my head against this for a couple of hours, and haven’t been able to find a solution. My approach has been to try to use d3’s `getBBox()`. But that function returns 0 width and 0 height when applied to all the elements produced when I use `tex2svg`. Here’s a notebook demonstrating my failed attempts:

> **[Trying to get the bbox of math created with MathJax's tex2svg](https://observablehq.com/d/70fb82b60557dfb8)**
>
> The following doesn't work. Evidently, when you append a 'g' to another 'g' in order to typset some math using \`tex2svg\`, the bounding box of the parent 'g' has width zero OK, so then let's get inside that 'g'. When you append math to a 'g' using...

Note that you’ll need to use developer tools to see the failures that notebook generates. Each cell does a `console.log()` to show what’s returned from `getBBox()`.

Help?

Thank you!

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [December 7, 2022, 6:32pm UTC](https://talk.observablehq.com/t/getting-width-of-element-created-by-tex2svg/7401/2 "2022-12-07T18:32:04Z")

</div>

`getBBox` only works correctly _after_ the element is laid out on the webpage. So, try the following:

First, give your output SVG a name to reference - perhaps, something like `svg_with_math`.

Then, in a new cell, try the following:

```
d3
  .select(svg_with_math)
  .selectAll("g.math")
  .nodes()
  .map(function (svg_element) {
    let rect = svg_element.getBBox();
    return { width: rect.width, height: rect.height };
  })

```

I get the following when I do that:

```
[
  {width:8.887125968933105, height:8.266669273376465},
  {width:139.96884155273438, height:17.62497329711914},
  {width:52.637535095214844, height:46.82771301269531}
]

```

Often, this means you need to render an SVG and then modify it to get more precisely what you want. In practice, that’s not noticeable to the user.