<!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/
