Svg: simple example

<!DOCTYPE html>
<html>
 <head>
 <title>SVG Stuff</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
 http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
 </script>
 </head>
 <body>
 <svg height="500" width="500">
 <circle cx="250" cy="250" r="250" fill="hotpink"/>
 </svg>
 </body>
</html>
<!-- https://validator.w3.org/nu/#textarea -->
<!-- Location is [file:///e:/sandbox/javascript/testsvg.html] -->

 

That was how to do it all inline. To decouple the svg from the parent html, you need something like this:

Now, until I included the namespace xmlns=”http://www.w3.org/2000/svg&#8221;, all  got was a dumb broken. With the namespace in place, you get this:

TestSvg05

Advertisements