Category: SVG

SVG text and tspan elements in great detail. These let you put real, selectable, stylable, searchable text inside SVG — something you cannot do with normal images (PNG/JPG). I’m going to explain it like we’re sitting...

SVG textPath does — it takes your text and makes it flow along any path you define. I’m going to explain it like we’re building beautiful curved text together — step by step, slowly,...

What are SVG Links? In SVG, hyperlinks are created using the <a> element — yes, the same tag name as in HTML! But inside SVG, this <a> is an SVG element (in the SVG...

What does image actually do? It references an external image file and draws it inside the SVG coordinate system — just like placing a sticker on your drawing. Important facts (2025–2026 reality): Browsers must...

SVG: markers Imagine you’re drawing a map, a flowchart, a graph, or just a fancy arrow — and you want nice arrowheads, dots, diamonds, or custom shapes automatically placed at the start, middle, or...

SVG Fill — one of the most important things when you’re coloring shapes in SVG! Imagine we’re sitting together with the code editor open, and I’m your patient teacher who’s going to explain everything...

SVG Stroke This is the second half of coloring in SVG (the first half was fill which we covered earlier). If fill paints the inside of shapes, then stroke paints the outline / border...

SVG Filters Introduction! Up until now, we’ve learned how to draw shapes (<rect>, <circle>, <path>…), color them (fill, stroke), add text, markers, links, images, and more. All of that is already super powerful. But...

SVG Blur Effects, which are one of the most popular and easiest-to-understand parts of SVG filters! I’m your friendly teacher here, so we’ll go slow, step by step, with lots of copy-paste examples. By...

Why “Drop Shadow 1”? There are two main ways to make drop shadows in SVG in 2025–2026: Drop Shadow 1 (classic method) → Uses <feGaussianBlur> + <feOffset> + <feMerge> → More steps, but very...