<svg>

Learn SVG

• SVG (Scalable Vector Graphics) is a format based on XML for generating vector graphics.
• These graphics maintain quality when resized, making them ideal for responsive designs.
• SVG is supported by all major web browsers.

The <svg> Element

The <svg> element in HTML enables the creation of vector graphics directly within the document. It supports scalable graphics, animations, and interactive elements.

<svg> Demo

<h1>The svg element</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  Sorry, your browser does not support inline SVG.
</svg>

SVG Code Explanation:

• The <svg> element is the root of an SVG graphic.
• Define the dimensions of the SVG using width and height.
• Since SVG follows XML, ensure the xmlns attribute is correctly set.
• Use the <circle> element to create a circular shape.
• The cx and cy attributes determine the circle’s center position. If not defined, the default is (0,0).
• The r attribute specifies the circle’s radius.
• The stroke and stroke-width attributes define the outline color and thickness. In this case, it’s a 4px green stroke.
• The fill attribute sets the circle’s interior color, which is yellow.
• Close the SVG with the </svg> tag.

Another SVG Example

<h1>Another SVG</h1>
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="green" />
  <circle cx="75" cy="50" r="40" fill="yellow" />
  <text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
  Sorry, your browser does not support inline SVG.  
</svg>

Explanation of SVG Code:

• The <svg> element acts as a container, specifying width, height, and namespace.
• A <rect> element creates a rectangle that fills the entire SVG area with a green color.
• The <circle> element forms a circular shape positioned using cx and cy, with a radius r, and a yellow fill.
• The <text> element inserts text into the SVG, positioned using x and y, with a set font size, alignment, and color.
• The word "SVG" is displayed inside the graphic.
• The SVG structure is concluded with </svg>.

Key Points

• Purpose: Embeds SVG (Scalable Vector Graphics) in web pages.
• Attributes:
  • width and height: Define the SVG’s dimensions.
  • viewBox: Controls the aspect ratio and coordinate system.
  • xmlns: Declares the XML namespace for SVG elements.
• Usage: Allows embedding of graphical elements like shapes, paths, text, and images.

Conclusion

SVG (Scalable Vector Graphics) offers a powerful way to create high-quality, scalable graphics for the web. Its XML-based format allows for flexible and resolution-independent visuals, making it perfect for responsive designs. The <svg> element is versatile, supporting various graphic elements like shapes, text, and paths, while maintaining accessibility and interactivity.