Graphic user interfaces A web page is a graphic user interface (GUI) through which a user navigates a website. HTML and CSS provide the basis for the graphic design, while JavaScript adds custom logic and business rules to the elements on the page to improve the quality of the interaction. Working with graphics in JavaScript In an HTML document, <img/> tags are used to display image files and <svg> tags are used to display vector images. JavaScript can be used to modify the properties of these graphic elements in response to
user interaction. The <canvas> HTML element allows JavaScript to draw graphics directly to the screen. JavaScript also has an extensive library of frameworks (see pp.284–85) that can be imported and employed to produce complex graphic applications.
Scalable Vector Graphics (SVG) SVG is a format that describes two-dimensional graphics in code. These graphics are then drawn by the browser on the screen. SVGs have a small file size and can be scaled to any size without losing quality. They can be drawn and exported from graphic softwares, such as Adobe Illustrator or Gimp. Graphics in SVG can also be styled with CSS and indexed by search engines.
Draw a company logo in SVG In this example, you can draw a rectangle shape for the background using the <rect> tag. The <text> tag can be used to draw the logo text. You can modify the final drawing with the style attributes.
Draws a red-coloured rectangle with a grey border
<svg width="200" height="100"> <rect style="stroke:grey;stroke-width:10px;fill:red;" x="0" y="0" height="100" width="200" /> <text fill="white" font-size="30" font-family="Verdana" x="20" y="60">SVG LOGO</text> </svg> The closing </svg> tag
Draws the logo text in front of the rectangle
Uses CSS style attributes to define SVG elements
