Building the User Interface by Using HTML5: Text, Graphics ... - server

42 | Lesson 2Figure 2-165. Press F12 again. An error message appears, stating that it doesn’t recognize aproperty or method. Close the error message. The browser window displays thefallback text, as shown in Figure 2-16.Text displays if the browserdoesn’t support canvasLICENSED PRODUCT NOT FOR RESALE6. Leave the file, editing tool, and Web browser open if you’re continuing immediatelyto the next exercise.✚ MORE INFORMATIONFor more information on the canvas element, visit the Microsoft HTML5 Graphics Web page at http://bit.ly/M8ZNkf.The HTMLCenter Web site at http://www.htmlcenter.com/blog/rgb-color-chart/ lists RGB color codes.Creating Graphics with SVGScalable Vector Graphics (SVG) is a language for describing 2D graphics inExtensible Markup Language (XML). XML is a cousin to HTML, and has played animportant part of HTML 4.01 Web pages. SVG technology is not new, but HTML5now enables SVG objects to be embedded in Web pages without using the or tags. (All types of SVG graphics are referred to as objects, and SVGloads into the DOM.)CERTIFICATION READYWhat type of objects canyou create with SVG?2.2The main purpose of SVG, as its name implies, is to create scalable vector graphic shapes,but you can create images and text as well. Much like canvas, you can apply solid colors,gradients, and pattern fills to SVG objects, and copy and clone objects. You can also useSVG anywhere you would insert a PNG, JPG, or GIF. With SVG, you provide drawinginstructions rather than an image file.One of the major benefits of SVG is its flexibility. Its vector graphic changes size to fit thescreen on which it’s displayed, whether the screen is on a 32-inch computer monitor or amobile device like a smartphone. Because only the XML that describes the SVG graphic istransmitted, even large images don’t require a lot of bandwidth. This makes SVG handy foruse as a Web page background without having to use the repeat property. (Most solid Webpage backgrounds are actually a thin line that’s repeated using a CSS style.) In addition, SVGcan be indexed by search engines because it’s created by XML.