The HTML <svg> tag is used to define vector-based graphics for the web. SVG (Scalable Vector Graphics) is an XML-based markup language that allows you to create graphics that can scale up or down without losing quality. This makes the <svg> tag particularly useful for creating high-quality images, icons, charts, and illustrations that remain sharp on all screen sizes and devices, including high-resolution displays.
Syntax of the <svg> Tag
The basic syntax of the <svg> tag includes the opening <svg> tag and the closing </svg> tag, with SVG elements such as <circle>, <rect>, or <path> placed within them to define the graphics.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
In this example, an SVG graphic is created with a red circle in the center of a 100x100 viewport. The attributes like cx,cy, and r define the position and size of the circle.
Attributes of the <svg> Tag
The <svg> tag supports several attributes that enhance the flexibility and control of the graphic. Here’s a list of the common attributes:
| Attribute | Description |
|---|---|
| width | Specifies the width of the SVG viewport. |
| height | Specifies the height of the SVG viewport. |
| viewbox | Defines the coordinate system of the SVG content and allows scaling. |
| preserveaspectratio | Ensures the aspect ratio of the graphic is maintained when resizing. |
| fill | Specifies the color inside the shape. |
| stroke | Defines the outline color of the shape. |
| xmlns | Specifies the XML namespace for the document (usually "http://www.w3.org/2000/svg"). |
| transforms | Applies transformations such as translation, rotation, or scaling to the elements within the SVG. |
In addition to these, the <svg> tag supports many global attributes like id, class, and style for better styling, identification, and manipulation via CSS or JavaScript.
Examples of HTML <svg> Tag
Example 1: Basic SVG Circle
<!DOCTYPE html>
<html>
<head>
<title>Basic SVG Example</title>
</head>
<body>
<h1>SVG Circle</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
</body>
</html>
In this example, a simple SVG circle is drawn within a 100x100 viewport. The circle has a blue fill and a black stroke.
Example 2: SVG Rectangle with Animation
<!DOCTYPE html>
<html>
<head>
<title>SVG Animation Example</title>
</head>
<body>
<h1>SVG Animated Rectangle</h1>
<svg width="200" height="100">
<rect width="100" height="100" fill="green">
<animate attributeName="x" from="0" to="100" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
</body>
</html>
In this example, an animated SVG rectangle moves across the canvas. The animate element is used to animate the x position of the rectangle.
FAQs About HTML <svg> Tag
Q1: What is the purpose of the HTML <svg> tag?
A: The <svg> tag is used to define vector-based graphics that can be scaled without losing quality. It’s commonly used for icons, illustrations, and complex graphics on web pages.
Q2: What are the advantages of using SVG over other image formats like PNG or JPEG?
A: SVG is resolution-independent, meaning it can be resized without losing quality. SVG files are often smaller and load faster than raster images (like PNG or JPEG), and they are searchable and easily manipulable via CSS and JavaScript.
Q3: Can I style SVG elements with CSS?
A: Yes, SVG elements can be styled using CSS. You can apply styles to attributes like fill, stroke, and opacity, and use classes and IDs to target specific SVG elements.
Q4: What is the viewbox attribute in the <svg> tag?
A: The viewbox attribute defines the coordinate system and aspect ratio of the SVG content. It enables the graphic to be scaled to fit different sizes while maintaining its aspect ratio.
Q5: Is the <svg> tag supported by all browsers?
A: Yes, all modern browsers, including Chrome, Firefox, Safari, and Edge, support the <svg> tag. Older versions of Internet Explorer (before IE9) do not fully support SVG.
