Text offset by 1 or 2 from its x in SVG - svg

I have text in my SVGs that is offset by 1 or sometimes 2 from its assigned x. The text is set at x="6" however, the text is at 7 or even 8.
Here is an SVG with all the letters of the alphabet and numerals 0 through 9 to show the offset. I just can not figure out why there is an offset. It gets worse when the text is in italics for some characters. Should I just subtract 1 from x to get the text where I want it? Is this normal behavior for the arial font in SVG?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
viewBox="0 0 111 1088"
width="111"
height="1088"
id="Alphabet_boxes"
>
<title id="Alphabet_boxes_title">Alphabet boxes</title>
<metadata id="Alphabet_boxes_metadata">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Alphabet boxes</dc:title>
<dc:date>2020-05-19</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Lady Aleena</dc:title>
</cc:Agent>
</dc:creator>
<dc:language>en-US</dc:language>
</cc:Work>
</rdf:RDF>
</metadata>
<style id="Crossover_styles">
path { fill:none; stroke: #666666; stroke-width: 2; stroke-opacity: 1; stroke-linejoin: round; stroke-linecap: round; }
rect { paint-order: stroke; stroke: #666666; stroke-width: 4; stroke-opacity: 1; stroke-linejoin: round; fill-opacity: 1; fill: #ffffff; }
rect.inner { stroke: none; fill: #ccc; }
text { fill: #000000; font-family: arial, roboto, sans-serif; font-size: 16px; text-anchor: start; dominant-baseline: middle; }
g.normal_text { font-style: normal; }
g.italic_text { font-style: italic; }
g.bold_text { font-weight: bold; }
tspan { font-size: 90%; font-style: normal; }
</style>
<g id="Alphabet_boxes_chart" class="graph" transform="translate(5,5)">
<title id="Alphabet_boxes_chart_title">Alphabet boxes</title>
<g id="normal" class="normal_text">
<g id="normal_A" transform="translate(0,0)">
<title id="normal_A_title">A</title>
<rect id="normal_A_box_1" x="0" y="0" width="24" height="28" />
<rect id="normal_A_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="normal_A_text" x="6" y="14">A</text>
</g>
<g id="normal_B" transform="translate(0,30)">
<title id="normal_B_title">B</title>
<rect id="normal_B_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_B_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_B_text" x="6" y="14">B</text>
</g>
<g id="normal_C" transform="translate(0,60)">
<title id="normal_C_title">C</title>
<rect id="normal_C_box_1" x="0" y="0" width="23" height="28" />
<rect id="normal_C_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="normal_C_text" x="6" y="14">C</text>
</g>
<g id="normal_D" transform="translate(0,90)">
<title id="normal_D_title">D</title>
<rect id="normal_D_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_D_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_D_text" x="6" y="14">D</text>
</g>
<g id="normal_E" transform="translate(0,120)">
<title id="normal_E_title">E</title>
<rect id="normal_E_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_E_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_E_text" x="6" y="14">E</text>
</g>
<g id="normal_F" transform="translate(0,150)">
<title id="normal_F_title">F</title>
<rect id="normal_F_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_F_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_F_text" x="6" y="14">F</text>
</g>
<g id="normal_G" transform="translate(0,180)">
<title id="normal_G_title">G</title>
<rect id="normal_G_box_1" x="0" y="0" width="24" height="28" />
<rect id="normal_G_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="normal_G_text" x="6" y="14">G</text>
</g>
<g id="normal_H" transform="translate(0,210)">
<title id="normal_H_title">H</title>
<rect id="normal_H_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_H_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_H_text" x="6" y="14">H</text>
</g>
<g id="normal_I" transform="translate(0,240)">
<title id="normal_I_title">I</title>
<rect id="normal_I_box_1" x="0" y="0" width="15" height="28" />
<rect id="normal_I_box_2" x="4" y="4" width="7" height="20" class="inner" />
<text id="normal_I_text" x="6" y="14">I</text>
</g>
<g id="normal_J" transform="translate(0,270)">
<title id="normal_J_title">J</title>
<rect id="normal_J_box_1" x="0" y="0" width="19" height="28" />
<rect id="normal_J_box_2" x="4" y="4" width="11" height="20" class="inner" />
<text id="normal_J_text" x="6" y="14">J</text>
</g>
<g id="normal_K" transform="translate(0,300)">
<title id="normal_K_title">K</title>
<rect id="normal_K_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_K_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_K_text" x="6" y="14">K</text>
</g>
<g id="normal_L" transform="translate(0,330)">
<title id="normal_L_title">L</title>
<rect id="normal_L_box_1" x="0" y="0" width="20" height="28" />
<rect id="normal_L_box_2" x="4" y="4" width="12" height="20" class="inner" />
<text id="normal_L_text" x="6" y="14">L</text>
</g>
<g id="normal_M" transform="translate(0,360)">
<title id="normal_M_title">M</title>
<rect id="normal_M_box_1" x="0" y="0" width="24" height="28" />
<rect id="normal_M_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="normal_M_text" x="6" y="14">M</text>
</g>
<g id="normal_N" transform="translate(0,390)">
<title id="normal_N_title">N</title>
<rect id="normal_N_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_N_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_N_text" x="6" y="14">N</text>
</g>
<g id="normal_O" transform="translate(0,420)">
<title id="normal_O_title">O</title>
<rect id="normal_O_box_1" x="0" y="0" width="24" height="28" />
<rect id="normal_O_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="normal_O_text" x="6" y="14">O</text>
</g>
<g id="normal_P" transform="translate(0,450)">
<title id="normal_P_title">P</title>
<rect id="normal_P_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_P_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_P_text" x="6" y="14">P</text>
</g>
<g id="normal_Q" transform="translate(0,480)">
<title id="normal_Q_title">Q</title>
<rect id="normal_Q_box_1" x="0" y="0" width="24" height="28" />
<rect id="normal_Q_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="normal_Q_text" x="6" y="14">Q</text>
</g>
<g id="normal_R" transform="translate(0,510)">
<title id="normal_R_title">R</title>
<rect id="normal_R_box_1" x="0" y="0" width="23" height="28" />
<rect id="normal_R_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="normal_R_text" x="6" y="14">R</text>
</g>
<g id="normal_S" transform="translate(0,540)">
<title id="normal_S_title">S</title>
<rect id="normal_S_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_S_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_S_text" x="6" y="14">S</text>
</g>
<g id="normal_T" transform="translate(0,570)">
<title id="normal_T_title">T</title>
<rect id="normal_T_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_T_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_T_text" x="6" y="14">T</text>
</g>
<g id="normal_U" transform="translate(0,600)">
<title id="normal_U_title">U</title>
<rect id="normal_U_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_U_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_U_text" x="6" y="14">U</text>
</g>
<g id="normal_V" transform="translate(0,630)">
<title id="normal_V_title">V</title>
<rect id="normal_V_box_1" x="0" y="0" width="23" height="28" />
<rect id="normal_V_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="normal_V_text" x="6" y="14">V</text>
</g>
<g id="normal_W" transform="translate(0,660)">
<title id="normal_W_title">W</title>
<rect id="normal_W_box_1" x="0" y="0" width="27" height="28" />
<rect id="normal_W_box_2" x="4" y="4" width="19" height="20" class="inner" />
<text id="normal_W_text" x="6" y="14">W</text>
</g>
<g id="normal_X" transform="translate(0,690)">
<title id="normal_X_title">X</title>
<rect id="normal_X_box_1" x="0" y="0" width="23" height="28" />
<rect id="normal_X_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="normal_X_text" x="6" y="14">X</text>
</g>
<g id="normal_Y" transform="translate(0,720)">
<title id="normal_Y_title">Y</title>
<rect id="normal_Y_box_1" x="0" y="0" width="23" height="28" />
<rect id="normal_Y_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="normal_Y_text" x="6" y="14">Y</text>
</g>
<g id="normal_Z" transform="translate(0,750)">
<title id="normal_Z_title">Z</title>
<rect id="normal_Z_box_1" x="0" y="0" width="22" height="28" />
<rect id="normal_Z_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="normal_Z_text" x="6" y="14">Z</text>
</g>
<g id="normal_zero" transform="translate(0,780)">
<title id="normal_zero_title">0</title>
<rect id="normal_zero_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_zero_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_zero_text" x="6" y="14">0</text>
</g>
<g id="normal_one" transform="translate(0,810)">
<title id="normal_one_title">1</title>
<rect id="normal_one_box_1" x="0" y="0" width="17" height="28" />
<rect id="normal_one_box_2" x="4" y="4" width="9" height="20" class="inner" />
<text id="normal_one_text" x="6" y="14">1</text>
</g>
<g id="normal_two" transform="translate(0,840)">
<title id="normal_two_title">2</title>
<rect id="normal_two_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_two_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_two_text" x="6" y="14">2</text>
</g>
<g id="normal_three" transform="translate(0,870)">
<title id="normal_three_title">3</title>
<rect id="normal_three_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_three_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_three_text" x="6" y="14">3</text>
</g>
<g id="normal_four" transform="translate(0,900)">
<title id="normal_four_title">4</title>
<rect id="normal_four_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_four_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_four_text" x="6" y="14">4</text>
</g>
<g id="normal_five" transform="translate(0,930)">
<title id="normal_five_title">5</title>
<rect id="normal_five_box_2" x="0" y="0" width="21" height="28" />
<rect id="normal_five_box_1" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_five_text" x="6" y="14">5</text>
</g>
<g id="normal_six" transform="translate(0,960)">
<title id="normal_six_title">6</title>
<rect id="normal_six_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_six_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_six_text" x="6" y="14">6</text>
</g>
<g id="normal_seven" transform="translate(0,990)">
<title id="normal_seven_title">7</title>
<rect id="normal_seven_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_seven_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_seven_text" x="6" y="14">7</text>
</g>
<g id="normal_eight" transform="translate(0,1020)">
<title id="normal_eight_title">8</title>
<rect id="normal_eight_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_eight_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_eight_text" x="6" y="14">8</text>
</g>
<g id="normal_nine" transform="translate(0,1050)">
<title id="normal_nine_title">9</title>
<rect id="normal_nine_box_1" x="0" y="0" width="21" height="28" />
<rect id="normal_nine_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="normal_nine_text" x="6" y="14">9</text>
</g>
</g>
<g id="italic" transform="translate(37)" class="italic_text">
<g id="italic_A" transform="translate(0,0)">
<title id="italic_A_title">A</title>
<rect id="italic_A_box_1" x="0" y="0" width="23" height="28" />
<rect id="italic_A_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="italic_A_text" x="6" y="14">A</text>
</g>
<g id="italic_B" transform="translate(0,30)">
<title id="italic_B_title">B</title>
<rect id="italic_B_box_1" x="0" y="0" width="23" height="28" />
<rect id="italic_B_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="italic_B_text" x="6" y="14">B</text>
</g>
<g id="italic_C" transform="translate(0,60)">
<title id="italic_C_title">C</title>
<rect id="italic_C_box_1" x="0" y="0" width="23" height="28" />
<rect id="italic_C_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="italic_C_text" x="6" y="14">C</text>
</g>
<g id="italic_D" transform="translate(0,90)">
<title id="italic_D_title">D</title>
<rect id="italic_D_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_D_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_D_text" x="6" y="14">D</text>
</g>
<g id="italic_E" transform="translate(0,120)">
<title id="italic_E_title">E</title>
<rect id="italic_E_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_E_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_E_text" x="6" y="14">E</text>
</g>
<g id="italic_F" transform="translate(0,150)">
<title id="italic_F_title">F</title>
<rect id="italic_F_box_1" x="0" y="0" width="23" height="28" />
<rect id="italic_F_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="italic_F_text" x="6" y="14">F</text>
</g>
<g id="italic_G" transform="translate(0,180)">
<title id="italic_G_title">G</title>
<rect id="italic_G_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_G_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_G_text" x="6" y="14">G</text>
</g>
<g id="italic_H" transform="translate(0,210)">
<title id="italic_H_title">H</title>
<rect id="italic_H_box_1" x="0" y="0" width="25" height="28" />
<rect id="italic_H_box_2" x="4" y="4" width="17" height="20" class="inner" />
<text id="italic_H_text" x="6" y="14">H</text>
</g>
<g id="italic_I" transform="translate(0,240)">
<title id="italic_I_title">I</title>
<rect id="italic_I_box_1" x="0" y="0" width="17" height="28" />
<rect id="italic_I_box_2" x="4" y="4" width="9" height="20" class="inner" />
<text id="italic_I_text" x="6" y="14">I</text>
</g>
<g id="italic_J" transform="translate(0,270)">
<title id="italic_J_title">J</title>
<rect id="italic_J_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_J_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_J_text" x="6" y="14">J</text>
</g>
<g id="italic_K" transform="translate(0,300)">
<title id="italic_K_title">K</title>
<rect id="italic_K_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_K_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_K_text" x="6" y="14">K</text>
</g>
<g id="italic_L" transform="translate(0,330)">
<title id="italic_L_title">L</title>
<rect id="italic_L_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_L_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_L_text" x="6" y="14">L</text>
</g>
<g id="italic_M" transform="translate(0,360)">
<title id="italic_M_title">M</title>
<rect id="italic_M_box_1" x="0" y="0" width="26" height="28" />
<rect id="italic_M_box_2" x="4" y="4" width="18" height="20" class="inner" />
<text id="italic_M_text" x="6" y="14">M</text>
</g>
<g id="italic_N" transform="translate(0,390)">
<title id="italic_N_title">N</title>
<rect id="italic_N_box_1" x="0" y="0" width="25" height="28" />
<rect id="italic_N_box_2" x="4" y="4" width="17" height="20" class="inner" />
<text id="italic_N_text" x="6" y="14">N</text>
</g>
<g id="italic_O" transform="translate(0,420)">
<title id="italic_O_title">O</title>
<rect id="italic_O_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_O_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_O_text" x="6" y="14">O</text>
</g>
<g id="italic_P" transform="translate(0,450)">
<title id="italic_P_title">P</title>
<rect id="italic_P_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_P_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_P_text" x="6" y="14">P</text>
</g>
<g id="italic_Q" transform="translate(0,480)">
<title id="italic_Q_title">Q</title>
<rect id="italic_Q_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_Q_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_Q_text" x="6" y="14">Q</text>
</g>
<g id="italic_R" transform="translate(0,510)">
<title id="italic_R_title">R</title>
<rect id="italic_R_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_R_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_R_text" x="6" y="14">R</text>
</g>
<g id="italic_S" transform="translate(0,540)">
<title id="italic_S_title">S</title>
<rect id="italic_S_box_1" x="0" y="0" width="22" height="28" />
<rect id="italic_S_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="italic_S_text" x="6" y="14">S</text>
</g>
<g id="italic_T" transform="translate(0,570)">
<title id="italic_T_title">T</title>
<rect id="italic_T_box_1" x="0" y="0" width="22" height="28" />
<rect id="italic_T_box_2" x="4" y="4" width="14" height="20" class="inner" />
<text id="italic_T_text" x="6" y="14">T</text>
</g>
<g id="italic_U" transform="translate(0,600)">
<title id="italic_U_title">U</title>
<rect id="italic_U_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_U_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_U_text" x="6" y="14">U</text>
</g>
<g id="italic_V" transform="translate(0,630)">
<title id="italic_V_title">V</title>
<rect id="italic_V_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_V_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_V_text" x="6" y="14">V</text>
</g>
<g id="italic_W" transform="translate(0,660)">
<title id="italic_W_title">W</title>
<rect id="italic_W_box_1" x="0" y="0" width="27" height="28" />
<rect id="italic_W_box_2" x="4" y="4" width="19" height="20" class="inner" />
<text id="italic_W_text" x="6" y="14">W</text>
</g>
<g id="italic_X" transform="translate(0,690)">
<title id="italic_X_title">X</title>
<rect id="italic_X_box_1" x="0" y="0" width="26" height="28" />
<rect id="italic_X_box_2" x="4" y="4" width="18" height="20" class="inner" />
<text id="italic_X_text" x="6" y="14">X</text>
</g>
<g id="italic_Y" transform="translate(0,720)">
<title id="italic_Y_title">Y</title>
<rect id="italic_Y_box_1" x="0" y="0" width="24" height="28" />
<rect id="italic_Y_box_2" x="4" y="4" width="16" height="20" class="inner" />
<text id="italic_Y_text" x="6" y="14">Y</text>
</g>
<g id="italic_Z" transform="translate(0,750)">
<title id="italic_Z_title">Z</title>
<rect id="italic_Z_box_1" x="0" y="0" width="23" height="28" />
<rect id="italic_Z_box_2" x="4" y="4" width="15" height="20" class="inner" />
<text id="italic_Z_text" x="6" y="14">Z</text>
</g>
<g id="italic_zero" transform="translate(0,780)">
<title id="italic_zero_title">0</title>
<rect id="italic_zero_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_zero_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_zero_text" x="6" y="14">0</text>
</g>
<g id="italic_one" transform="translate(0,810)">
<title id="italic_one_title">1</title>
<rect id="italic_one_box_1" x="0" y="0" width="18" height="28" />
<rect id="italic_one_box_2" x="4" y="4" width="10" height="20" class="inner" />
<text id="italic_one_text" x="6" y="14">1</text>
</g>
<g id="italic_two" transform="translate(0,840)">
<title id="italic_two_title">2</title>
<rect id="italic_two_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_two_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_two_text" x="6" y="14">2</text>
</g>
<g id="italic_three" transform="translate(0,870)">
<title id="italic_three_title">3</title>
<rect id="italic_three_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_three_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_three_text" x="6" y="14">3</text>
</g>
<g id="italic_four" transform="translate(0,900)">
<title id="italic_four_title">4</title>
<rect id="italic_four_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_four_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_four_text" x="6" y="14">4</text>
</g>
<g id="italic_five" transform="translate(0,930)">
<title id="italic_five_title">5</title>
<rect id="italic_five_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_five_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_five_text" x="6" y="14">5</text>
</g>
<g id="italic_six" transform="translate(0,960)">
<title id="italic_six_title">6</title>
<rect id="italic_six_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_six_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_six_text" x="6" y="14">6</text>
</g>
<g id="italic_seven" transform="translate(0,990)">
<title id="italic_seven_title">7</title>
<rect id="italic_seven_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_seven_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_seven_text" x="6" y="14">7</text>
</g>
<g id="italic_eight" transform="translate(0,1020)">
<title id="italic_eight_title">8</title>
<rect id="italic_eight_box_1" x="0" y="0" width="21" height="28" />
<rect id="italic_eight_box_2" x="4" y="4" width="13" height="20" class="inner" />
<text id="italic_eight_text" x="6" y="14">8</text>
</g>
<g id="italic_nine" transform="translate(0,1050)">
<title id="italic_nine_title">9</title>
<rect id="italic_nine_box_1" x="0" y="0" width="20" height="28" />
<rect id="italic_nine_box_2" x="4" y="4" width="12" height="20" class="inner" />
<text id="italic_nine_text" x="6" y="14">9</text>
</g>
</g>
</g>
</svg>
Change the attributes in the svg tag and add the sodipodi:namedview lines of the SVG to the following if you want to open it in Inkscape. The grid and guidelines are added so you can see the offset.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
sodipodi:docname="Alphabet_boxes_ink.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
viewBox="0 0 111 1088"
width="111"
height="1088"
id="Alphabet_boxes"
>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="979"
id="namedview5209"
showgrid="true"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="1"
inkscape:cx="52"
inkscape:cy="1.1e+03"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Alphabet_boxes"
>
<inkscape:grid type="xygrid" id="grid5213" />
<sodipodi:guide position="11,1088" orientation="1,0" id="guide5215" inkscape:locked="false" />
<sodipodi:guide position="48,1088" orientation="1,0" id="guide5217" inkscape:locked="false" />
<sodipodi:guide position="85,1088" orientation="1,0" id="guide5219" inkscape:locked="false" />
</sodipodi:namedview>

Related

Is it possible to center align <rect>'s inside a <g> for SVG?

Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.

SVG definition inheritance

Please look at eaExperiment. I want to make a definition which takes StartArrow definition and rotates it by 180 degrees.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="450" height="400" version="1.1">
<style type="text/css">
<![CDATA[
rect {fill:white; stroke: black; stroke-width: 1;}
text {fill: black; font-family: sans-serif; font-size: 10pt}
line {stroke:black; stroke-width:2}
]]>
</style>
<defs>
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
</marker>
<use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
</marker>
<svg id="Box">
<rect width="100" height="85" x="1" y="1" />
<text x="5" y="20">The box</text>
<svg x="10" y="25">
<rect width="70" height="50" x="1" y="1" />
<text x="5" y="20">Box</text>
<text x="5" y="40">Contents</text>
</svg>
</svg>
</defs>
<svg>
<svg x="10" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Data</text>
<text x="5" y="40">source</text>
</svg>
<svg x="150">
<use href="#Box" y="1" />
<use href="#Box" y="100" />
<use href="#Box" y="200" />
</svg>
<svg x="300" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Database</text>
<text x="5" y="40">server</text>
</svg>
<line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
<line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
<line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
<line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
<line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
<line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
</svg>
</svg>
I am definitely doing it wrong, but what is the right way?
You need separate <marker> elements, but their content can be reused with <use> elements. For example like this:
<defs>
<path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<use xlink:href="#arrow" />
</marker>
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<use xlink:href="#arrow" transform="rotate(180)" />
</marker>
</defs>
(While the use of the xlink namespace with href is deprecated and also from a practical perspective no longer needed in current browsers, I tend to still use it for the sake of other renderers, Inkscape for example.)

Changeing an SVG from 238 to 266 and now I'm stuck

This was originally 238, I want to change it to 266, and now I'm stuck.
I've done this before, but I forgot how to do it.
I know 7 goes into 266 38 times. See, I forgot how to do all this math, how you're supposed to calculate it.
I'm confused now.
It should all fit evenly I think, or does it not?
<svg width="266" height="266" viewBox="0 0 266 266">
<rect x="0" y="0" width="266" height="266" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Assuming the original looked like this:
<svg width="238" height="238" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Then all you have to do to scale it up to 266x266 is to update the width and height attributes.
<svg width="266" height="266" viewBox="0 0 238 238">
Because the SVG has a viewBox, the browser will scale the contents automatically for you.
<svg width="266" height="266" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>

How to embed an image with rounded corners in svg

I want to embed an image with rounded corners inside a svg-file. how can i aproach this? I googled about that problem, but couldnt find anything useful...
I'm grateful for any help or hints.
<!DOCTYPE html>
<html>
<body>
<svg width="640" height="800">
<rect x="280" y="0" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="260" y="90" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="200" y="150" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="180" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="360" y="150" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="340" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="120" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="100" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="280" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="260" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="440" y="300" ry="10" width="80" height="100"
style="fill:limegreen; stroke:black;" />
<rect x="420" y="390" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
</svg>
</body>
</html>
the greens are supposed to be different images. so how do i get the images to have rounded corners?
You can apply the same clipPath to multiple elements like this...
<!DOCTYPE html>
<html>
<body>
<svg width="640" height="800">
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<rect ry="0.1" width="1" height="1" fill="black" />
</clipPath>
<rect x="280" y="0" width="80" height="100"
style="fill:limegreen;" clip-path="url(#clip)" />
<rect x="260" y="90" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
<rect x="200" y="150" width="80" height="100"
style="fill:limegreen;" clip-path="url(#clip)" />
<rect x="180" y="240" ry="15" width="120" height="30"
style="fill:mintcream; stroke:black;" />
</svg>
</body>
</html>

How to place <rect>s side-by-side?

I want to place filled squares in SVG next to each other, but there are thin lines between them. How to eliminate these lines?
Example:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="3cm" height="3cm" viewBox="0 0 10 10">
<rect x="0" y="0" width="1" height="1" fill="black" />
<rect x="2" y="0" width="1" height="1" fill="black" />
<rect x="4" y="0" width="1" height="1" fill="black" />
<rect x="6" y="0" width="1" height="1" fill="black" />
<rect x="8" y="0" width="1" height="1" fill="black" />
<rect x="0" y="1" width="1" height="1" fill="black" />
<rect x="2" y="1" width="1" height="1" fill="black" />
<rect x="3" y="1" width="1" height="1" fill="black" />
<rect x="4" y="1" width="1" height="1" fill="black" />
<rect x="5" y="1" width="1" height="1" fill="black" />
<rect x="6" y="1" width="1" height="1" fill="black" />
<rect x="7" y="1" width="1" height="1" fill="black" />
<rect x="9" y="1" width="1" height="1" fill="black" />
<rect x="0" y="2" width="1" height="1" fill="black" />
<rect x="2" y="2" width="1" height="1" fill="black" />
<rect x="8" y="2" width="1" height="1" fill="black" />
<rect x="0" y="3" width="1" height="1" fill="black" />
<rect x="1" y="3" width="1" height="1" fill="black" />
<rect x="3" y="3" width="1" height="1" fill="black" />
<rect x="5" y="3" width="1" height="1" fill="black" />
<rect x="6" y="3" width="1" height="1" fill="black" />
<rect x="8" y="3" width="1" height="1" fill="black" />
<rect x="9" y="3" width="1" height="1" fill="black" />
<rect x="0" y="4" width="1" height="1" fill="black" />
<rect x="1" y="4" width="1" height="1" fill="black" />
<rect x="5" y="4" width="1" height="1" fill="black" />
<rect x="6" y="4" width="1" height="1" fill="black" />
<rect x="8" y="4" width="1" height="1" fill="black" />
<rect x="0" y="5" width="1" height="1" fill="black" />
<rect x="3" y="5" width="1" height="1" fill="black" />
<rect x="4" y="5" width="1" height="1" fill="black" />
<rect x="9" y="5" width="1" height="1" fill="black" />
<rect x="0" y="6" width="1" height="1" fill="black" />
<rect x="5" y="6" width="1" height="1" fill="black" />
<rect x="6" y="6" width="1" height="1" fill="black" />
<rect x="8" y="6" width="1" height="1" fill="black" />
<rect x="0" y="7" width="1" height="1" fill="black" />
<rect x="4" y="7" width="1" height="1" fill="black" />
<rect x="5" y="7" width="1" height="1" fill="black" />
<rect x="6" y="7" width="1" height="1" fill="black" />
<rect x="8" y="7" width="1" height="1" fill="black" />
<rect x="9" y="7" width="1" height="1" fill="black" />
<rect x="0" y="8" width="1" height="1" fill="black" />
<rect x="1" y="8" width="1" height="1" fill="black" />
<rect x="2" y="8" width="1" height="1" fill="black" />
<rect x="7" y="8" width="1" height="1" fill="black" />
<rect x="8" y="8" width="1" height="1" fill="black" />
<rect x="0" y="9" width="1" height="1" fill="black" />
<rect x="1" y="9" width="1" height="1" fill="black" />
<rect x="2" y="9" width="1" height="1" fill="black" />
<rect x="3" y="9" width="1" height="1" fill="black" />
<rect x="4" y="9" width="1" height="1" fill="black" />
<rect x="5" y="9" width="1" height="1" fill="black" />
<rect x="6" y="9" width="1" height="1" fill="black" />
<rect x="7" y="9" width="1" height="1" fill="black" />
<rect x="8" y="9" width="1" height="1" fill="black" />
<rect x="9" y="9" width="1" height="1" fill="black" />
</svg>
My reputation doesn't allow me to post images, but you can look closely at my avatar.
You're seeing antialiasing at work.
Add shape-rendering="crispEdges" to the root <svg> element (or alternatively to each rect) to get the display you want.

Resources