- Hour 3: Viewing SVG
- What Environments Can View SVG?
- Implementation
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Implementation
Knowing that there are several viewers for displaying content in SVG, we now need to learn how to get our SVG content to these viewers. If you have the Adobe SVG Viewer installed, you can open an SVG file directly in the browser to see it in action. However, at the present time, the bulk of any commercial development will require your SVG content to reside within the framework of an HTML page.
To include SVG content just as you would any other image within an HTML page, you will need to use the embed element. Although technically not a W3C-approved method for including SVG content, the embed element offers the only sure method for having your SVG image appear in SVG Viewer–supported browsers. The simplest way to include your SVG content is as follows, where filepath refers to the directory location of the SVG file in relation to the HTML file and filename refers to the name of your document:
<html> <head> <title>Embedding SVG</title> </head> <body bgcolor="white"> <embed src="filepath/filename.svg"/> </body> </html>
You are able to further define the embed element by naming the graphic (the attribute value graphic_name), giving it precise dimensions (the attribute values x and y, where each attribute is defined by a number of pixels), labeling the image type (which should always be image/svg+xml), and providing an URL for the Viewer download.
<embed src="filepath/filename.svg" name="graphic_name" width="x" height="y" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
Including the pluginspage property will help accommodate users who do not yet have the plug-in installed. Rather than being faced with a confusing "plug-in not found" message, their browser will direct them to the most current SVG Viewer download page.
For many of the examples in this book, you are likely to view the SVG documents locally (off your hard drive, as opposed to a Web server). However, by the end of this book, you'll hopefully be creating awesome examples of SVG to show the world. In that case, you might need to know a couple of items about the configuration of your Web server.
It is important to note the MIME types your Web server will need to have configured to display SVG properly. MIME types tell your server, and subsequently the viewer's browser, how different types of content are handled. As every server and platform is a bit different, the method for adding these MIME types will vary. If you are unsure, please check the support of your hosting provider. The proper settings for your server are as follows:
Extension: .svg
MIME type: image/svg+xml
Extension: .svgz
MIME type: image/svg+xml
You'll notice that we added an extension with the name svgz in this last setting. SVGZ is the compressed format for SVG, which you will cover in Hour 21, "Using Adobe Illustrator to Create Artwork." Although you will not need to configure MIME types to complete the exercises in this book (as you can work with these examples on your own computer, without the need for a Web server), you should be aware of these settings before deploying your content online. In many cases, you will not have permission to add or modify MIME types on your server, but your server's administrator may be willing to make the appropriate changes.
To view all the examples in this book, create the following document (named "index.html"), which will embed all the work you'll be creating throughout the remaining hours. Just be sure to replace filepath/filename.svg with the directory path and name of the SVG file you save.
Listing 3.1 SVG Can Be Contained within an HTML Document Using the embed Element
01: <html> 02: </head> 03: <title>Embedding SVG</title> 04: </head> 05: <body bgcolor="white"> 06: <embed src="filepath/filename.svg" name="SVG News Center" 07: width="500" height="300" type="image/svg" 08: pluginspage="http://www.adobe.com/svg/viewer/install/"/> 09: </body> 10: </html> 11: + svg
By viewing all your examples within this HTML framework, you'll be seeing your code just as anyone else would. As will be mentioned several times throughout this book, it is easier to code correctly the first time than it is to come back later and clean everything up.