HTML SVG

HTML SVG (Scalable Vector Graphics) is a markup language used to define vector-based graphics and animations within an HTML document. SVG allows you to create and manipulate scalable graphics that can adapt to different screen sizes without losing quality. Here’s an overview of using SVG in HTML:

Inline SVG:

• You can directly embed SVG code within an HTML document using the <svg> element.
• Example:

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

External SVG File:

• You can also use an external SVG file and reference it within your HTML using the <object> or <img> element.
• Example using <object>:

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

• Example using <img>:

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

SVG Elements and Attributes:

• SVG provides a wide range of elements and attributes to create various shapes, paths, text, and more.
• Common elements include <circle>, <rect>, <path>, <text>, <line>, <polygon>, etc.
• Attributes such as width, height, fill, stroke, stroke-width, and many more allow you to control the appearance and behavior of the SVG elements.

Styling SVG:

• You can apply CSS styles directly to SVG elements using inline styles or external stylesheets.
• Use the style attribute or the <style> element within the SVG code to define the styles.
• Example:

<svg width="200" height="200"> <circle cx="100" cy="100" r="50" style="fill: red; stroke: black; stroke-width: 2px;" /> </svg>

JavaScript Interactions:

• SVG elements can be animated and interacted with using JavaScript.
• You can add event listeners to SVG elements and manipulate their properties and attributes dynamically.
• Example:

<svg width="200" height="200"> <circle id="myCircle" cx="100" cy="100" r="50" fill="red" /> </svg> <script> 
  const circle = document.getElementById('myCircle'); 
  circle.addEventListener('click', function() { 
    this.setAttribute('fill', 'blue'); 
  });
</script>

SVG provides a powerful and flexible way to create and display graphics in web pages. It’s particularly useful for creating logos, icons, charts, and other visual elements that require scalability and interactivity.