Category: 7. SVG Tutorial

SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes. SVG elements Element Description Attributes <a> Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL. xlink:showxlink:actuatexlink:hreftarget <altGlyph> Controls the glyphs used to…

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…

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…

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…

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…

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…

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…

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…

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…

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…