HTML SVG

SVG (Scalable Vector Graphics) is an XML-based format for creating two-dimensional vector graphics. Unlike raster images, SVG images are resolution-independent and can scale without losing quality. SVG is widely used for icons, charts, illustrations, and animations on the web.

1. What is SVG?

SVG stands for Scalable Vector Graphics. It is an open standard developed by the W3C and allows for the creation of vector graphics that can be embedded directly into HTML.

• Resolution-Independent: SVG graphics are scalable without losing quality, making them ideal for responsive web design.
• Editable: SVG files are text-based and can be edited with any text editor.
• Interactive: SVG supports interactivity and animation.

Basic Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="red" />
</svg>

2. Embedding SVG in HTML

There are several ways to use SVG in HTML:

a. Inline SVG

Embedding SVG directly in the HTML document.

Example:

<svg width="100" height="100">
  <rect width="100" height="100" style="fill:blue;" />
</svg>

b. <img> Tag

Referencing an external SVG file.

Example:

<img src="image.svg" alt="Example SVG Image">

c. <object> Tag

Embedding an external SVG file with more control over interaction.

Example:

<object type="image/svg+xml" data="image.svg"></object>

d. CSS Background

Using SVG as a background image.

Example:

div {
  background-image: url('image.svg');
  width: 100px;
  height: 100px;
}

3. Basic SVG Shapes

SVG provides various shapes to create graphics:

a. Rectangle

<svg width="200" height="100">
  <rect width="200" height="100" style="fill:blue;" />
</svg>

b. Circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

c. Ellipse

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="40" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

d. Line

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

e. Polygon

<svg height="200" width="200">
  <polygon points="50,150 150,150 100,50" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

f. Path

For more complex shapes.

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

4. Adding Colors and Styles

SVG shapes can be styled using attributes like fill, stroke, and stroke-width.

Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• fill: Sets the color inside the shape.
• stroke: Sets the color of the shape’s border.
• stroke-width: Defines the width of the border.

5. SVG Text

SVG can include text elements that are stylable and scalable.

Example:

<svg width="400" height="180">
  <text x="10" y="50" fill="black" font-size="24" font-family="Arial">Hello, SVG!</text>
</svg>

6. SVG Transformations

Transformations allow you to scale, rotate, move, and skew SVG elements.

a. Translate

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" style="fill:blue;" transform="translate(50,50)" />
</svg>

b. Rotate

<svg width="200" height="200">
  <rect x="50" y="20" width="100" height="100" style="fill:red;" transform="rotate(45 100 100)" />
</svg>

c. Scale

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" style="fill:blue;" transform="scale(2,2)" />
</svg>

7. SVG Animation

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

Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="40" fill="red">
    <animate attributeName="r" from="40" to="80" dur="1s" begin="0s" repeatCount="indefinite" />
  </circle>
</svg>

8. Interactivity in SVG

SVG elements can be interactive by using JavaScript to handle events like onclick, onmouseover, and onmouseout.

Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" onclick="alert('You clicked the circle!')" />
</svg>

9. Advantages of SVG

• Scalability: SVG images scale perfectly without losing quality.
• Interactivity: SVG allows for interactive elements, making it ideal for web applications.
• Styling: SVG elements can be styled with CSS and manipulated with JavaScript.
• Accessibility: SVG is text-based, making it easier to index by search engines and screen readers.

Conclusion

SVG is a versatile and powerful tool for creating vector graphics on the web. Its ability to scale without losing quality, combined with its support for animation and interactivity, makes it an essential part of modern web development. Whether you’re creating simple shapes or complex graphics, SVG provides the flexibility to bring your visual content to life.