HTML <svg> Tag

The <svg> tag in HTML is a container for Scalable Vector Graphics (SVG). It allows you to embed vector graphics directly into your HTML documents, providing a powerful alternative to raster images (like PNGs and JPGs) for certain types of graphics. SVGs are resolution-independent, meaning they look crisp and clear on any screen size, and they can be manipulated using CSS and JavaScript, making them highly versatile.

Syntax

<svg width="value" height="value" viewBox="min-x min-y width height" preserveAspectRatio="value">
  <!-- SVG elements go here (e.g., path, circle, rect, text) -->
</svg>

Attributes

Example

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

This basic example creates a yellow circle with a green border. The circle's center point is at coordinates (50,50), and it has a radius of 40 pixels. The stroke and stroke-width attributes control the color and thickness of the circle's outline.

More Examples

Example 1: Using viewBox for Scaling

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="0" y="0" width="100" height="100" fill="blue"/>
  <rect x="100" y="0" width="100" height="100" fill="red"/>
</svg>

Here, the viewBox="0 0 200 100" makes the SVG's internal coordinate system match the width and height attributes. This is useful if you want your SVG elements to scale proportionally within the SVG viewport, ensuring they are not stretched out of shape.

Example 2: Complex shapes with

<svg width="200" height="200">
  <path d="M10 10 L190 10 L100 180 Z" fill="purple" />
</svg>

The <path> element allows for creating highly detailed vector drawings. The d attribute uses path data commands to define the shape of the vector. In this case it is drawing a triangle.

Example 3: Text in SVG

<svg width="300" height="50">
  <text x="10" y="30" style="font-size:20px; fill: navy;">
    Hello, SVG!
  </text>
</svg>

You can also include text within an SVG. The x and y attributes of the <text> element set the position of the text, and you can style the text with CSS properties like font-size and fill.

Example 4: Responsive SVG with CSS

<div style="width: 50%; max-width: 300px;">
  <svg viewBox="0 0 100 100" style="width: 100%; height: auto;">
    <rect width="100" height="100" fill="orange" />
    <text x="50" y="55" text-anchor="middle" style="font-size: 20px; fill: white;">SVG</text>
  </svg>
</div>

Wrapping the SVG in a div allows it to be responsive. Setting the SVG's width to 100% makes it fill the parent container, and the height:auto ensures the aspect ratio is maintained, all controlled by the viewBox.

Browser Support

The <svg> tag is supported by all modern browsers including:

• Chrome
• Edge
• Firefox
• Safari
• Opera
• Internet Explorer 9+

Notes and Tips

• SVG images are resolution-independent and can be scaled without losing quality, making them ideal for icons, logos, and complex illustrations.
• SVGs can be styled with CSS and manipulated with JavaScript, providing greater control than raster images.
• Use the viewBox attribute to set the internal coordinate system of the SVG, which is crucial for proper scaling and layout.
• Consider using an SVG editor like Inkscape or Adobe Illustrator to create and optimize your SVG graphics. This is often much easier than writing the SVG code from scratch.
• Always test SVG images in different browsers to ensure compatibility and proper rendering.
• SVGs are text-based, meaning they can be indexed by search engines, improving SEO.
• Use preserveAspectRatio to control the aspect ratio of the SVG image within its container. The default value xMidYMid meet should work fine for most uses.
• Don't be afraid to combine SVG elements to create complex images and remember you can nest SVGs inside other SVGs.
• For accessibility, add aria-* attributes when necessary and provide alternative text or descriptions for screen readers.
• You can optimize SVG files using online tools or image editors to reduce file size, potentially improving performance, especially if many SVG files are needed on your webpage.