Generating number circles in SVG - how to centre the text

Question

I have written a script to generate SVG files showing 1 numbers in circles. This is for use in a drawing app as clipart.

Here is the script:

if [ ! -d circleNums ]
then
   mkdir circleNums
fi
rm circleNums/index.html
# Add this line for center guide <line x1="63" y1="0" x2="63" y2="128" style="stroke:rgb(255,127,64);stroke-width:2"/>
for I in {1..9}
do
   cat <<EOF > circleNums/$I.svg
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' >
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/>
<text x="35" y="95" font-family="sans-serif" font-size="90px" fill="white">$I</text>
</svg>
EOF
   echo "<img src=\"$I.svg\" >" >> circleNums/index.html
done
for I in {10..99}
do
   cat <<EOF > circleNums/$I.svg
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' >
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/>
<text x="15" y="95" font-family="sans-serif" font-size="90px" fill="white">$I</text>
</svg>
EOF
   echo "<img src=\"$I.svg\" >" >> circleNums/index.html
done
ls circleNums

Example of output, 1.svg:

<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' >
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/>
<text x="35" y="95" font-family="sans-serif" font-size="90px" fill="white">1</text>
</svg>

99.svg:

<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' >
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/>
<text x="15" y="95" font-family="sans-serif" font-size="90px" fill="white">99</text>
</svg>

As you can see the centring is guess work and experimentation based. How can I get the text to centre about a particular point, in this case x=64, y=64?

Answer 1

I made small changes to your script:

1. I merged two loops into one
2. I replaced x and y to 50% like you'd expect from a centered text
3. I used text-anchor="middle" property to make the text render centered (relative to image center)
4. I used dy=".35em" to correct vertical shift - it looks good enough to me. Other fonts might need other values.

---

if [ ! -d circleNums ]
then
   mkdir circleNums
fi
rm circleNums/index.html
# Add this line for center guide <line x1="63" y1="0" x2="63" y2="128" style="stroke:rgb(255,127,64);stroke-width:2"/>
for I in {1..99}
do
   cat <<EOF > circleNums/$I.svg
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' >
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/>
<text text-anchor="middle" x="50%" y="50%" dy=".35em" font-family="sans-serif" font-size="90px" fill="white">$I</text>
</svg>
EOF
   echo "<img src=\"$I.svg\" >" >> circleNums/index.html
done
ls circleNums

Result: