Smal SEO Tool
« HTML CanvasHTML Media »

HTML SVG Graphics

SVG stands for Scalable Vector Graphics and it is used to define vector-based graphics for the Web.

What is SVG?

An SVG image is defined in an XML-based text format. It can be scaled to any size without losing quality, making it resolution-independent. This makes SVG ideal for logos, icons, and interactive maps.

Example: A Simple Circle

html
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Try it Yourself »

Example: A Rectangle

html
<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Try it Yourself »

SVG vs. Canvas

  • SVG: Language for describing 2D graphics in XML. SVG is node-based, which means every element in an SVG image can be animated or have events attached. Best for high-quality, scalable graphics like logos and icons.
  • Canvas: Renders pixel-based graphics via JavaScript. It's suitable for dynamic graphics like games or visualizations where performance and pixel-level manipulation is key.

Test Yourself with an Exercise

What is a key advantage of SVG over raster images like PNG or JPG?

« HTML CanvasHTML Media »