SVG Element Complete Reference
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Elements are the core things that is required to work with SVGs.
List of SVG Elements:
- SVG <a> Element
- SVG <animate> Element
- SVG <animateMotion> Element
- SVG <animateTransform> Element
- SVG <circle> Element
- SVG <clipPath> Element
- SVG <defs> Element
- SVG <desc> element
- SVG <Ellipse> Element
- SVG <feBlend> Element
- SVG <feComponentTransfer> element
- SVG <feConvolveMatrix> Element
- SVG <feDiffuseLighting> Element
- SVG <feDisplacementMap> Element
- SVG <feDropShadow> Element
- SVG <feFlood> Element
- SVG <feGaussianBlur> Element
- SVG <feImage> Element
- SVG <feMerge> Element
- SVG <feMergeNode> Element
- SVG <feOffset> Element
- SVG<fePointLight> Tag
- SVG <feSpecularLighting> Element
- SVG <feSpotLight> Element
- SVG<feTile> Element
- SVG <feTurbulence> Element
- SVG <filter> Element
- SVG <foreignObject> Element
- SVG <g> element
- SVG <hatch> Element
- SVG <image> Element
- SVG <Line> Element
- SVG <marker> element
- SVG <mask> Element
- SVG <mpath> element
- SVG <path> Element
- SVG <pattern> Element
- SVG <polygon> Element
- SVG <polyline> Element
- SVG <rect> Element
- SVG <script> Element
- SVG <set> Element
- SVG <stop> Element
- SVG <style> Element
- SVG <switch> Element
- SVG <symbol> Element
- SVG <text> Element
- SVG <textPath> Element
- SVG <title> Element
- SVG <tspan> element
- SVG <use> Element
- SVG <view> Element
Below example will give you a brief idea that how to use the SVG Element:
Example: In this example, we will add an Image and create a polygon.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <b>SVG Elements Image and Polygon</b> <center> <svg width="200" height="200" <image href= height="150" width="150"/> </svg> <svg width="200px" height="200px"> <!-- try different pairs and make different shapes--> <polygon points="100, 100 15, 205 150, 7 20, 0" fill="green" stroke="yellow"/> </svg> </center> </body> </html> |
Output:
SVG Element
Please Login to comment...