Advanced

HTML SVG

Using Scalable Vector Graphics

HTML SVG creates scalable graphics, supporting shapes and animations.

Introduction to SVG

SVG, or Scalable Vector Graphics, is an XML-based format for creating two-dimensional graphics with support for interactivity and animation. Unlike raster images, SVG can be scaled to any size without losing quality, making it ideal for web applications, logos, icons, and complex illustrations.

Basic SVG Example

Let's start with a simple SVG example that draws a red circle:

In this example, the <circle> element is used to create a circle with a center (cx, cy) at (50, 50), a radius (r) of 40, a black stroke, and a red fill.

SVG Shapes

SVG supports various shapes, including rectangles, lines, polygons, and more. Here's how you can create a rectangle and a line:

The <rect> element creates a rectangle, while the <line> element draws a line. You can customize their appearance with attributes like width, height, and styles.

Animating SVG Elements

SVG also supports animations using the <animate> element. Let's animate the radius of a circle:

In this example, the <animate> element gradually changes the radius (r) of the circle from 20 to 40 over 2 seconds, repeating indefinitely.

Using SVG in HTML

SVG can be embedded directly into HTML documents using the <svg> tag or referenced as an external file. Here's how to use an SVG file:

Using the <img> tag, you can include SVGs in your web pages much like you would with any other image format. This method is simple but limits the ability to manipulate the SVG with CSS and JavaScript.

Advanced

Previous: Canvas
Next: Custom Elements