Author: web-admin

SVG polygon element! This one is super useful because it lets you draw any closed shape made of straight lines — triangles, stars, houses, arrows, hexagons, irregular shapes — basically anything with straight sides...

SVG polyline, the “open sibling” of the <polygon> we just learned about! Imagine we’re drawing with a pencil on paper: With <polygon> you draw a shape and the pencil automatically lifts and connects back...

What makes <path> so powerful? It has one main attribute: d (stands for “data” or “description”) The d value is a mini programming language — a string of commands that tell the “pen” where...

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...