<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="40" y="40" font-size="30" fill="black" visibility="hidden">11111 me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>
<svg>
	
	<rect id="s"  x="10" y="10" width="200" height="200" fill="#acc" /> 			
	<text id="thepopup" x="40" y="40" font-size="30" fill="black" visibility="hidden">ssss me
	<set attributeName="visibility" from="hidden" to="visible" begin="s.mouseover" end="s.mouseout"/>
	</text>
</svg>





<svg width="405" height="105">
    <defs>
        <linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stop-color="#BBC42A" />
            <stop offset="100%" stop-color="#ED6E46" />
        </linearGradient>
    </defs>
    <rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>


<svg width="850px" height="300px">
    <defs>
        <radialGradient id="Gradient2" cy="60%" fx="95%" fy="70%" r="2">
            <stop offset="0%" stop-color="#ED6E46" />
            <stop offset="10%" stop-color="#b4c63b" />
            <stop offset="20%" stop-color="#ef5b2b" />
            <stop offset="30%" stop-color="#503969" />
            <stop offset="40%" stop-color="#ab6294" />
            <stop offset="50%" stop-color="#1cb98f" /> 
            <stop offset="60%" stop-color="#48afc1" />
            <stop offset="70%" stop-color="#b4c63b" />
            <stop offset="80%" stop-color="#ef5b2b" />
            <stop offset="90%" stop-color="#503969" />
            <stop offset="100%" stop-color="#ab6294" />
        </radialGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>

<svg width="220" height="220">
    <defs>
        <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill= "#BBC42A" />
        </pattern>
    </defs>
    <rect x="10" y="10" width="200" height="200"
                stroke="#333333" stroke-width="2px" fill="url(#basicPattern)" /> 
</svg>