SVG & PDF We met SVG already with a pdf transformated xml document: page

Scalable Vector Graphics Scalable Vector Graphics (SVG) makes it possible to specify, using text, graphical images that appear on the page. For example, where a traditional graphic would need to specify every pixel of a rectangle, an SVG simply states that the rectangle exists, and specifies its size, position, and other properties. The advantages are many, including the ability to easily generate graphics (such as graphs and charts) from database information, and the ability to add animation and interactivity to graphics. You can download SVG Player from Adobe site. Player is also installed when Adobe reader is installed.

SVG and XML Scalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control. SVG is data-driven graphics because it is written in XML, SVG content can be linked to back-end business processes such as e-commerce systems, corporate databases, and other rich sources of real- time information.

Rasterized graphics In a rasterized image, such as a GIF or JPEG image, the file contains a color value for each and every pixel in the image the ability to faithfully recreate photographic images to disMap an image at different sizes, this usually results in jagged edges where it has had to interpolate or guess at values for pixels that don't exist in the original image the binary nature of rasterized file formats make it difficult to dynamically create images based on database information, and animation is mostly limited to "flip book" type animations, with individual images disMaped in rapid succession

Vector Graphics Vector graphics specifies the instructions needed to determine the values for each pixel, instead of the values themselves. Rather than providing the pixel values for a circle one inch in diameter, a vector graphic instead tells to create a circle one inch in diameter using vector graphics the browser simply knows that it has to produce a circle image is easily scalable without having to perform the interpolations of a rasterized image the instructions received are easily tied into external sources such as applications and databases +++ to animate the image, it is simply received instructions on how to manipulate properties

SVG Application: Dynamic, Scalable Vector Graphics The overall application involves the following pieces: The XML source document: This document defines the initial characteristics of the SVG image. It can be a static XML file or it could just as easily be XML generated out of a database. The XSLT stylesheet: Dynamically turning an XML document potential deck plans into SVG images of those plans can be easily accomplished using XSLT transformations. The application can also use different stylesheets to generate different presentations. The SVG image: This is the image that will ultimately be generated, and provides the disMap the user sees. An XML document itself, it can be manipulated using XML programming techniques such a the Document Object Model (DOM). The HTML container document: To disMap an SVG image directly in a browser, you generally need an HTML page that embeds that image within it. In this case, the HTML document also contains the Javascript code that manipulates that SVG image. The overall application involves the following pieces: The XML source document: This document defines the initial characteristics of the SVG image. It can be a static XML file or it could just as easily be XML generated out of a database. The XSLT stylesheet: Dynamically turning an XML document potential deck plans into SVG images of those plans can be easily accomplished using XSLT transformations. The application can also use different stylesheets to generate different presentations. The SVG image: This is the image that will ultimately be generated, and provides the disMap the user sees. An XML document itself, it can be manipulated using XML programming techniques such a the Document Object Model (DOM). The HTML container document: To disMap an SVG image directly in a browser, you generally need an HTML page that embeds that image within it. In this case, the HTML document also contains the Javascript code that manipulates that SVG image.

Features of the Application Creating the initial SVG imageCreating the initial SVG image example 1example 1 Using JavaScript to scroll the imageUsing JavaScript to scroll the image example 2, 4example 2, 4 Linking from an SVG element to another documentLinking from an SVG element to another document example 3example 3 Zooming in and out of the image Zooming in and out of the image example 4, 5, 6example 4, 5, 6 Creating the initial SVG imageCreating the initial SVG image example 1example 1 Using JavaScript to scroll the imageUsing JavaScript to scroll the image example 2, 4example 2, 4 Linking from an SVG element to another documentLinking from an SVG element to another document example 3example 3 Zooming in and out of the image Zooming in and out of the image example 4, 5, 6example 4, 5, 6

Example 1: Creating a SVG Document Rectangular Viewport Text Play a svg image.

Ex1: Document Structure The namespace declaration specifies that SVG elements are in the SVG namespace and are to be written with no namespace prefix. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " An SVG image starts with an svg root element: <svg xmlns=" width="1050px" height="200px" viewBox=" " id="CabinInfo"> The overall SVG image is 1050 pixels(w) x 200 pixels(h), with a viewport of 350 pixels wide by 200 pixels high, as shown by the viewBox attribute. The first and second values of the viewBox attribute indicate that the top left of the viewport is at (0,0). The third and fourth values in the viewBox attribute indicate that the bottom right of the viewport is located at (350,200). Any part of the image not within this viewport is invisible to the user. Each Box is 350 pixels wide by 200 pixels high, so only one box fits into the viewport at the outset. Viewport is the part of the SVG image that is visible.

Ex1: SVG Image A cabin are prepresent as an appropriately sized rectangle. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " <svg xmlns=" width="1050px" height="200px" viewBox=" " id="CabinInfo"> <rect id="Cabin701Rect" width="100%" height="100%" fill="#CCCCFF" stroke=”red" stroke-width=”7"/> <text id="Cabin701Label" font-size="20pt" x="55px" y="100px" fill="black">Cabin 701 <text id="Cabin701Class" font-size="14pt" x="55px" y="150px" fill="black">A2 <text id="Cabin701Deck" font-size="14pt" x="55px" y="180px" fill="black">Deck 7

Ex1: HTML Container Document The SVG image is embedded using the non-official, but very useful, embed element. The embed element is, at present, the most commonly used element for embedding SVG images in HTML Web pages because of limitations in the browser implementations of the official object element. Notice that the type attribute of the embed element specifies that the image to be embedded is of type image/svg+xml, so the browser knows what to do with it.

Example 2: Image Transformation Create three cabins and show the middle one in the viewport. Transformed image in viewport Cabin 701 Cabin 702 Cabin 703

Ex2: Image with Nested elements nested svg element The code for each cabin is contained in a nested svg element, with the x and y attributes determining the position of that element. The SVG code for each of the three boxes follows the same basic pattern: <svg xmlns=" width="1050px" height="200px" viewBox=" " id=”CabinInfo"> <rect id="Cabin701Rect" width="100%" height="100%" fill="#CCCCFF" stroke="black" stroke-width="5"/> <text id="Cabin701Label" font-size="20pt" x="55px" y="100px" fill="black">Cabin 701 <text id="Cabin701Class" font-size="14pt" x="55px" y="150px" fill="black">A2 <text id="Cabin701Deck" font-size="14pt" x="55px" y="180px" fill="black">Deck </svg>

Ex2: Transformation The value of the transform attribute is a, which is defined as a list of transform definitions, which are applied in the order provided. translate( [ ]), which specifies a translation by tx and ty. If is not provided, it is assumed to be zero. translation scale( [ ]), which specifies a scale operation by sx and sy. If is not provided, it is assumed to be equal to. scale rotate( [ ]), which specifies a rotation by degrees about a given point. rotation skewX( ), which specifies a skew transformation along the x-axis. skewY( ), which specifies a skew transformation along the y-axis. For example, </g> (See chapter 7.6 W3C SVG Recommendation,

Ex2: Container Element The g element acts as a container, so any instructions, such as the translate() transformation, apply to any elements within it. The end result is that the transformation moves all three cabinss 350 pixels to the left, leaving the middle cabin showing in the viewport. <svg xmlns=" width="1050px" height="200px" viewBox=" " id="CabinInfo"> <rect id="Cabin701Rect" width="100%" height="100%" fill="#CCCCFF" stroke="red" stroke-width="7"/> <text id="Cabin701Label" font-size="20pt" x="55px" y="100px" fill="black">Cabin 701 <text id="Cabin701Class" font-size="14pt" x="55px" y="150px" fill="black">A2 <text id="Cabin701Deck" font-size="14pt" x="55px" y="180px" fill="black">Deck

Example 3: Links Add links from each cabin on the first floor to the deck plan for the 6th deck.

… <text id="Cabin701Deck" font-size="14pt" x="55px" y="180px" fill="black">Deck 7 <text id="Cabin701Link" font-size="8pt" x="155px" y="50px" fill="black">Click to view the 6th Deck … Ex3: xlink Tag Linking in SVG is similar to linking in HTML, in that it uses an a tag and an href attribute. But SVG actually refers back to the XLink recommendation, so the document must declare the xlink namespace and use it for the href attribute. Otherwise, the link works just like a normal HTML link, as when the SVG image is embedded in the HTML page.

Example 4-> JavaScript If You are not keen on programming You can continue with the labnotes!!

Example 4: Scaling and Moving Moving the viewport: Rather than moving the image, you can simply move the viewport so that it is over the part of the image you wish to view, much like moving a magnifying glass over a page in the phone book. Because the actual boundaries of the viewport are fixed in place by the browser, it appears to the user as though the image itself is moving, but it's actually the viewport moving with respect to the image. Scaling the image: In addition to moving the image, you can also make it larger or smaller to determine the area of the picture that is still visible through the viewport, which remains the same size. Move the viewport in order to see different parts of the image and scale the image to see more or less of it.

Example 4: Scaling and moving Moving the viewport: Rather than moving the image, you can simply move the viewport so that it is over the part of the image you wish to view, much like moving a magnifying glass over a page in the phone book. Because the actual boundaries of the viewport are fixed in place by the browser, it appears to the user as though the image itself is moving, but it's actually the viewport moving with respect to the image. Scaling the image: In addition to moving the image, you can also make it larger or smaller to determine the area of the picture that is still visible through the viewport, which remains the same size.

Ex4: User Interface input {width: 145px;} Current room to edit is: <input type="button" onclick="goLeft=true; panDoc()" value="<< Scroll Left" /> <input type="button" onclick="goRight=true; panDoc()" value="Scroll Right >>" /> input button style The document also has a span element to tell the user which room is currently active. Scripting determines the contents of the element. input buttons

Ex4: Global Variables The htmlObj variable is used later as a reference to the embed element that accesses the SVG image. The htmlObj variable uses the getElementById() method of the HTML document to identify the embed element. Finally, the script associates the SVGRoot variable with the document element of the SVG image. The SVGDoc variable represents the root node of the SVG image, the main svg element. The SVGRoot variable is used to represent the document element of the SVG image. The viewBox variable is used to hold the value of the viewBox attribute on the document element svg element. Cabin map Ex4 // set global variables var htmlObj, SVGDoc, SVGRoot, viewBox, goLeft, goRight, innerSVG; var currentSize, currentPosition, currentCabinId, currentCabinLabel; var svgns = " function Initialize(){ htmlObj = document.getElementById("CabinHere"); SVGDoc = htmlObj.getSVGDocument(); SVGRoot = SVGDoc.documentElement; } // end function Initialize() All of this information is needed to scroll the image.

Ex4: Current Position The script assigns the viewBox variable the value of the viewBox attribute of the svg document element. The SVGRoot element represents the main svg element of the image, so the getAttribute() method works just as it would on any other XML document, retrieving the string value of the viewBox attribute. viewBox is actually a set of space- delimited values, of which you only want the first. So the script creates an array variable, viewVals, by using the ECMAScript split() function to extract each component of the value The parseFloat() method then converts the string value 0 so that it can be used as a numeric value 0. Now the current position is known and it can be changed. function panDoc(evt){ viewBox = SVGRoot.getAttribute('viewBox'); var viewVals = viewBox.split(' '); currentPosition = parseFloat(viewVals[0]); } // end function panDoc()

Ex4: Moving the Viewport If goLeft is true, then panDoc() decreases currentPosition's value by 175, if the value is greater than This prevents the SVG image from scrolling further to the left than the left edge of Cabin 701. The goLeft variable is then assigned the value false. Similarly, if you are moving to the right. It's the viewport moved, so the new value of the current position has to go back into the viewBox attribute. Once the new value has been added back into the array, the join() function puts the altered value of the viewBox variable back together again. The value is then assigned to the viewBox attribute of the svg element. The SVG image appears to be scrolled 175 pixels (1/2 of the Cabin size) in the desired direction. function panDoc(evt){ viewBox = SVGRoot.getAttribute('viewBox'); var viewVals = viewBox.split(' '); currentPosition = parseFloat(viewVals[0]); if (goLeft == true){ if (currentPosition > -350) { currentPosition = currentPosition - 175; } goLeft = false; } if (goRight == true){ if (currentPosition < 350) { currentPosition = currentPosition + 175; } goRight = false; } viewVals[0] = currentPosition; SVGRoot.setAttribute('viewBox', viewVals.join(' ')); } // end function panDoc() It's also possible to pan an image in the Adobe SVG viewer by holding down the ALT key, pressing down the left mouse button, and moving the mouse.

Ex4: Zooming The SVGRoot variable has already been assigned the svg document element of the SVG image in the Initialize() function, and when an SVG image is first loaded the value of the currentScale property of the SVGRoot variable is 1.0. function zoomOut(){ if (SVGRoot.currentScale > 0.3){ SVGRoot.currentScale = SVGRoot.currentScale * 0.67; } } // end function zoomOut function zoomIn(){ if (SVGRoot.currentScale < 5){ SVGRoot.currentScale = SVGRoot.currentScale * 1.5; } } // end function zoomIn It's also possible to zoom an image in the Adobe SVG viewer by holding down the Ctrl key, pressing down the left mouse button and mouse right button gives a menu too.

Example 5: Show Current Cabin Show current cabin Indicate if not exactly scrolled

Ex5: Show Initial Cabin function setCurrentCabin(){ viewBox = SVGRoot.getAttribute('viewBox'); var viewVals = viewBox.split(' '); currentPosition = parseFloat(viewVals[0]); if (currentPosition % 350 != 0) { currentCabinId = null; currentCabinLabel = "None. Please scroll to desired cabin."; } else if (currentPosition / 350 == 0) { currentCabinId = "Cabin702"; currentCabinLabel = "Cabin 702"; } else if (currentPosition / 350 == -1) { currentCabinId = "Cabin701"; currentCabinLabel = "Cabin 701"; } else if (currentPosition / 350 == 1) { currentCabinId = "Cabin703"; currentCabinLabel = "Cabin 703"; } document.getElementById("currentCabin").innerHTML = currentCabinLabel; } When the page is initialized: function Initialize(){ htmlObj = document.getElementById("CabinHere"); SVGDoc = htmlObj.getSVGDocument(); SVGRoot = SVGDoc.documentElement; setCurrentCabin(); } // end function Initialize() Within the HTML document, a span element has an id value of currentRoom :... Current room to edit is:...

Ex5: Set and Show Cabin when Moving B: When the cabin is moved: function panDoc(evt){ …. viewVals[0] = currentPosition; SVGRoot.setAttribute('viewBox', viewVals.join(' ')); setCurrentCabin(); } // end function panDoc() Once the viewport has been moved, you need to re-set the current cabin to the new value.

Example 6: Change Image property Red color means ”not in use” Test also proper position

Example 6: Change Cabin Backcolor function toNo(){ if (currentCabinId == null) { alert("Ambiguous cabin position! \n Please align a cabin "+ "precisely before attempting to change cabin not in use."); } else { SVGDoc.getElementById(currentCabinId+"Rect").setAttribute("fill", "#FF0000"); } function toNormal(){ if (currentCabinId == null) { alert("Ambiguous cabin position! \n Please align a cabin "+ "precisely before attempting to cabin back in use."); } else { SVGDoc.getElementById(currentCabinId+"Rect").setAttribute("fill", "#CCCCFF"); } At this stage, the background color is red but everything else remains the same.

Too Complex Continue with simpler Lab Note tasks.