SVG Radial Gradient – <radialGradient> The <radialGradient> element is used to define a radial gradient. The <radialGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients). Example 1 Define an ellipse with a radial gradient from white to blue. Here…


SVG Gradients A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element. There are two main types of gradients in SVG: Linear Radial SVG Linear Gradient – <linearGradient> The <linearGradient> element is used to define a linear gradient. The <linearGradient> element must…


<defs> and <filter> All SVG filters are defined within a <defs> element. The <defs> element is short for definitions and contains definition of special elements (such as filters). The <filter> element is used to define an SVG filter. The <filter> element has a required id attribute which identifies the filter. The graphic then points to…


SVG Polyline – <polyline> Example 1 The <polyline> element is used to create any shape that consists of only straight lines. Here the SVG code : Output : Example 2 Another example with only straight lines. Here the SVG code : Output :


SVG Line – <line> The <line> element is used to create a line. Here is the SVG code : <!DOCTYPE html> <html> <body> <svg height=”210″ width=”500″> <line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(255,0,0);stroke-width:2″ /> Sorry, your browser does not support inline SVG. </svg> </body> </html> Output :  Code explanation: The x1 attribute defines the start of the…


SVG Ellipse – <ellipse> The <ellipse> element is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius. Example 1 The following example creates an…


SVG Shapes SVG has some predefined shape elements that can be used by developers: Rectangle <rect> : The <rect> element is used to create a rectangle and variations of a rectangle shape. Circle <circle> : The <circle> element is used to create a circle. Ellipse <ellipse> : The <ellipse> element is used to create a Ellipse. Line <line>…


Creating SVG Images SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program, like Inkscape. Embed SVG Directly Into HTML Pages Here is an example of a simple SVG graphic: and here is the HTML code: <!DOCTYPE html> <html> <body> <h1>SVG Image</h1>…


What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation…