HTML SVG Graphics

Scalable Vector Graphics (SVG) is an XML-based format for creating graphics that are scalable, interactive, and resolution-independent. SVG is widely used for creating shapes, animations, and even dynamic visualizations in web development. This post by The Coding College will guide you through the basics of SVG and how to use it in HTML.

What is SVG?

SVG stands for Scalable Vector Graphics. Unlike raster images (e.g., PNG, JPEG), SVG graphics are vector-based, meaning they can scale infinitely without losing quality.

Key Features of SVG:

  • Scalable: Graphics retain their quality at any resolution.
  • Interactive: Supports animations and user interactions.
  • Editable: SVG files are human-readable XML files.
  • Lightweight: Smaller file sizes for simple graphics compared to raster images.

Syntax of SVG in HTML

SVG can be embedded directly within HTML using the <svg> element.

Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

This code creates a blue circle with a radius of 50 pixels at the center of a 200×200 canvas.

Basic SVG Shapes

SVG supports various shapes. Here are some examples:

1. Rectangle

<svg width="300" height="150">
  <rect x="50" y="20" width="200" height="100" fill="green" />
</svg>

2. Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

3. Ellipse

<svg width="300" height="150">
  <ellipse cx="150" cy="75" rx="100" ry="50" fill="orange" />
</svg>

4. Line

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="red" stroke-width="2" />
</svg>

5. Polygon

<svg width="200" height="200">
  <polygon points="100,10 40,190 190,190" fill="purple" />
</svg>

6. Path

<svg width="300" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" />
</svg>

Adding Text to SVG

You can include text in your SVG using the <text> element.

Example:

<svg width="300" height="100">
  <text x="50" y="50" font-size="20" fill="blue">Hello, SVG!</text>
</svg>

SVG with CSS

You can style SVG elements with CSS just like HTML elements.

Example:

<svg width="200" height="200">
  <rect x="20" y="20" width="160" height="160" class="styled-rect" />
</svg>

<style>
  .styled-rect {
    fill: yellow;
    stroke: black;
    stroke-width: 5;
  }
</style>

SVG Animations

SVG supports animations via the <animate> and <animateTransform> elements.

Example:

<svg width="200" height="200">
  <circle cx="50" cy="50" r="30" fill="red">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

This animation moves the circle horizontally.

Embedding External SVG

SVG files can also be embedded as external resources using the <img> tag or <object> tag.

Example (Using <img>):

<img src="example.svg" alt="An SVG Example" />

Why Use SVG?

  1. High Quality: Ideal for responsive designs and high-DPI screens.
  2. Interactive: Perfect for animations and interactive graphics.
  3. Accessible: Easily styled with CSS and JavaScript for dynamic changes.
  4. Lightweight: Reduces load times for vector-based graphics.

SVG graphics are essential for modern web development. To learn more about creating interactive web experiences, visit The Coding College and start building with SVG today!

Leave a Comment