SVG: draw cat

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">     
<title>svg draw cat</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>  
  <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel='stylesheet' href='bootstrap/3.4.1/css/bootstrap.min.css'>
<style type="text/css">
     
    svg .catsvg{
        width: 140px;
        height: 170px;
     
         
    }
     
    #geovindu{
        background-image: url("cat.svg");
        background-size: 140px 170px;
        height: 170px;
    }   
</style>
</head>
 
<body>
<div class="container">
<div class="row"> 
<svg id="catsvg" class="catsvg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
     
<desc>Stick Figure of a Cat</desc>
 
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62"
   style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />
</svg>    
    </div>
    <div class="row">
    <img src="cat.svg" title="geovindu" alt="Geovin Du"/>
    </div>
    <div class="row">
        <div id="geovindu"></div>
    </div>    
    <div class="row">
        <object data="cat.svg" type="image/svg+xml" title="cat object" alt="">
        <p>no svt support!</p>
        <img src="cat.svg" title="geovindu draw cat svg"/>
        </object>
    </div>
    </div>
</body>
</html>

cat.svg:

<!--Scalable Vector Graphic-->
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     width="140px" 
     height="170px" 
     viewBox="0 0 140px 170px">
<title>Cat</title>
     
<desc>Stick Figure of a Cat</desc>
 
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62"
   style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />    
     
</svg>

from:

http://oreillymedia.github.io/svg-essentials-examples/
https://github.com/hyperpc/SVGEssentials
https://sarahdrasnerdesign.com/
https://css-tricks.com/learn-design-for-developers-and-svg-animation-with-sarah-drasner-%e2%9c%a8%f0%9f%92%96/
https://www.oreilly.com/catalog/errata.csp?isbn=0636920032335
https://www.oreilly.com/library/view/svg-animations/9781491939697/
https://www.oreilly.com/library/view/svg-essentials-2nd/9781491945308/