HTML and CSS Reference
SVG for Web
Fill color of layer
converted to variable
Figure 9-16: The original AI fi le is transformed into an SVG format with variable fi ll color.
h e Param.js and .svg i les must be in the same folder as the HTML5 page, just as
external CSS3 and graphic i les are expected to be either in the same folder as the HTML5
that calls them or in the path specii ed by the HTML5 code. h e best part, though, is that
designers and developers can focus on the HTML5 tags while Adobe Illustrator CS5 takes
designers can use vector graphics and have dynamic features in their AI creations.
TAKE THE WHEEL
h is i rst exercise is a Web treasure hunt. You can i nd a lot of free tools on the Web that can
be used to alter the size of a graphic i le — both in terms of dimensions and number of bytes
in the image. Even if you have a tool like Adobe Photoshop or Microsot Paint, go i nd an
application on the Web that works on your computer. (You can i nd several if you want.)
Take an existing graphic i le that is not in JPEG, PNG, or GIF format. For example, i nd
a graphic with a .tif or .tiff extension. (It can be a digital photograph or a drawn
graphic — or some combination of both.) h en do the following:
1. Convert the i le to JPEG, PNG, and GIF format.
Now you have four i les — the original and three Web formats.
2. Make a second copy of all Web graphics, naming the second one so that it indicates it
will be low quality.
For example, if you have a i le named car.jpg , copy it and name the second copy
3. Using the image application you found on the Web, create the highest- and lowest-
quality i le for each of the three i le types.