Category: Graphics

1. What is SVG <path> Exactly? The <path> element is the most powerful SVG shape. It lets you draw anything by giving a series of instructions to an imaginary “pen”: Move the pen without...

SVG Text and <tspan>! 😊 Your favorite patient teacher from Hyderabad is back, explaining everything super slowly, in simple everyday English, with lots of copy-paste examples you can try right now in VS Code...

SVG textPath is a special child element that lives inside <text>. It lets you make text follow the shape of a <path> (the powerful d-attribute path we learned earlier). This is how you get cool...

SVG Links means adding clickable hyperlinks inside your SVG graphics. You can make: A circle, rectangle, path, icon, or text clickable When user clicks → goes to another page, downloads file, opens email, jumps...

SVG Image (the <image> tag) means embedding a raster picture (like JPG, PNG, or even another SVG file) inside your SVG document. It’s like putting a photo or logo inside your vector drawing so...

SVG Marker means using the <marker> element to create small reusable graphics (like arrowheads, dots, circles, diamonds, custom symbols) that automatically attach to the start, middle, or end of lines, paths, polylines, or polygons....

SVG Fill Attributes basically means all the ways you can control the color / pattern / gradient / transparency / rule that fills the inside of SVG shapes (rectangle, circle, ellipse, polygon, closed path, text,...

SVG Stroke means everything related to the border / outline / edge of your SVG shapes (line, rectangle, circle, ellipse, polygon, polyline, path, text, etc.). Think of it this way: fill = inside color...

SVG Filters are one of the most powerful and beautiful features in SVG. They let you apply photoshop-like effects (blur, shadow, brightness, contrast, color changes, turbulence, waves, glow, emboss, etc.) directly inside SVG code...

SVG Blur Effects are one of the most popular and beginner-friendly uses of SVG <filter>. They make any shape, text, image, icon, button, or group look soft, dreamy, glowing, out-of-focus, or professional-shadowed — exactly...