HTML and CSS Reference
In-Depth Information
h e (X) in Figure 9-15 indicates that the Fill is a variable that can be changed with HTML5. In
order to access the feature to be changed (the i ll color in this case), AI generates code for the
SVG i le format that can be viewed and/or saved during the conversion from an
.ai
i le to
an
.svg
i le. During the conversion process, the designer clicks the Show SVG code button,
and i nds the layer name of the variable feature. In this example, the specii c SVG code was
the following:
<
g id
=
”Button”
>
<
ellipse fill
=
”param(SVGID_2__FillColor) #A35563”
cx
=
”50”
cy
=
”50”
rx
=
”40”
ry
=
”40.5”
/>
</
g
>
h e id with the value
Button
is from the name of the layer in AI. h e
param
name value is
SVGID_2__FillColor
, which is automatically generated by AI.
In order to work the SVG information into an HTML5 program, the
.svg
i le must be
referenced in an
<object>
element and the parameter in a
<param>
tag. h e JavaScript i le
Param.js
is also automatically generated by AI and must be loaded in the
<head>
con-
tainer in order for Firefox to correctly parse the code. h e following code (
AI2svg.html
in
this chapter's folder at
www.wiley.com/go/smashinghtml5
) works with Firefox, Safari,
Chrome and Opera browsers but with some dif erences in display.
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
script src
=
”Param.js”
></
script
>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
AI
->
SVG
</
title
>
</
head
>
<
body
>
<
article
>
<
section
>
<
figure
>
<
object type
=
”image/svg+xml”
data
=
”butnBkground.svg”
>
<!--
No param tags
-->
</
object
>
</
figure
>
<
figure
>
<
object type
=
”image/svg+xml”
data
=
”butnBkground.svg”
>
<
param name
=
”SVGID_2__FillColor”
value
=
”#cc0000”
/>
</
object
>
</
figure
>
</
section
>
</
article
>
</
body
>
</
html
>
195
In order to illustrate the sequence of processes, Figure 9-16 shows the original AI i le and the
results of the output in Opera when the page
AI2svg.html
loads.
