Categories
HTML SVG (Scalable Vector Graphics) is a markup language used to create vector graphics and images that can be rendered and manipulated within an HTML document. SVG is an XML-based language specifically designed for describing two-dimensional graphics.
Here are some key points about HTML SVG:
-
Vector Graphics: SVG is based on mathematical equations and coordinates, which allows for scalable and resolution-independent graphics. Images created with SVG retain their quality and sharpness at any scale, making them ideal for responsive designs.
-
Markup Language: SVG is written using XML syntax. It uses tags, attributes, and values to define shapes, paths, colors, gradients, text, and other graphical elements.
-
Wide Browser Support: SVG is supported by all modern web browsers, making it a cross-platform solution for displaying vector graphics on the web.
-
Interactivity and Animation: SVG elements can be made interactive through the use of event handlers and JavaScript. Animation effects can be applied to SVG elements using CSS or JavaScript to create dynamic and engaging graphics.
-
Accessibility: SVG supports accessibility features, such as adding alt text to images, making it accessible to screen readers and assistive technologies.
Here's a basic example of embedding SVG within an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
</body>
</html>
Output
In this example, we use the <svg> element to define the SVG container. We set the width and height attributes to define the dimensions of the SVG canvas. Inside the <svg> element, we use the <circle> element to draw a red circle. The cx, cy, and r attributes specify the center coordinates and radius of the circle.
SVG allows for more complex shapes, paths, gradients, animations, and other graphical elements. By combining SVG with CSS and JavaScript, you can create interactive and visually appealing graphics directly within an HTML document.
Note: SVG can also be used as an external file and embedded in HTML using the <object> or <img> tag, or referenced via CSS with the background-image property.