Images on the internet are great. We use them for cat gifs, to showcase what we ate for breakfast, and, of course, for 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.">
src attribute in
img tags works essentially like
href attributes on
a tags. They can be absolute or relative paths. In this case, we are linking to a relative file named cat.png to display.
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
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:
<figure> <img src="cat.png"> <figcaption>Picture of a cute cat.</figcaption> </figure>
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.
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" /> </svg>
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
<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;"></rect> </svg>
In our next lesson, we will discuss how to work with tables and using them to display data.