Press "Enter" to skip to content

HTML5-SVG Examples

Last updated on October 4, 2019

Definition :

Svg stands for scalable vector graphics. Svg is used to define graphics for the web. Svg is a W3C recommendation. Svg has several methods for drawing paths, boxes, circles, text, and graphic images.

Program 1 :

<html>

     <body>

                    <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 800 300″>

                        <rect class=”mouse” x=”0″ y=”0″ width=”800″ height=”300″/>

                                    <polygon class=”diamondor tulip” points=”400,280,310,150,400,20,490,150″/>

                                    <style>

                                       .mouse {fill:#e5E4E3;}

                                                   .tulip {fill:#CC2954;}

                                      .diamondor {

                                         animation-name : diamondorigin;

                                                                 animation-duration : 1s;

                                                                 animation-iteration-count : infinitr;

                                                                }

                                                  @keyframes diamondorigin {

                                                     from {transform: rotate(0deg);}

                                                                 to { transform: rotate(360deg) }

                                                                }

                                    </style>

                                </svg>

                </body>

</html>

program 2 :

<html>

   <body>

     <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 800 300″>

                    <rect class=”mouse” x=”0″ y=”0″ width=”800″ height=”300″/>

                                <polygon class=”diamondorCh tulip” points=”400,280,310,150,400,20,490,150″/>

                                <style>

                                   .mouse{fill:#E5E4E3;}

                                   .tulip{fill:#CC2954;}

                                   .diamondorCh{

                                   animation-name:diamondOriginChanged;

                                   animation-duration:4s;

                                   animation-iteration-count:infinite;

                                   transform-origin:50% 50%;

                                   }

                                   @keyframes diamondOriginChanged{

                                   from{transform:rotate(0deg);}

                                   to{transform:rotate(360deg);}

                                   }

                                </style>

                  </svg>

                </body>

</html>

Program 3 :

<html>

   <body>

     <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 800 300″>

                    <rect class=”mouse” x=”0″ y=”0″ width=”800″ height=”300″/>

                                <polygon class=”diamondmoba tulip” points=”400,280,310,150,400,20,490,150″/>

                                <style>

                                   .mouse{fill:#E5E4E3;}

                                   .tulip{fill:#CC2954;}

                                   .diamondmoba{

                                   animation-name:diamondMoveBack;

                                   animation-duration:5s;

                                   animation-iteration-count:infinite;

                                   transform-origin:50% 50%;

                                   animation-direction:alternate-reverse;

                                   }

                                   @keyframes diamondMoveBack{

                                   0%{transform:translate(0,0);}

                                   100%{transform:translate(200px,0);}

                                   }

                                </style>

                  </svg>

                </body>

</html>

Program 4 :

<html>

   <body>

     <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 800 300″>

                    <rect class=”mouse” x=”0″ y=”0″ width=”800″ height=”300″/>

                                <polygon class=”diamondtu tulip” points=”400,280,310,150,400,20,490,150″/>

                                <style>

                                   .mouse{fill:#E5E4E3;}

                                   .tulip{fill:#CC2954;}

                                   .diamondtu{

                                   animation-name:diamondTurns;

                                   animation-duration:5s;

                                   animation-iteration-count:infinite;

                                   animation-origin:50% 50%;

                                   animation-direction:alternate-reverse;

                                   }

                                   @keyframes diamondTurns{

                                   0%{transform:rotate(0deg);}

                                   50%{transform:rotate(-90deg);}

                                   100%{transform:rotate(0deg);}

                                   }

                                </style>

                  </svg>

                </body>

</html>

Program 5 :

<html>

     <body>

                      <h1> <center> <svg width=”250″ height=”250″>

                                  <circle cx=”100″ cy=”100″ r=”90″ stroke=”orange” stroke-width=”5″ fill=”green”>

                                  </svg> </center>

                                  </h1>

                </body>

</html>

Program 6 :

<html>

     <body>

                      <h1> <center>

                                     <svg width=”250″ height=”250″>

                                        <rect width=”100″ height=”100″ style=”margin-left:2px; fill:rgb(125, 150, 255); stroke-width:10; stroke:rgb(0,0,0)”/>

                                     </svg>

                                </center> </h1>

                </body>

</html>

Program 7 :

<html>

     <body>

                      <h1> <center>

                                     <svg width=”250″ height=”250″>

                                        <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″ style=”fill:blue; stroke:red; stroke-width:5, opacity:0.4″/>

                                     </svg>

                                </center> </h1>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *