Inline svg in html - HTML CSS SVG

HTML CSS examples for SVG:Line

  1. HOME
  2. HTML CSS
  3. SVG
  4. Line

Description

Inline svg in html

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

@namespace svg "http://www.w3.org/2000/svg";
text { display: none; }
svg|text { display: inline; }


      </style> 
 </head> <!--from  ww w .  java 2s .c o  m-->
 <body> 
  <!--[if lte IE 8]>
    <script type="text/javascript">
      document.createElement("text");
    </script>
<![endif]--> 
  <svg> 
   <switch> 
    <g> 
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> 
     <text x="20" y="120">
       text test test test test
     </text> 
    </g> 
    <foreignobject> 
     <p>this is a test</p> 
    </foreignobject> 
   </switch> 
  </svg>  
 </body>
</html>

Related Tutorials