<rect id="tut" x="0.5" y="0.5" width="24" height="24" rx="8" />
<rect id="tam" x="6.5" y="6.5" width="12" height="12" rx="0.5" />#tut {
stroke: red;
stroke-width: 4;
width: 24;
height: 24;
}
#tam {
stroke: #0cc;
stroke-width: 2;
width: 12;
height: 12;
}<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="699px">
<pattern id="pattern"
width="100%" height="100%">
<image xlink:href="http://wallpapers-image.ru/1280x720/flowers/wallpapers-1280x720/zastavki-khrizantema-cvety-1280x720.jpg" width="100%" />
</pattern>
<path fill-rule="evenodd" fill="url(#pattern)"
d="M 0 200
Q 300 50 600 200
Q 900 350 1200 200
L 1200 50 L 0 50 Z"/>
</svg><svg id="seg" viewBox="0 0 400 400" style="background: #acc;">
<defs>
<g id="circle"><circle r="50%" cx="0%" cy="0%"/></g>
</defs>
<style>
#mal {font: italic 12px sans-serif;fill: #000;}
#seg {border-radius:30%;transform: rotate(0grad);} /* здесь - вращать треугл вместе с содержимым*/
#circle {
fill: none;
stroke: #f82;
stroke-width: 100%;
stroke-dasharray: 29% 360%;
} /* Здесь можно сузить бёдра треугла */
</style>
<symbol id="txt" x="0" y="0" viewBox="0 0 200 200" width="100" height="100" style="background-color: #c6c;">
<text id="mal" x="0" y="42%">Текст по центру </text>
<text id="mal" x="0" y="50%">и при этом не заходит за</text>
<text id="mal" x="0" y="58%">границы фигуры </text>
</symbol>
<use xlink:href="#circle" x="7.1%" y="0%" width="20" height="20" transform="rotate(73, 110, 110)"></use>
<use xlink:href="#txt" x="5%" y="0%" width="400" height="400" transform="rotate(-90, 200, 200)"></use>
</svg>
<!-- -->body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;
background-attachment: fixed;
}<svg version="1.1" viewBox="0 0 200 200" xml:space="preserve" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<svg id="trian" viewBox="0 0 200 200" >
<pattern id="img_test" width="200" height="200" patternUnits="userSpaceOnUse">
<image x=-100 y=0 width="400" xlink:href="https://image.ibb.co/mtOsjo/test_1.png" />
</pattern>
<polygon fill="url(#img_test)" points="0,200 100,0 200,200"/>
</svg>
<rect id="улёт" x="5" y="180" width="40" height="20" fill="#c52" />
<rect id="влёт" x="45" y="180" width="40" height="20" fill="#5c2" />
<!--<use xlink:href="#trian" x="0" y="0" width="200" height="200"></use>-->
<animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
from="0 0 200 200" to="-500 -500 2000 2000" dur="0.8s"
begin="улёт.click" fill="freeze" />
<animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
from="-500 -500 2000 2000" to="0 0 200 200" dur="0.8s"
begin="влёт.click" fill="freeze" />
</svg>