IMAGES - HTML5 - page 183

< body style = ”background-color:#BAD9CB” >
<!-- Safari , Chrome and Opera -->
< img src = ”logo500x400.svg” width = 100 height = 80 >
< img src = ”logo500x400.svg” width = 200 height = 160 >
< img src = ”logo500x400.svg” width = 300 height = 240 >< br >
< img src = ”logo500x400.svg” width = 500 height = 400 >
<!-- Firefox and Opera
< object width = 100 height = 80 type = ”image/svg+xml” data = ”logo500x400.svg” ></ object >
< object width = 200 height = 160 type = ”image/svg+xml” data = ”logo500x400.svg” ></ object >
< object width = 300 height = 240 type = ”image/svg+xml” data = ”logo500x400.svg” ></
object >< br >
< object width = 500 height = 400 type = ”image/svg+xml” data = ”logo500x400.svg” ></ object >
-->
</ body >
</ html >
At the time of this writing, Firefox did not use the <img> tag with .svg i les but required the
<object> tag instead. h e Opera browser worked with both formats. Figure 9-10 shows the
results. As you can see, the logo in Figure 9-10 looks the same no matter what size it's dis-
played in.
187
Figure 9-10: An SVG image changed by changing attributes with no distortion.