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