Description of the <radialGradient> element The <radialGradient> element specifies an SVG radial gradient that can be applied to fill and stroke graphical elements. The <radialGradient> element must be nested inside a <defs> element which is a short for definitions. The <defs> element contains definition of specific elements (e.g., gradients). Do not confuse an SVG radial… Continue reading SVG Radial

Description of SVG gradients A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element. There exist two main kinds of gradients in SVG: linear radial The <linearGradient> element The <linearGradient>> element specifies linear gradients that fill graphical elements. It should be nested… Continue reading SVG Linear

Description of SVG filters All SVG filters are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters. The <filter> element defines an SVG filter. This element has an id attribute (required) identifying the filter. To create drop shadows, use the <feOffset> element. You will need… Continue reading SVG Drop Shadows

Description of SVG filters All SVG filters are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters. The <filter> element defines an SVG filter. This element has an id attribute (required) identifying the filter. The <filter> element is not rendered directly. Its only usage is… Continue reading SVG Blur Effects

Currently, CSS provides a way to apply color effects to images (e.g., lightness, saturation, contrast, etc.) using the filter property. However, CSS filters are limited. The effects created with them are usually applicable to images but limited to color manipulation and blurring. To create powerful effects, we’ll need other functions. Such functions are available in SVG. SVG filters add various… Continue reading SVG Filters Intro

Description of the stroke properties SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. They allow controlling various aspects of a stroke. Here are some stroke properties: stroke for specifying the color of a line, outline or text of an element, stroke-linecap for specifying how the endings… Continue reading SVG Stroking

Description of the <text> element The SVG <text> element specifies a graphics element consisting of a text. It is possible to apply a pattern, clipping path, mask, gradient, or filter to <text>, like other SVG graphics elements. The text not included within a <text> element will not be rendered. Whereas the text included within a… Continue reading SVG Text

Description of the <path> element The SVG <path> element specifies a path. Paths are used to create complex shapes combining several straight or curved lines. Complex shapes that consist only of straight lines can be created as polylines. Polylines and paths create similar shapes. However, polylines need smaller straight lines for simulating curves. Creating complex paths… Continue reading SVG Path

Description of the <polyline> element The SVG <polyline> element creates any shape consisting of only straight lines that connect multiple points. Unlike the <polygon> element, the <polyline> creates open shapes. Example of the SVG <polyline> element: Example of the SVG <polyline> element with straight lines: Attributes Attribute Description points This attribute specifies the list of points (pairs… Continue reading SVG Polyline

Description of the <polygon> element The SVG <polygon> element creates a graphic containing at least three sides. Polygons consist of straight lines, which are connected up, and its shape is “closed”. Example of the SVG <polygon> element with three sides: In this example the points attribute specifies the x and y coordinates for each corner of our… Continue reading SVG Polygon