Why my SVG calling doesn't work? - css

Question

I'm studying SVG files (beginning) but I can't make my SVG appear when I set <defs> tag!
I mean.. If I call the SVG directly it works properly.
Like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<g>
<rect class="bosta1" y="55.406" fill="#E8CF1E" stroke="#000000" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="bosta2" x="62.162" fill="#E42326" stroke="#000000" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</svg>
Fiddle: https://jsfiddle.net/sz0bkbdm/
But if I try to use refs I can't make the rects visible.
Like this:
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<defs>
<g>
<rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg>
<use xlink:href="#mySvg"></use>
</svg>
Fiddle: https://jsfiddle.net/g1hdLy82/

Answer 1

You problem is here please follow this code
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<g>
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg >
<use xlink:href="#ret1"></use>
<use xlink:href="#ret2"></use>
</svg>
or
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="rec1">
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg >
<use xlink:href="#rec1"></use>
</svg>

Answer 2

I guess you are exchanging <refs> with <defs>, since i have never heard of a <refs> tag before.
UPDATE
remove the wrong refs/defs, than it works!
fiddle
UPDATE #2
Well ok, than like so:
<svg>
<defs>
<g id="toshow">
<rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
<svg>
<use xlink:href="#toshow"></use>
</svg>
FIDDLE
UDDATE #3
Probably helpful.

Answer 3

You can try this:
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<defs>
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</defs>
</svg>
MY CONTENT
<svg>
<use xlink:href="#ret1"></use>
<use xlink:href="#ret2"></use>
</svg>
and the css is:
#mySvg { width:100px; height:auto; }
#ret1 { fill:green; stroke:red; }
#ret2 { fill:blue; stroke:white; }