conCATenation

cat.svg

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 225 175">
    <defs>
        <g id="circle-to-box">
            <path d="M0,0 v45 q0,20 20,20 h20" fill="none" stroke="#777" stroke-width="2" />
        </g>
        <g id="whiskers">
            <path d="M0,-4 c-5,0 -10,0 -20,-10" fill="none" stroke="#777" stroke-width="2" />
            <path d="M0,4 c-5,0 -10,0 -20,10" fill="none" stroke="#777" stroke-width="2" />
        </g>
        <g id="ear">
            <path d="M-22,5 c10,-5 15,-5 25,10 l15,-10 c-5,-10 -30,-25 -40,0 z" fill="#ff9999" />
        </g>
    </defs>

    <rect width="100%" height="100%" fill="#65bcd4" />

    <use xlink:href="#ear" transform="translate(60 70)" />
    <use xlink:href="#ear" transform="translate(140 70) scale(-1.0 1.0)" />
    <path id="tail" d="M100,118 c10,15 -10,15 0,30 s20,-10 40,0 s20,-10 40,0" fill="none" stroke="#777" stroke-width="2" />
    <rect x="60" y="70" width="80" height="50" fill="#d5d5d5" />
    <use xlink:href="#circle-to-box" transform="translate(30 30)" />
    <use xlink:href="#circle-to-box" transform="translate(170 30) scale(-1.0 1.0)" />
    <use xlink:href="#whiskers" transform="translate(70 95)" />
    <use xlink:href="#whiskers" transform="translate(130 95) scale(-1.0 1.0)" />
    <circle id="circle-x" cx="30" cy="30" r="20" fill="#d5d5d5" />
    <circle id="circle-y" cx="170" cy="30" r="20" fill="#d5d5d5" />
    <circle id="circle-z" cx="190" cy="145" r="20" fill="#d5d5d5" />

    <text x="100" y="95" text-anchor="middle" alignment-baseline="middle" font-size="25"
          font-family="arial, sans-serif" fill="#777">cat</text>
    <text x="30" y="30" text-anchor="middle" alignment-baseline="middle" font-size="25"
          font-family="arial, sans-serif" fill="#777">x</text>
    <text x="170" y="30" text-anchor="middle" alignment-baseline="middle" font-size="25"
          font-family="arial, sans-serif" fill="#777">y</text>
    <text x="190" y="145" text-anchor="middle" alignment-baseline="middle" font-size="25"
          font-family="arial, sans-serif" fill="#777">z</text>

</svg>