Adding an SVG to a page

In this exercise, well add some SVG images to the Black Goose Bistro page. You will find everything in a directory called a8. This exercise has two parts: first, well replace the logo with an SVG version, and second, well add a row of social media icons at the bottom of the page.

Part I: Replacing the logo

1. Open index.html in a text editor. Just for fun, lets see what happens when you make the current PNG logo really large. Add width="500" height="500" to the img tag. Save the file and open it in the browser to see how blurry bitmapped images get when you size them larger. Yuck.

2. Lets replace it with an SVG version of the same logo by using the inline SVG method.

3. In the a8 folder, you will find a file called blackgoose-logo.svg. Open it in your text editor and copy all of the

   text (from ).

4. Go back to the index.html file and delete the entire img element (be careful not to delete the surrounding markup). Paste the SVG text in its place. If you look closely, you will see that the SVG contains two circles, a gradient definition, and two paths (one for the starburst shape and one for the goose).

5. Next, set the size the SVG should appear on the page. In the opening svg tag, add width and height attributes set to 200px each.

   Save the file and open the page in the browser. You should see the SVG logo in place, looking a lot like the

   old one.

6. Try seeing what happens when you make the SVG logo really big! Change the width and height to 500

   pixels, save the file, and reload the page in the browser. It should be big and sharp! No blurry edges like the

   PNG. OK, now put the size back to 200 200.

Part II: Adding icons

7. Next were going to create a footer at the bottom of the page for social media icons. Below the Location &

   Hours section, add the following (the empty paragraph is where well add the logos):

   Please visit our social media pages

8. Use the img element to place three SVG icons: twitter.svg, facebook.svg, and instagram.svg. Note that they are located in the icons directory. There are also icons for Tumblr and GitHub if youd like extra practice. Heres a

   head start on the first one:

9. Save the file and open it in the browser. The icons should be there, but they are huge. Lets write a couple of style rules to make the footer look nice. We havent done much with style rules yet, so just copy exactly

what you see here inside the style element in the head of the document:

footer { border-top: 1px solid #57b1dc; text-align: center; padding-top: 1em; } footer img { width: 40px; height: 40px; margin-left: .5em; margin-right: .5em; }

10. Savethefileagainandopenitinthebrowser.