How to Use Inline SVG to Create Simple Graphics in HTML

In web development, inline SVG (Scalable Vector Graphics) allows you to embed and manipulate images using XML syntax. SVGs are particularly useful for creating resolution-independent graphics like icons, shapes, and illustrations. In this tutorial, we’ll demonstrate how to create a simple red circle using inline SVG.

Why Use SVG?

SVG graphics are scalable, which means they remain crisp and clear at any resolution. This makes them an ideal choice for responsive websites where images need to scale across different devices. Additionally, SVG files can be easily edited and manipulated with CSS and JavaScript, offering a high level of customization.

Example of a Simple Red Circle in SVG

Below is an example of an inline SVG that creates a red circle. You can copy this code and use it in any HTML document to display a red circle on your webpage.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>