SVG & DOM Manipulation via Javascript

Slides:



Advertisements
Similar presentations
HTML5 Overview HOANGPT2. 1. General 2. New Elements List 3.
Advertisements

What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
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.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
© Nova / Grassioulet 5-6 mai 2002 TECFA staf2x S V G glossary Scalable Vector Graphics.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.
Evaluation of HTML5 Graphics for Data Structure Visualization
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
HTML Boot Camp: Rules and Images
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
HTML5 – The Power of HTML5 – The Power of Thomas Lewis HTML5 Principal Technical Evangelist Microsoft | asimplepixel.tumblr.com.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Advanced DHTML.
Presented by Nassib Awad
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.
Cascading Style Sheets Robin Burke ECT 360. Outline Midterm CSS CSS selection Positioning SVG Final project.
Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140.
Data Visualization Fall What D3 is? Fall 2015Data Visualization2 JavaScript library for manipulating documents based on data Data-Driven Documents.
Glencoe Introduction to Web Design Chapter 8 Web Graphics 1 A bitmap file format that is used by scanners and graphics programs for use in print.
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
Flaps The technology and its variations across browsers.
XML DOM Week 11 Web site:
SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
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.
CSS (Cascading Style Sheets). CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add.
SVG Scalable Vector Graphics And the SVG Perl Module Tamir Lousky April 2010Rehovot Perl Mongers.
XHTML. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML.
CSS.
Programming Web Pages with JavaScript
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Internet of the Past.
4.01 Cascading Style Sheets
>> Introduction to CSS
Inserting and Working with Images
Chapter 4: Scalable Vector Graphics (SVG)
Cascading Style Sheets
Using Cascading Style Sheets Module B: CSS Structure
Putting Things Where We Want Them
A framework to create SVG graphics
Document Object Model (DOM): Objects and Collections
Revision.
Cascading Style Sheets - Building a stylesheet
The Web Wizard’s Guide To DHTML and CSS
Introduction to D3.js and Bar Chart in D3.js
Week 11 Web site: XML DOM Week 11 Web site:
Skills learned in Lab 1 Web GUI framework HTML tags and attributes
.NET and .NET Core 7. XAML Pan Wuming 2017.
The Canvas.
Tutorial 6 Creating Dynamic Pages
D3.js Tutorial (Hands on Session)
Tutorial 3 Working with Cascading Style Sheets
Drawing Graphics in JavaScript
Web Design and Development
D3.js Tutorial (Hands on Session)
Programming games Share your plans for your virtual something.
Week 10 - HTML SVG Student: Vladislovas Karalius
Cascading Style Sheets - Building a stylesheet
HTML5 - 2 Forms, Frames, Graphics.
Web Client Side Technologies Raneem Qaddoura
Lab 1: D3 Setup John Fallon
JavaScript – Let’s Draw!
Presentation transcript:

SVG & DOM Manipulation via Javascript Slides by Charlie Roberts, 11/16 Modified by Sean Boyle IGME 230 Fall 2016

SVG (scalable vector graphics) alternative to <canvas> and WebGL for 2D graphics in the browser. Unlike Canvas / WebGL, which are pixel-based, SVG are scalable to any resolution due to its use of vectors. Firefox logo is link to corresponding SVG file. View page source to show class the SVG XML.

SVG : where is it used? In addition to logos, SVG is also heavily used in d3.js, the most popular dataviz library for JavaScript, originally created by developers for the New York Times. The text / image above is a link to d3.js, spend some time with students briefly looking through a few interesting examples.

SVG = XML They look like HTML, but behave a bit differently. Show SVG Demo #1. In this demo, the tags originally do not self-close. This causes a rendering error where only one circle is initially visible. By adding the closing tags (or self-closing backslashes) this error is fixed and both circles become visible. Note that closing tags / self-closing tags are not required in the HTML 5 spec.

Drawing shapes <!-- start tag and size attributes --> <svg width='500' height='500'> <!-- draw some stuff --> <circle id='d' cx='100' cy='100' r='50' /> <circle id='e' cx='200' cy='200' r='25' /> </svg><!-- end tag --> Note that the id attribute can be used to identify unique vectors. You can then use the id selector to apply CSS rules or manipulate the vectors via JavaScript.

Formatting (with CSS) <style> #d { fill: red; stroke-width:10; stroke:green; } </style> <svg width='500' height='500'> <circle id='d' cx='100' cy='100' r='50' /> <circle id='e' cx='200' cy='200' r='25' /> </svg> CSS rules for SVG are different than rules for DOM elements. For example, “fill“ defines the foreground color, there is no “stroke-color” property. Show svg.demo2.css.html file and play around with CSS in the developer console.

SVG Element Reference Note that attributes have different meanings in different elements. For example, in an “ellipse”, rx means radius along the x-axis; in a “rect” element rx defines the x-radius of the ellipse used to round the corners of the rectangle (?!?). However, often times attributes carryover from one element to another.

JavaScript and SVG Assuming a single SVG that fills the screen, draw one rectangle var xmlns = 'http://www.w3.org/2000/svg'; var svg = document.querySelector( 'svg' ); var rect = document.createElementNS(xmlns, 'rect'); rect.setAttribute( 'x', 0 ); rect.setAttribute( 'y', 0 ); rect.setAttribute( 'width', 40 ); rect.setAttribute( 'height', 40 ); svg.appendChild( circle ); Explain that namespaces are specific to individual XML elements and can vary between elements. SVG elements created via JavaScript won’t work without namespaces. Show svg.demo3.rect.html

JavaScript and SVG Assuming a single SVG that fills the screen, draw a hundred randomly sized, randomly colored red circles. Note that the elements are stored so we can manipulate them easily, for example: circles.forEach( v => v.style.fill = “green” ). Point out that window.innerWidth / innerHeight are the best way to get at the dimensions of the HTML content (as opposed to the entire browser window including toolbar etc.) Show svg.demo4.circles.html var xmlns = 'http://www.w3.org/2000/svg'; var svg = document.querySelector( 'svg' ); var circles = []; for( var i = 0; i < 100; i++ ) { var circle = document.createElementNS( xmlns, 'circle' ); circle.setAttribute( 'cx', Math.random() * window.innerWidth ); circle.setAttribute( 'cy', Math.random() * window.innerHeight ); circle.setAttribute( 'r' , Math.random() * 40 ); svg.appendChild( circle ); };

Animating SVG elements Assuming a single SVG that fills the screen, draw a thousand randomly sized, randomly colored circles that move across the screen. Show svg.demo5.animation.html. Talk about how the forEach method of the Array prototype calls a function on every element that an array contains. Explain that setInterval repeatedly calls a function every X milliseconds. parseFloat() has to be used with calls to getAttribute() whenever we want to use the results mathematically, as getAttribute() will always return a string. parseFloat() converts to a float. Create helper functions that randomly color, position, and set the speed of individual circle elements. Create a thousand circle elements and store them in an array Call our helper functions on each item our array of circles to create variation between individual elements Create a function to move a single circle according to its speed 60 times per second, call our circle moving function on every circle in our array.

ICE: Abstract Animation Create an abstract animation. Use at least four different types of SVG elements in your composition. All SVG elements (with the exception of the container <svg> tag) should be dynamically added via JavaScript. Try to create at least two different “scenes”, moments where the animation changes in a significant way. Place the resulting HTML file (and any external resources if needed) on Banjo and provide a link from your homepage. Show an interesting abstract animation… for something fun and for inspiration. A couple I’d recommend: https://www.youtube.com/watch?v=nvWwlZSXaR0 https://www.youtube.com/watch?v=they7m6YePo