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.

Answer 1

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>