Chapter: Internet & World Wide Web HOW TO PROGRAM - Multimedia: Audio, Video, Speech Synthesis and Recognition

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Scalable Vector Graphics (SVG)

The Scalable Vector Graphics (SVG) markup language describes vector graphic data for JPEG, GIF and PNG formats) such that they may be distributed over the Web efficiently.

Scalable Vector Graphics (SVG)


The Scalable Vector Graphics (SVG) markup language describes vector graphic data for JPEG, GIF and PNG formats) such that they may be distributed over the Web efficiently. The GIF, JPEG and PNG file formats store images as bitmaps. Bitmaps describe the color of every pixel in an image and can take quite a bit of time to download. Due to the method in which bitmap information is stored, images of these file types cannot be enlarged or re-duced without a loss of image quality.


Vector graphics are produced by mathematical equations which describe graphical infor-mation in terms of lines, curves, etc. Not only do images rendered by vectors require less bandwidth, but these images also can be easily scaled and printed without loss of image clarity. Different graphic formats are discussed in detail in Chapter 3, Photoshop® Elements.



    <?xml version = "1.0"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<!-- Fig. 33.16: example1.html -- >

<!-- embedding SMIL with RealPlayer -- >

    <html xmlns = "">


      <title>Embedding SMIL with Real Player</title>



      <div style = "text-align: center">

<embed src = "example1.smil"

controls = "ImageWindow"

type = "audio/x-pn-realaudio-plugin"

width = "280" height = "300" autostart = "true">




Fig. 33.16  Using the RealPlayer 8 plug-in to display a SMIL document

Another advantage to using SVG to produce Web graphics is that SVG is an applica-tion of XML. This relationship makes it possible for SVG documents to be scripted, searched and dynamically created.


Both Internet Explorer and Netscape Communicator intend to provide native support for SVG in the near future. Currently, Adobe provides a plug-in for Internet Explorer (Ver-sion 4.0 or higher for Windows and Version 5.0 for Mac) and for Netscape Communicator (Version 4.0 or higher for both Windows and Mac) that enables SVG documents to be directly rendered in those browsers. This plug-in is available free of charge from Adobe at


Figure 33.17 is an SVG document that displays some simple shapes in a browser. We use the Adobe plug-in to view the document in Internet Explorer.


<?xml version="1.0"?>

            <!-- Fig. 33.17: shapes.svg      -->

            <!-- Simple example of SVG  -->


            <svg viewBox = "0 0 300 300" width = "300" height = "300">


            <!-- generate a background -->


            <path style = "fill: #eebb99"

            d = "M0,0 h300 v300 h-300 z" />



            <!-- some shapes and colors -->



            <circle style = "fill: green; fill-opacity: 0.5"

            cx = "150" cy = "150" r = "50" />


            <rect style = "fill: blue; stroke: white"

            x = "50" y = "50" width = "100" height = "100" />


            <text style = "fill: red; font-size: 24pt"

            x = "25" y = "250">Welcome to SVG!</text>




Fig. 33.17  SVG document example


Line 6 contains the root element for the SVG document. Attribute viewBox sets the viewing area for the document. The first two numbers in the value are the x- and y-coordi-nates of the upper left corner of the viewing area, and the last two numbers are the width and height of the viewing area. Attribute width specifies the width of the image, and attribute height specifies the height of the image.


Element g groups elements of an SVG document. Lines 10–11 use element path to create a box. Attribute style uses CSS property fill to fill the inside of the box with the color #eebb99. Attribute d defines the points of the box. Property M specifies the starting coordinates (0, 0) of the path. Property h specifies that the next point is horizontal to the current point and spaced 300 pixels to the right of the current point (300, 0). Property v specifies that the next point is vertical to the current point and spaced 300 pixels below it (300, 300). Property h then places the point to the left by 300 pixels (0, 300). Property z sets the path to connect the first and last points, thus closing the box.


Lines 17–24 group three elements: a circle, a rectangle and a text element. Lines 17–18 create a circle with element circle. The circle has an x-axis center coordi-nate (attribute cx) of 150 pixels, a y-axis center coordinate (attribute cy) of 150 pixels and a radius (attribute r) of 50 pixels. The circle is filled blue, with 50% opacity.


Lines 20 –21 use element rectangle to create a rectangle. The rectangle’s upper left corner is determined using attributes x and y. Attribute width sets the width of the rect-angle, and attribute height sets the height of the rectangle.


Lines 23–24 create some text with element text. Place the text attributes x and y. The format of the text is defined using attribute style. In this case, the text is red with a font size of 24 points.


Figure 33.18 contains a more complex SVG image that simulates the Earth and Moon rotating around the Sun. This example uses SVG’s animation feature.


    <?xml version = "1.0"?>


    <!-- Fig. 33.18: planet.svg      -->

    <!-- Planetary motion with SVG -->


    <svg viewBox = "-500 -500 1000 1000">

    <g id = "background">

    <path style = "fill: black"

    d = "M -2000,-2000 H 2000 V 2000 H -2000 Z" />



      <circle id = "sun" style = "fill: yellow"

      cx = "0" cy = "0" r = "100" />


<animateTransform attributeName = "transform"

type = "rotate" dur = "80s" from = "0" to = "360"

repeatCount = "indefinite" />


<circle id = "earth" style = "fill: blue"

cx = "400" cy = "0" r = "40" />


<g transform = "translate( 400 0 )">

<circle id = "moon" style = "fill: white"

cx = "70" cy = "0" r = "10">

<animateTransform attributeName = "transform"

type = "rotate" dur = "20s" from = "360"

to = "0" repeatCount = "indefinite" />







Fig. 33.18  SVG document with animated elements


Lines 8–9 create a box for the background that is much larger than the viewable size. Attribute d has properties H and V that specify absolute coordinates for the path. Thus, the coordinates of the box are (-2000, -2000), (2000, -2000), (2000, 2000) and (-2000, 2000).


Lines 12–13 create a yellow circle with a radius of 100 pixels at coordinate (0, 0) to represent the Sun. Line 15 defines element g, which groups together the circles repre-senting the Earth and Moon. Lines 16–18 use element animateTransform, which changes the attribute of the parent element specified in attribute attributeName. Attribute type defines the property of the attribute that changes. The initial and final values of the transformation are set by attributes from and to. Attribute dur sets the time (i.e., 80 seconds) it takes to change from the initial to the final values, and attribute repeatCount sets the amount of times to perform this transformation. In our example, we rotate the group element from 0 degrees to 360 degrees in 80 seconds, repeating the rota-tion indefinitely (i.e., continuously).


Lines 20–21 create a blue circle with a radius of 40 pixels at coordinates (400, 0). When the group rotates, this circle’s center stays at a distance of 400 pixels from the origin

(0, 0).


Line 23 uses element g to group the circle element that represents the Moon. This element has attribute transform, which translates (shifts) the group element 400 pixels to the right, thus centering the group on the blue circle. For other transformations, see the SVG specification. The white circle (the Moon) on lines 24–25 has a child ani-mateTransform element on lines 26–28 that rotates the Moon 360 degrees counter-clockwise around the Earth every 20 seconds.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.