Images and SVG Graphics

Images and SVG Graphics
Table of Contents
  1. Images
  2. SVG Graphics
  3. Further Reading

Images on the internet are great. We use them for cat gifs, to showcase what we ate for breakfast, and, of course, for the memes. You've made it this far without working with any images, but that ends now.


Say hello to how you add images to a page, the image tag, img. Here's an example usage of an img tag:

	<img src="cat.png" alt="Picture of a cute cat.">
Picture of a cute cat. ๐Ÿ˜๐Ÿ˜๐Ÿ˜
Picture of a cute cat. ๐Ÿ˜๐Ÿ˜๐Ÿ˜

The src attribute in img tags works essentially like the href attribute on a tags. They can have an absolute or relative path. In this case, we are linking to the relative file cat.png to display.

Image Attributes

The alt attribute is for alternate text. You can describe what the image is about for accessibility reasons. It provides helpful information for those who cannot or choose not to see the image.

Another set of attributes that might be helpful is the width and height attributes. They take the size of the image as their values and it lets the browser allocate that much space on the page before the image actually loads. This helps prevent the page jumping around after the image loads.

    <img src="cat.png" alt="Picture of a cute cat." width="1000" height="667" />

Figures and Captions

There are times where you want to give your image a caption. You can accomplish this by nesting your image, along with a figure caption tag, figcaption inside a figure tag, like so:

	    <img src="cat.png">
	    <figcaption>Picture of a cute cat.</figcaption>

SVG Graphics

SVG stands for Scalable Vector Graphics, and it is a standard used to describe a graphic.

An SVG differs from a regular image file because an SVG file is simply describing a graphic. It is the browser's job to actually parse those instructions and render something on the page.

Creating an SVG requires the use of the svg tag. Here's an example of an SVG circle:

	<svg width="200" height="200">
		<circle cx="100" cy="100" r="75" stroke="red" stroke-width="5" fill="blue" />
An SVG circle.
An SVG circle.
  • HTML

After creating a new SVG, we used the circle tag to define a new circle with the following attributes:

  • cx: The X position of the circle's center.
  • cy: The Y position of the circle's center.
  • r: The length of the circle's radius.
  • stroke: The color of the stroke on the circle.
  • stroke-width: The thickness of the stroke on the circle.
  • fill: The color of the circle.

There some advantages to using an SVG graphic over a traditional image. Because they are meant to be scalable, they will look crisp at any resolution. They are written in plain text so they are easily editable using any text editor. Finally, because it doesn't take too much text to describe a simple graphic, they are very tiny compared to a similar graphic in a traditional image format.

As another example, here's a basic SVG rectangle, styled via the style attribute:

	<svg width="400" height="200">
		<rect x="25" y="25" width="300" height="100"
			  style="fill:rgb(100, 0, 100); stroke-width: 5; stroke: black;" />
An SVG rectangle.
An SVG rectangle.
  • HTML

In our next lesson, we will discuss how to work with tables and using them to display data.

Further Reading