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>
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>
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>
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>
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.