Tag

svg Archives - Crazy Education

SVG Gradients (Radial)

By | HTML/CSS, Programming | No Comments

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…

Read More

Shadow Effect in SVG

By | HTML/CSS, Programming | No Comments

<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….

Read More

How to create a line in SVG

By | HTML/CSS, JAVASCRIPT, JQUERY, Programming | No Comments

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…

Read More

Different kind of Shapes in SVG

By | HTML/CSS | No Comments

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…

Read More