Trying to figure out how to best add text to an SVG, I thought maybe it doesn't show up because it's black-on-black, so I gave it stroke="white" before realizing I need to zoom out. Well, and stroke means the outline in SVG, so on the white background, it just makes the font look really thin.

This is the whole code:

<svg viewBox="0 -5 40 10" xmlns="http://www.w3.org/2000/svg">
  <text stroke="white">hello</text>
  <circle id="myCircle" cx="5" cy="5" r="4" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

And most of that is just this MDN example: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use#example

It does use my default font, which is Fira Sans. Will look different on other systems.

Screenshot of what looks like abstract art. The word "hello" is in thin, almost calligraphic letters at the top. Below it are three circles, spread out horizontally, in the colors black, blue and then red with white fill.
you are viewing a single comment's thread
view the rest of the comments
[–] [S] 22 points 3 days ago (1 child)

By the way, I did not procrastinate posting this since July 25th. The file name does not say 2026-07-25. That did not happen. Nuh-uh.

🫠

  • source
  • hideshow 1 child comment