Specify baseline position in SVG

Question

Is there a possibility, in SVG, to determine a vertical position as being the "baseline" for that SVG graphics?

Context: we include a lot of inline SVG in tasks I prepare for students (see the attached screenshot, in which the circled 2 and 3 are actually SVG data). This text with inline SVG is published as HTML and in LaTeX. I'd like to find a way to include in my SVG files some marker such that later I don't have to manually specify a vertical offset for each graphic files to be perfectly aligned.

In this example, for instance, the bottom of the "2" within the circle should be determined as baseline, such that it can be automatically aligned with the bottom the of other characters that have no descender.

score 2 · Answer 1 · answered Nov 28 '22 at 16:07

2

No, there is no such marker. The best you can do for a workaround is probably this: Set the bottom of the viewBox such that it represents the baseline. Then, if you globally set overflow: visible for all of your SVG icons, it doesn't matter if you have grafical content outside the viewBox, especially below the baseline.

p {
  font-size: 40px;
}
svg {
  width: 1em;
  overflow: visible;
}
circle {
  fill: none;
  stroke: black;
}
text {
  font-size: 14px;
}

<p>Example<svg viewBox="0 0 20 15">
  <circle r="8.5" cx="10" cy="10" />
  <text x="6" y="15">1</text>
</svg>text</p>

answered Nov 28 '22 at 16:07

ccprog

20,308
4
27
44

Interesting solution. If I get to do some preprocessing before insertion into HTML or LaTeX, would I be allowed to store in a custom attribute next to viewBox a `baseline` or `x-baseline` or `data-baseline` attribute that I can read back in later? – Jean-Philippe Pellet Nov 28 '22 at 16:24
Why not, if you see the need? But all your preprocessing would do is copy the number from that attribute into the viewBox. Why not store it there directly? – ccprog Nov 28 '22 at 16:37

Specify baseline position in SVG

1 Answers1