Tag: svg


04

Apr 2016

SVG Gradients (Radial)

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 is the SVG code : Code explanation: The id attribute...

Read More


04

Apr 2016

SVG Gradients (Linear)

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 be nested within a <defs> tag. The <defs> tag is...

Read More


04

Apr 2016

Shadow Effect in SVG

<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 the filter to use. SVG <feOffset> Example 1 The <feOffset>...

Read More


01

Apr 2016

How to create a Polyline in SVG

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 :


31

Mar 2016

How to create a line in SVG

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 line on the x-axis The y1 attribute defines the start...

Read More


31

Mar 2016

How to create an Ellipse in SVG

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 ellipse. <!DOCTYPE html> <html> <body> <svg height=”140″ width=”500″> <ellipse cx=”200″...

Read More


31

Mar 2016

Different kind of Shapes in SVG

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> : The <line> element is used to create a Line. Polyline...

Read More


31

Mar 2016

How to create SVG image

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> <svg width=”100″ height=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”red” stroke-width=”4″ fill=”orange”...

Read More


31

Mar 2016

SVG (Scalable Vector Graphics)

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 SVG integrates with other W3C standards such as the DOM...

Read More