Graphics

Graphics in HTML

HTML provides various elements for displaying graphics, including images, vector drawings , and interactive visuals. The primary elements used for graphics in HTML are <canvas>, <svg>, and <img>.

The <canvas> Element

• Used to draw graphics dynamically with JavaScript.
• Supports rendering of shapes, animations, and charts.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 100, 50);
</script>

The <svg> Element

• Represents Scalable Vector Graphics SVG.
• Defines resolution-independent images that maintain quality at any size.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Understanding SVG Code

• The svg element acts as the container for the SVG graphic.
• The width and height attributes define the SVG's dimensions.
• Since SVG is XML-based, the xmlns attribute ensures proper namespace binding.
• The <circle> element is used to create a circular shape.
• The cx and cy attributes determine the center of the circle. If unspecified, the default is (0,0).
• The r attribute sets the radius of the circle.
• The stroke and stroke-width attributes define the outline color and thickness (e.g., green with a 4px border).
• The fill attribute specifies the circle’s interior color (yellow in this case).
• Always close the svg tag properly.

Additional SVG Example

<h1>My second 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 serves as the main container, specifying dimensions and namespace.
• The <rect> element creates a rectangle that fills the entire SVG with a green background.
• The <circle> element draws a yellow circle positioned using cx, cy, and r attributes.
• The <text> element displays SVG inside the shape, positioned using x and y attributes, with font size, alignment, and color settings.
• The SVG ends with the </svg> closing tag.

Key Points

• Purpose: Embeds vector-based graphics in web pages.
• Attributes:
  • width & height: Define canvas size.
  • viewBox: Sets aspect ratio and coordinate system.
  • xmlns: Ensures proper XML namespace.
• Usage: Supports various graphical elements like shapes, text, and images.

Comparison: <canvas> vs. <svg>

Using Images for Graphics

The <img> tag allows displaying static graphics on web pages.

<img src="img.jpg" alt="Sample Graphic" width="200">

Conclusion

HTML offers various elements for displaying graphics, such as <canvas>, <svg>, and <img>. The <canvas> element is used for dynamic, JavaScript-driven graphics, ideal for animations. The <svg> tag provides scalable vector graphics, maintaining quality at any size. For static images, the <img> tag is the simplest option.