The document discusses different ways to add images to web pages, including SVG images. It describes several image formats appropriate for the web (PNG, JPEG, GIF, SVG, WebP) and explains how to use the <img> element to embed images with the required src and alt attributes. It also covers using the <img>, <object>, and <svg> elements to add SVG images to a page, with pros and cons of each approach. Inline SVG is demonstrated with an example pizza SVG graphic pasted directly into the HTML.
The document discusses different ways to add images to web pages, including SVG images. It describes several image formats appropriate for the web (PNG, JPEG, GIF, SVG, WebP) and explains how to use the <img> element to embed images with the required src and alt attributes. It also covers using the <img>, <object>, and <svg> elements to add SVG images to a page, with pros and cons of each approach. Inline SVG is demonstrated with an example pizza SVG graphic pasted directly into the HTML.
The document discusses different ways to add images to web pages, including SVG images. It describes several image formats appropriate for the web (PNG, JPEG, GIF, SVG, WebP) and explains how to use the <img> element to embed images with the required src and alt attributes. It also covers using the <img>, <object>, and <svg> elements to add SVG images to a page, with pros and cons of each approach. Inline SVG is demonstrated with an example pizza SVG graphic pasted directly into the HTML.
The document discusses different ways to add images to web pages, including SVG images. It describes several image formats appropriate for the web (PNG, JPEG, GIF, SVG, WebP) and explains how to use the <img> element to embed images with the required src and alt attributes. It also covers using the <img>, <object>, and <svg> elements to add SVG images to a page, with pros and cons of each approach. Inline SVG is demonstrated with an example pizza SVG graphic pasted directly into the HTML.
SVG is a vector format. The img Element <img src="" alt="">
• Embed images on the page with the empty img element.
• The src and alt attributes are required.
• img can be used for PNG, JPEG, GIF, and SVG.
NOTE: Special markup is recommended for experimenting with cutting-
edge image formats like WebP. The img Element (cont’d)
The img element tells the browser to make a server request for the image and display it in its place:
<p>This summer, try making pizza <img src="pizza.png" alt="">
on your grill.</p> The src attribute
<img src="/images/icon/next.png" alt="Next">
• The value is the location (URL) of the image file.
• Use the relative pathname conventions to point to the image
on the server.
PERFORMANCE TIP: Take advantage of caching (temporary storage).
For the same image used repeatedly, using the same pathname reduces the number of calls to the server. The alt Attribute <p> If you're <img src="/images/smiley.png" alt="happy"> and you know it, clap your hands.</p>
• The alt attribute provides
alternative text for those who are not able to see it.
• It is required for every img
element in order for the HTML to be valid.
• It is used by screen readers,
search engines, and graphical browsers when the image fails to load. Alternative Text Tips
• Alternative text (alt text) should convey the same information and function as the image.
• If the image is purely decorative and shouldn’t be read aloud, include
the alt attribute with an empty value:
<img src="flowers.svg" alt="">
• Consider what the alt text would sound like when read aloud by a screen reader. Is it helpful or a hindrance?
• When an image is used as a link, the alt text serves as the linked text. Write what you’d want the link to say, don’t just describe the image.
• Avoid starting alt text with “An image of” or “Graphic of”. width and height Attributes <img src="flowers.svg" alt="" width="120" height="160">
• The width and height attributes set the dimensions of the image on the page in number of pixels.
• They help the browser maintain space for the image in the layout while the files load.
• Don’t use width and height attributes if you are sizing the image with style sheets or if the size changes in a responsive layout.
• If the attribute values do not match the dimensions of the image,
the image will resize and may be distorted or blurry. Adding SVG Images
SVG images are unique:
• SVG is a vector format, made up of shapes and paths.
• Those shapes and paths are described in a text file using the Scalable Vector Graphic markup language.
• The elements in an SVG can be styled with CSS and scripted
for interactivity.
• Because they are vector, SVGs can resize with no loss of
quality. SVG Example Compare the SVG source to the image. The svg element contains a rectangle (rect element) and a text element:
<rect width="300" height="180" fill="purple" rx="20" ry="20"/> <text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72"> hello! </text> </svg> Adding SVG to a Page
There are several ways to add an SVG image to a web page:
• <img> element
• <object> element
• <svg> element directly in HTML (inline SVG)
Adding SVG with the img Element
You can add an .svg file to the page with the img element:
<img src="/images/circle.svg" alt="">
PROS: • Easy and familiar • Universally supported
CONS: • Can’t manipulate the SVG with scripts or styles. • The SVG can’t contain any external resources such as images or fonts. Embedding SVGs with object The content of the object element is a fallback text or image that displays if the SVG is not supported: <object type="image/svg+xml" data="pizza.svg"> <img src="pizza.png" alt="pizza"> </object>
PROS: • SVG can be scripted and use eternal files (images and fonts).
CONS: • You can’t change styles with the same CSS used for the document. • May be buggy in some browsers. Inline SVGs with the svg Element You can paste the content of the SVG text file directly into the HTML source. This is called using the SVG inline.
PROS: • Can take full advantage of scripting and styling the SVG because the elements in the SVG are part of the DOM for the document.
CONS: • Code can get extremely long and unwieldy. • Harder to maintain images embedded in the source • Can’t take advantage of caching repeated images • Not universally supported Example of an Inline SVG
