The HTML Tag: svg is used to embed scalable vector graphics in a web page. SVG stands for Scalable Vector Graphics, which is an XML-based vector image format for two-dimensional graphics. SVG images are resolution-independent, which means they can be scaled up or down without losing quality. This makes them ideal for use in responsive web design, where images need to adapt to different screen sizes.
The HTML Tag: svg is used to create vector graphics in a web page. It is a container element that can hold other SVG elements such as shapes, lines, text, and images. The SVG elements can be styled using CSS, and can also be animated using JavaScript. The SVG format is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge.
The HTML Tag: svg has several attributes that can be used to control the appearance and behavior of the SVG image. These include:
width and height: These attributes set the width and height of the SVG image.viewBox: This attribute defines the position and size of the SVG viewport.preserveAspectRatio: This attribute controls how the SVG image is scaled and positioned within the viewport.xmlns: This attribute specifies the XML namespace for the SVG element.Here are some examples of how to use the HTML Tag: svg:
This example shows how to create a basic SVG image:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
This code creates an SVG image with a width and height of 100 pixels. It contains a circle element with a center at (50,50) and a radius of 40 pixels. The circle is outlined in black with a stroke width of 2 pixels, and filled with red.
This example shows how to create an SVG image with a defined viewport:
<svg width="100" height="100" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="red" />
</svg>
This code creates an SVG image with a width and height of 100 pixels, but a viewBox of 0 0 200 200. This means that the SVG viewport is 200 pixels wide and 200 pixels tall, and the SVG image is scaled to fit within it. The circle element has a center at (100,100) and a radius of 80 pixels.
This example shows how to style an SVG image using CSS:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>
This code creates the same SVG image as Example 1, but uses CSS to style the circle element. The stroke color is set to black, the stroke width is set to 2 pixels, and the fill color is set to red.
This example shows how to animate an SVG image using JavaScript:
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" />
</svg>
This code creates the same SVG image as Example 1, but adds a click event listener to the circle element. When the circle is clicked, its center is moved from (50,50) to (80,50) using the setAttribute() method.