Mindblown: a blog about philosophy.

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…

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…

Description of the <line> element The SVG <line> element creates lines. Since the <line> elements are geometrically one-dimensional single lines, they do not have any interior. Therefore, they are never filled. Example of the SVG <line> element: Let’s explain the code above: The x1 attribute specifies the beginning of the line on the x-axis. The y1 attribute specifies the…

Description of the <ellipse> element The SVG <ellipse> element creates ellipses. The ellipse is centered by using the cx and cy attributes. However, unlike the <circle> element, the radius in the x and y coordinates is specified by two attributes, not one. An ellipse and a circle are similar. The difference between them is that an ellipse has an x and…

Description of the <circle> element The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle’s center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute. Example of the SVG <circle> element: Let’s explain the code above: The cx and cy attributes specify the x and…