HTML SVG

HTML SVG Graphics

What is SVG?

• SVG stands for Scalable Vector Graphics.
• It’s an XML-based language for describing two-dimensional vector graphics.
• Vector graphics are defined by mathematical equations, not pixels. This means they can scale infinitely without losing quality (unlike raster images like JPG or PNG).
• SVG is a W3C standard and is well-supported by modern browsers.

The HTML <svg> Element

HTML allows you to directly embed SVG graphics using the <svg> element. This element acts as a container for your SVG shapes, paths, text, and other graphical elements.

Common SVG elements include <circle>, <rect>, <line>, <polygon>, <path>, and <text>.

SVG graphics can be styled with CSS (both inline style attributes and external/internal stylesheets) and manipulated with JavaScript.

Browser Support

The <svg> element is supported by all major modern browsers (Chrome, Firefox, Safari, Edge).

(Specific version numbers for initial support are less relevant now, as support is widespread.)

Example: SVG Circle

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

Explanation:

• <svg>: Defines the container with a width and height.
• <circle>: Draws a circle.
• cx, cy: Coordinates of the center.
• r: Radius of the circle.
• stroke, stroke-width: Outline color and thickness.
• fill: Inner color.

Example: SVG Rectangle

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>

Explanation:

• <rect>: Draws a rectangle.
• width, height: Dimensions of the rectangle.
• style: Using CSS properties for fill and stroke.

Example: SVG Star (using Polygon)

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
           style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
</svg>

Explanation:

• <polygon>: Draws a shape with straight lines connecting points.
• points: A list of x,y coordinates for the vertices.
• fill-rule: Determines how the inside of a complex shape is filled (nonzero or evenodd).

SVG vs. Canvas

HTML also offers the <canvas> element for drawing graphics, but it works differently from SVG:

Feature	Comparison
SVG	Canvas
Vector-based (Shapes)	Raster-based (Pixels)
Resolution-independent (Scalable)	Resolution-dependent (Pixelates when scaled)
DOM nodes for every element (Good for event handling)	Immediate mode drawing (No object model after drawing)
Better for complex shapes, interactivity, accessibility (text).	Better for pixel manipulations, complex animations, games.
Can have slower performance with many elements.	Can have better performance for large numbers of simple objects or pixel effects.

Choose SVG when:

• You need graphics that scale perfectly (logos, icons, illustrations).
• You need interactivity with specific parts of the graphic (event listeners on shapes).
• You need good accessibility (text remains text).
• You are creating charts or data visualizations.

Choose Canvas when:

• You need pixel-level control.
• You are rendering a large number of objects where performance is critical.
• You are building games or complex, high-frame-rate animations.
• You are doing image processing.

For more in-depth information, explore the MDN SVG documentation.