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 Elements	Description	Example
<a>	The <a> element in SVG is used to create a hyperlink to other webpages or any URL.	Try
<animate>	The <animate> SVG element is used to animate an attribute or property of an element over time.	Try
<animateMotion>	The <animateMotion> element let define how an element moves along a motion path.	Try
<animateTransform>	The <animateTransform> element animates a transformation attribute on its target element.	Try
<circle>	The SVG <circle> element is used to draw circle. The center point and radius are given.	Try
<clipPath>	The <clipPath> SVG element is used to define a clipping path that is to be used by the clip-path property.	Try
<defs>	The <defs> in SVG is used whenever we want a particular element to render only when required or when it is called.	Try
<desc>	The <desc> element in SVG is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element.	Try
<Ellipse>	The <Ellipse> element is used to create an ellipse.	Try
<feBlend>	<feBlend> element is used to combines two images or SVG fragments into a single graphic.	Try
<feComponentTransfer>	<feComponentTransfer> element implements color manipulations on each color channel separately.	Try
<feConvolveMatrix>	The <feConvolveMatrix> SVG filter primitive changes pixels in the input image with neighboring pixels to produce a resulting image.	Try
<feDiffuseLighting>	The <feDiffuseLighting> filter primitive lights an image using the alpha channel as a bump map.	Try
<feDisplacementMap>	The <feDisplacementMap> SVG filter primitive is use to spatially displace the image content using a displacement map.	Try
<feDropShadow>	The <feDropShadow> element works in combination with other filter primitives to add a drop shadow to the graphic.	Try
<feFlood>	<feFlood> element generates a layer of continuous color that completely fills this element’s filter primitive region.	Try
<feGaussianBlur>	The <feGaussianBlur> element adds a smooth blur to the graphic based on the standard deviation provided in the input primitive.	Try
<feImage>	The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output.	Try
<feMerge>	The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially.	Try
<feMergeNode>	The <feMergeNode> SVG element takes the result of another filter which is to be processed by its parent element i.e. feMerge element.	Try
<feOffset>	The <feOffset> element is used to create drop shadow effects.	Try
<fePointLight>	The <fePointLight> filter primitive defines a light source which allows to create a point light effect.	Try
<feSpecularLighting>	The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map.	Try
<feSpotLight>	The <feSpotLight> SVG defines a light source which results in a spotlight effect.	Try
<feTile>	The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.	Try
<feTurbulence>	The <feTurbulence> SVG filter generates noise which is helpful in simulating several natural phenomena	Try
<filter>	The <filter> element is used to define filters. To identify uniquely filter use id. The filters are defined in def elements.	Try
<foreignObject>	The <foreignObject> element of SVG includes elements from a different XML namespace.	Try
<g>	The <g> element is a container used to group other SVG elements.	Try
<hatch>	The <hatch> element is used to stroke an object.	Try
<image>	The <image> element includes images inside SVG documents.	Try
<Line>	The SVG <Line> element is used to draw line. The start point and endpoints are given to draw the line.	Try
<marker>	The <marker> element in SVG is used to define the graphics that is mostly used for the drawing purpose.	Try
<mask>	The <mask> element defines the transparency and visibility of the input object.	Try
<mpath>	The <mpath> is the sub element for the <animateMotion> element that provides the ability to reference an external <path> element as the definition of a motion path.	Try
<path>	The element <path> is used to define a path that starts from a position and ends to a particular position.	Try
<pattern>	<pattern> element is used to fill shapes with patterns made up of images.	Try
<polygon>	The <polygon> element of SVG is used to make any type of polygon on the SVG.	Try
<polyline>	The <polyline> element of SVG in HTML is used to create a shape by connecting lines through different points.	Try
<rect>	The <rect> element is used to create a rectangle.	Try
<script>	The <script> element allows adding scripts to an SVG document.	Try
<set>	The <set> element provides an easy means of just setting the value of an attribute for a specified duration.	Try
<stop>	<stop> Element tells the color and position to be used within the parent element.	Try
<style>	The <style> element allows style sheets to be embedded directly within the SVG content.	Try
<switch>	The <switch> element is used to evaluate attributes on its direct child elements in order and then renders the first child where these attributes evaluate to true.	Try
<symbol>	The <symbol> element is used to define graphical template objects which can be instantiated by the <use> element.	Try
<text>	The <text> element is used to draw text.	Try
<textPath>	The <textPath> element is used to render the text along with a certain path.	Try
<title>	The <title> element provides an accessible, short-text description of any SVG container element or graphics element.	Try
<tspan>	The <tspan> element defines a subtext within a <text> element or another <tspan> element.	Try
<use>	The <use> element takes nodes from within the SVG document and duplicates them somewhere else.	Try
<view>	The <view> element is used to alter the attributes of viewbox of the original SVG element.	Try

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"
           xmlns="http://www.w3.org/2000/svg">
         <image href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                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