1 Using XSLT and XPath to Generate SVG Roger L. Costello XML Technologies.

Slides:



Advertisements
Similar presentations
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Advertisements

Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Lesson 15 Presentation Programs.
CHAPTER 20 CREATING SVG GRAPHICS. LEARNING OBJECTIVES How to embed a graphic stored within a.SVG file in an HTML page How to use the and tag pair to specify.
Iframes & Images Using HTML.
Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):
Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels.
1 The MITRE Using XSLT and XPath to Generate SVG Roger L. Costello XML Technologies.
“To make my meal in a box taste better, I decided to tweak the logo, rather than the ingredients. ” -Jarod Kintz ILLUSTRATOR.
1 Copyright (c) [2000]. Roger L. Costello. All Rights Reserved. Using XSLT and XPath to Transform XML Documents Roger L. Costello XML Technologies.
SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.
Text, Masks, and Live Effects – Lesson 41 Text, Masks, and Live Effects Lesson 4.
1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.
Graphics Standard Grade Computing. Graphics Package n A graphics package is another General Purpose Package. n It is used to draw pictures on the monitor.
Multimedia Elements – Text and Graphics. Text in Multimedia Applications Of all multimedia elements, text is the easiest to manipulate General guidelines:
Scalable Vector Graphics (SVG) Aug’10 – Dec ’10. Introduction Scalable Vector Graphics (SVG), an extremely versatile 2-D graphics format designed primarily.
Using XSLT and XPath to Enhance HTML Documents Reference: Roger L. Costello
Adobe InDesign CS5 – Illustrated Unit D: Working with Graphics.
Dedicated Vector and Bitmap editing software.
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Adobe Flash CS4 – Illustrated Unit B: Creating Graphics and Text.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Java Applets What is an Applet? How do you create.
Slides adapted from: Bjarne Stroustrup, Programming – Principles and Practice using C++ Chapter 12 A display model Hartmut Kaiser
UNIT 8 DRAWING WITH THE HTML5 CANVAS ELEMENTS AND FORMS.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
CIS 205—Web Design & Development Flash Chapter 1 Getting Started with Adobe Flash CS3.
Building the User Interface by Using HTML5: Text, Graphics, and Media Lesson 2.
Chapter 1 Review Images Links Images II Pictures and Extensions.
Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.
Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
HTML, Part Showing Pictures: The Image Tags Image Tag Format –src short for source –alt for text –Can use absolute or relative pathname.
School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics.
HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it.
Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Presented by Nassib Awad
Tutorial 1 Introducing Adobe Flash CS3 Professional
Image Representation. Objectives  Bitmaps: resolution, colour depth and simple bitmap file calculations.  Vector graphics: drawing list – objects and.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
SVG for Designers Tom Hoferek. Objectives Introduce SVG Illustrate its capabilities Demonstrate SVG in action Speculate, discuss, answer questions.
1 Scalable Vector Graphics (SVG). 2 SVG SVG is an application language of XML. “SVG is a language for describing two- dimensional graphics in XML. SVG.
Lecture 16 Image Document Formats. Bitmap vs. Vector Images Bitmaps do not generally.
1 Overview of XSL. 2 Outline We will use Roger Costello’s tutorial The purpose of this presentation is  To give a quick overview of XSL  To describe.
Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project.
XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology.
Week 3  Adobe Photoshop Introduction  Create an Image Collage  Save For Web Please Visit:
Chapter 12 Web Publishing. Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
1 Copyright (c) [2000]. Roger L. Costello. All Rights Reserved. Using XSLT and XPath to Transform XML Documents Roger L. Costello XML Technologies.
Slides adapted from: Bjarne Stroustrup, Programming – Principles and Practice using C++ Chapter 12 A display model Hartmut Kaiser
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Microsoft® Small Basic Exploring Shapes Estimated time to complete this lesson: 1 hour.
1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Chapter 13 Preparing Graphics for the Web. Creating Slices When you create graphics for the web, you will need to pay attention to different considerations.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
Adobe Photoshop CS4 – Illustrated Unit A: Getting Started with Photoshop CS4.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
Scalable Vector Graphics Dietz Ellis 04/17/06. SVG SVG is a language for describing two- dimensional graphics in XML. SVG is a language for describing.
Part – 3 : HTML 5 SVG Tag. † SVG stands for Scalable Vector Graphics. † SVG is used to define vector-based graphics for the Web. † SVG defines the graphics.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar.
Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Laying out Elements with CSS
Inserting and Working with Images
Bitmap vs. Vector.
Tuesday, June 22, Reflections 11.3 Reflections
Week 10 - HTML SVG Student: Vladislovas Karalius
Presentation transcript:

1 Using XSLT and XPath to Generate SVG Roger L. Costello XML Technologies

2 What is SVG? SVG = Scalable Vector Graphics With SVG a graphic is described using lines and circles and boxes. An SVG tool reads the description and draws the graphic –Adobe has a free plugin to Netscape and IE at Contrast a vector graphic with a bitmapped graphic (e.g., JPEG, GIF): in a bitmapped graphic each pixel is given a color –Obviously bitmapped graphics are much bigger!

3 Line "Create an SVG graphic. Allot a width and height of 100% of the screen. The graphic has a single line that starts at (0, 0) and ends at (300, 300). Draw the line in red." (see svg-example01)

4 x, y Axis x-axis y-axis (0, 0) The x-axis increases to the left. The y-axis increases as we go down the screen.

5 Rectangle "Draw a rectangle starting at (100, 50), with a width of 300 and a height of 200. The border is red and it is to be filled with red."

6 text <text x="175" y="150" style="font-family: Arial, sans-serif; font-size:14; font-weight:bold; fill:blue"> This is text in a box "Draw a rectangle, then draw text. Note that the text is to start at the coordinates (175, 150), which is inside the rectangle. The text is: This is text in a box." (see svg-example01)

7 Embedding SVG in HTML If you want to embed an SVG graphic in an HTML document then you point to it using an HTML element. For example: Demonstrate SVG in HTML SVG in HTML - Wow!

8 Embedding SVG in HTML text.svg

9 animation You can animate text by embedding an element within a element This is text in a box The attributeName specifies what aspect of the text is to be animated. In this example we want to animate the value of the x-coordinate of the text. We want animation to start 1 second after display. A full cycle is to take 30 seconds. The x-coordinate value should range from a value of -120 to 300 over the 30 seconds. Once a cycle is done it should be repeated indefinitely.

10 tspan Within a element, text and font properties and the current text position can be adjusted by embedding a element within the element tspan is used to extend the definition of your element

11 Creating a Scrolling Window This is text in a box And this is more text With the first tspan I indicate that I want the text "This is text in a box" animated - to move across the screen over a 15 second duration. The second tspan extends the definition of the element to indicate that we also want the text "And this is more text" output at the same x-coordinate, but the y-coordinate should have a delta (dy) of 2em (in other words, this second text should be under the first).

12 FitnessCenter Report with Scrolling Name/FavoriteColor Data Problem: create an XSL-enhanced HTML document which has all the Name and home Phone data in an HTML table, and all the Name and FavoriteColor data in a scrolling SVG box XSL Processor FitnessCenter.xml FitnessCenter.xsl FitnessCenter.html FitnessCenter.svg

13 -- create HTML table, populate with Name and home Phone data -- Members Favorite Color (see svg-example02)

14 You can create your image using Adobe Illustrator and then export as SVG!