Open In App

SVG Element Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

SVG Element



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads