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.
Related
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.
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>
HOW can i add alt text for the following generated SVG ? I have only access to the html. the flowing SVG is in div. This is reading the numbers generated by Js function.
<svg class="barcode" role="img" aria-labelledby="title desc" jsbarcode-format="code39" jsbarcode-value="" jsbarcode-textmargin="0" jsbarcode-width="1" width="116px" height="140px" x="0px" y="0px" viewBox="0 0 116 140" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="116" height="140" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="1" height="100"></rect><rect x="4" y="0" width="1" height="100"></rect><rect x="6" y="0" width="3" height="100"></rect><rect x="10" y="0" width="3" height="100"></rect><rect x="14" y="0" width="1" height="100"></rect><rect x="16" y="0" width="1" height="100"></rect><rect x="18" y="0" width="1" height="100"></rect><rect x="20" y="0" width="3" height="100"></rect><rect x="24" y="0" width="1" height="100"></rect><rect x="28" y="0" width="3" height="100"></rect><rect x="32" y="0" width="3" height="100"></rect><rect x="38" y="0" width="1" height="100"></rect><rect x="40" y="0" width="1" height="100"></rect><rect x="42" y="0" width="1" height="100"></rect><rect x="44" y="0" width="3" height="100"></rect><rect x="48" y="0" width="1" height="100"></rect><rect x="50" y="0" width="3" height="100"></rect><rect x="54" y="0" width="1" height="100"></rect><rect x="56" y="0" width="1" height="100"></rect><rect x="60" y="0" width="3" height="100"></rect><rect x="64" y="0" width="1" height="100"></rect><rect x="66" y="0" width="3" height="100"></rect><rect x="70" y="0" width="1" height="100"></rect><rect x="72" y="0" width="1" height="100"></rect><rect x="76" y="0" width="3" height="100"></rect><rect x="80" y="0" width="1" height="100"></rect><rect x="84" y="0" width="1" height="100"></rect><rect x="86" y="0" width="3" height="100"></rect><rect x="90" y="0" width="3" height="100"></rect><rect x="94" y="0" width="1" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="48" y="120">NULL</text></g></svg>
If you don't have any ability to change the <svg> element itself, the easiest approach is to wrap it in a DIV with the ARIA img role, and use aria-label to provide the text alternative:
<div class="svg-wrapper" role="img" aria-label="A cowboy riding a triceratops">
<svg role="img" aria-labelledby="title desc" ... >
<rect x="0" y="0" width="116" height="140" ... ></rect>
<!-- more SVG elements -->
</svg>
</div>
Semantically, <div role="img" aria-label="foo"> is equivalent to <img src="foo.png" alt="foo">. You can find an example at IMG Tag & ARIA role="img" attribute/value.
Note that the ARIA img role is defined as having "children presentational", which means the browser should not pass the content nested inside the DIV to assistive technology. So the fact that the nested SVG has it's own image role and a broken aria-labelledby attribute shouldn't matter.
If you can control the content of the <svg> element, then this pattern will work:
<div class="svg-wrapper">
<svg role="img" aria-labelledby="unique-id-123" ... >
<title id="unique-id-123">A cowboy riding a triceratops</title>
<rect x="0" y="0" width="116" height="140" ... ></rect>
<!-- more SVG elements -->
</svg>
</div>
Be careful to give the <title> element a unique ID attribute.
Your SVG has an aria-labelledby="title desc" attribute, but there isn't any element with id="title" or id="desc" in the SVG code.
This means that you must define two elements with id="title" and id="desc" in order for your SVG to be accessible.
For instance:
<h2 id="title">My SVG title</h2>
<div id="desc">This is an SVG description</div>
<!-- insert your original svg code after -->
You can only set a role="img" and aria-label="something" to your <svg>.
More info here.
I have rectangles / paths as rectangles with a glow effect. That works well as long as I do not mask the inner part (i.e. hiding either the filling or the glowing inside of the rectangles). Masking part of the objects produces some ugly effect of the previously smooth glow.
So, applying the mask seems to render the previous "image" somehow. Is there a way to avoid this? If not, are there alternatives?
<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<mask id="Mask1">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
<mask id="Mask2">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" fill="#00e4ff"/>
<rect transform="translate(60,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)"/>
<rect transform="translate(120,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
<path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" fill="none"/>
<path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>
<path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
</g>
</svg>
Just make the masks bigger.
You'd also be better off making the filter smaller. The huge filter size is why your SVG is very slow to render.
<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<mask id="Mask1" x="-40%" y="-40%" width="180%" height="180%">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
<mask id="Mask2" x="-40%" y="-40%" width="180%" height="180%">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" fill="#00e4ff"/>
<rect transform="translate(60,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)"/>
<rect transform="translate(120,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
<path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" fill="none"/>
<path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>
<path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
</g>
</svg>
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>