Skip to main content

SVG Elements Examples

There are various element are available in svg. here given few common that are normally using in svg.

defs

This element are useful the define command shape and relative animation that are used multiple times in svg. this shape are define at once and used to multiple time. let an example.

SVG defs Example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height='120'>
   <defs>
     <ellipse id="ellipseShap1"  cx="50" cy="70" rx="15" ry="20" fill="GRAY">
 <animate attributeName="ry" values="50;1;50" begin="0s" dur="2s" repeatCount="indefinite"/>
       <animate attributeName="fill" values="#fa8072a6;#d6a2cd;salmon;#da9b4da1;#87ceeb85" begin="0s" dur="30s" repeatCount="indefinite"/>
    <animateTransform id="firstMove"
                     
            attributeName="transform"
            type="rotate"
            from="0 50 70"
            to="360 50 70"
            dur="2"
            repeatCount="10"/>
       
        </ellipse>
  </defs>
    <use transform="rotate(45 50 70)" xlink:href="#ellipseShap1"      fill="#chocolate" stroke="red"   ></use>
  <use transform="rotate(90 50 70)" xlink:href="#ellipseShap1"      fill="#chocolate" stroke-array="50 50" stroke="red"   ></use>
    <use transform="rotate(135 50 70)" xlink:href="#ellipseShap1"     fill="#chocolate" stroke="red"   ></use>
  <use xlink:href="#ellipseShap1" fill="#4ca6af8a" stroke="red"   ></use>
 
</svg>

in this example use element are access shapes what are exist in defs element. note there are possible to define multiple shapes within defs element. and use this shapes by its id.

SVG <discard>

This are used to remove elements during the time.

SVG discard Example Remove this After(3 sec)
<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="blue" stroke-width="9.8" fill="none">
  </circle>
  <g>
    <text x="90" y="130" stroke="none"> Remove this After(3 sec)</text>
  </g>
    <circle stroke-dasharray="2 3" cx="160" cy="190"  r="50" stroke="blue" stroke-width="9.8" fill="#c1a7ce">
        <discard begin="3s"></discard>
  </circle>
</svg>

SVG <symbol>

There are used to share shape in multiple times.

SVG symbol element Example
<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <symbol id="ellipseShap"  >
  <ellipse cx="150" cy="170" rx="100" ry="25"   ></ellipse>  
  </symbol>
    <use xlink:href="#ellipseShap" fill="#4ca6af8a" stroke="blue"  transform="translate(0,-130)"  ></use>
 <use xlink:href="#ellipseShap" fill="fuchsia"  transform="rotate(20,150,170)"  ></use>
 <use xlink:href="#ellipseShap" transform="rotate(110,150,170)" fill="#4caf50b8"  ></use> 
  <use xlink:href="#ellipseShap" transform="rotate(75,150,170)" fill="#673ab799"  ></use> 
</svg>

SVG <clipPath>

clipPath are normally used to fill area of shape. for example.

SVG clippath Example
<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clipPath id="items">
      <circle cx="40" cy="35" r="35" fill="red" ><animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"></animate></circle>
  </clipPath>
  <rect stroke-width="2px" stroke="#e91e63" clip-path="url(#items)" id="shapes" x="30" y="20" width="100" height="100" fill="pink"></rect>
</svg>

SVG mask

SVG mask Example
<svg width="200px" height="105px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <mask x="0" y="0" id="halfLeftBottom">
    <rect x=0% y="50%" fill="white" width="50%" height="50%" />
  </mask>
  
  <mask x="0" y="0" id="halfRightTop">
    <rect x=50% y="0%" fill="white"   width="50%" height="50%" />
  </mask>
<!-- Simple border -->
  <circle fill="transparent" stroke="darkorchid" stroke-width="3px" cx="50%" cy="50%" r="50"/>
  <!-- half Left Bottom -->
  <circle fill="blue" mask="url(#halfLeftBottom)" stroke="blue" stroke-width="3px" cx="50%" cy="50%" r="50"/>
   <!-- half Right Bottom -->
   <circle fill="red" mask="url(#halfRightTop)" stroke="red" stroke-width="3px" cx="50%" cy="50%" r="50"/>
 <circle  fill="#e4e7ec"  stroke="antiquewhite" stroke-width="3px" cx="50%" cy="50%" r="50"><animate attributeName="r" values="30;1;30" begin="0s" dur="2s"repeatCount="indefinite"/></circle>
</svg>

foreignObject SVG elements

This element are used special purpose. suppose we are need to include HTML/XHTML element within the SVG. then we can used this element. for example.

SVG foreignobject Example

Example of Html Within SVG

This is an simple (p) paragraph tag text in html.

Example th1 Example th1
Demo 1 Demo 2
Demo 3 Demo 4
Demo 5 Demo 6
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="280" height="500" >

<!-- Include HTML-->
<foreignObject   x="10"  y="10"  width="100%"  height="100%">
 <body xmlns="http://www.w3.org/1999/xhtml">
   <h3>Example of Html Within SVG</h3>
   <p>This is an simple (p) paragraph tag text in html.</p> 
   <img src="https://www.codelike.in/img/svg/svg-bicycle-animation.png" class="img-responsive" alt="SVG Bicycle" title="svg Bicycle">
     <p>Include Image</p> 
   
 <table class="table table-bordered">
    <thead>
      <tr>
        <th>Example th1</th>
        <th>Example th1</th> 
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Demo 1</td>
        <td>Demo 2</td>
      </tr>
      <tr>
        
        <td>Demo 3</td>
        <td>Demo 4</td>
      </tr>
       <tr>
        <td>Demo 5</td>
        <td>Demo 6</td>
      </tr>
    </tbody>
  </table>  
 </body>
</foreignObject>
</svg>

Pattern element

SVG pattern Example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="350" height="400" >

<defs>
  <!---Define pattern -->
<pattern id="patternExample" x="30"  y="30"  width="30%" height="30%"
        patternUnits="objectBoundingBox"  
        >
  <ellipse   cx="40" cy="70" rx="15" ry="20" fill="#4c4b8e94">
 <animate attributeName="ry" values="25;5;25" begin="0s" dur="2s" repeatCount="indefinite"/>
   
    <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 50 70"
            to="0 50 70"
            dur="2"
            repeatCount="10"/>
        </ellipse>
</pattern>
</defs>
<rect x="20" y="20"  width="100%"  height="100%"
  fill="url(#patternExample)"/>
</svg>




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment