Hacker News new | ask | show | jobs
by skgough 722 days ago
Usually when I have to use text in SVG I give up and use HTML in a <foreignObject> [1] tag. The article mentions that SVG is in an awkward halfway point between being useful for humans or a compile target for vector graphics. Text is where this becomes really obvious. Trying to generate SVG with <text> elements in it that end up where you want them is hopeless, especially if you don't know what font the text will be rendered in. I prefer specifying the x,y, width,height of a box that HTML goes into in a <foreignObject> tag and letting the browser reflow the text as necessary within that space. But that's still often not perfect, and I have run into browser incompatibilities when doing any more than basic CSS rules on the HTML inside.

[1] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...