Lesson 2: Using scalable vector graphics CHAPTER 12 501
FIGURE 12-25 The <img> element automatically resizing the <svg> element when the HTML page is
resizedQuick check
■■What is the purpose of the viewBox attribute?Quick check answer
■■The viewBox attribute describes the part of the drawing that you want the user
to see.Lesson summary
■■The <svg> element is used to create and display scalable vector graphics (SVG).
■■SVG is XML-based, and the contents of the <svg> element contain the commands that
compose the drawing in XML format. The <svg> element can be placed in an .svg file.
■■Use the <path> element to create complex shapes. The path contains a list of com-
mands to create a shape. Each command is represented as an uppercase or lowercase
letter. Uppercase indicates that the coordinates are absolute; lowercase indicates that
the coordinates are relative. The <circle> element is used to draw a circle. To include an
external .svg file on an HTML page, use the <img> element and set the src element to
the location of the .svg file.
■■To make the <svg> element automatically scale when the HTML page is resized, set the
height and width attributes on the <svg> element to 100 percent and add a viewBox
attribute that describes the view area of the drawing. Finally, add a style rule to your
<img> element that sets its width to 100 percent.