Previous

HTML SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) is an XML-based vector image format used to create graphics that scale seamlessly on any screen size without losing quality. It is widely used for icons, charts, and complex illustrations in web development.

Basic Syntax

SVG elements are defined within the <svg> tag.

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

Output: A blue circle with a radius of 50 pixels is drawn at the center of a 200x200 canvas.

Common SVG Shapes

1. Rectangle (<rect>)

Defines a rectangle with optional rounded corners.

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="green" rx="10" ry="10" />
</svg>
  • x, y: Top-left corner of the rectangle.
  • rx, ry: Horizontal and vertical corner radius.

2. Circle (<circle>)

Defines a circle with a center and radius.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>
  • cx, cy: Center coordinates.
  • r: Radius of the circle.

3. Ellipse (<ellipse>)

Defines an ellipse with horizontal and vertical radii.

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="40" fill="purple" />
</svg>
  • rx, ry: Horizontal and vertical radii.

4. Line (<line>)

Defines a straight line.

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>
  • x1, y1, x2, y2: Starting and ending points.

5. Polygon (<polygon>)

Defines a closed shape with multiple points.

<svg width="200" height="200">
  <polygon points="50,10 90,180 10,80 190,80 110,180" fill="orange" />
</svg>
  • points: List of coordinates for vertices.

6. Polyline (<polyline>)

Defines an open shape with multiple points.

<svg width="200" height="200">
  <polyline points="10,10 50,100 90,10" stroke="blue" fill="none" stroke-width="2" />
</svg>

7. Path (<path>)

Defines complex shapes with commands.

<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="brown" stroke-width="2" />
</svg>
  • M: Move to.
  • C: Cubic Bezier curve.
  • S: Smooth curve.

 

Adding Text

Example: Text in SVG

<svg width="200" height="100">
  <text x="10" y="50" font-size="24" fill="blue">Hello, SVG!</text>
</svg>
  • x, y: Position of the text.
  • font-size: Size of the text.

 

Styling SVG

SVG elements can be styled using CSS.

<svg width="200" height="200" class="styled-svg">
  <circle cx="100" cy="100" r="50" class="circle" />
</svg>

<style>
  .styled-svg {
    background-color: lightgray;
  }
  .circle {
    fill: yellow;
    stroke: black;
    stroke-width: 3;
  }
</style>

 

Animations in SVG

Example: Animated Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red">
    <animate attributeName="r" from="50" to="100" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>
  • animate: Adds animation to an attribute like r (radius).
  • dur: Duration of the animation.
  • repeatCount: Specifies the repetition of the animation.

 

Advantages of SVG

  1. Scalability: Does not lose quality at any resolution.
  2. Interactivity: Supports JavaScript and CSS styling.
  3. Accessibility: Readable and editable as plain text.
  4. Lightweight: Smaller file size for simple graphics compared to raster images.

 

Summary

SVG is a versatile tool for creating scalable, interactive graphics for web applications. Using elements like <circle>, <rect>, and <path>, combined with CSS and JavaScript, developers can build rich visual content efficiently.

Previous