Integrating Firebase Into Our Application

Integrating Firebase into our application from the Course AngularJS: Adding Registration to Your Application.


Authentication is a fundamental part of any web application, but it can be notoriously difficult to implement. In this short course, you’ll create a simple registration system that allows users to log in and out of your applications. By taking advantage of Google’s Firebase authentication service, you can manage registrations easily and securely. In the process, you’ll explore working with the AngularJS application structure (including routes and controllers), storing user information into the Firebase NoSQL database, and creating services to manage registration information throughout different controllers. This will help you create a great registration template that you can use as a starting point in a variety of web applications.

Topics include:

  • Adding a basic MVC structure
  • Using routes
  • Processing form input
  • Integrating Firebase
  • Storing registration information in the database
  • Logging users in and out of an app

Realtime Database

Firebase provides a realtime database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud. The company provides client libraries that enable integration with Android, iOS, JavaScript, Java, Objective-C and Node.js applications. The database is also accessible through a REST API and bindings for several JavaScript frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving push notifications from a server. Developers using the realtime database can secure their data by using the company’s server-side-enforced security rules.


A web API is a subset of an application programming interface (API). It is used for exchanging information with a website, either by receiving or by sending data. A web API typically consists of multiple publicly exposed endpoints that accept HTTP requests and respond with the requested data, typically in the form of JavaScript Object Notation (JSON) or Extensible Markup Language (XML).



A server-side web API is a programmatic interface to a defined request-response message system, typically expressed in JSON or XML, which is exposed via the web—most commonly by means of an HTTP-based web server. Mashups are web applications which combine the use of multiple such web APIs. Webhooks are server-side web APIs that take as input a URI that is designed to be used like a remote named pipe or a type of callback such that the server acts as a client to deference the provided URI and trigger an event on another server which handles this event thus providing a type of peer-to-peer IPC.


A client-side web API is a programmatic interface to extend functionality within a web browser or other HTTP client. Originally these were most commonly in the form of native plug-in architectures however most newer ones target standardized JavaScript bindings.

The Mozilla Foundation created their WebAPI specification which is designed to help replace native mobile applications with HTML5 applications.

Google created their Native Client architecture which is designed to help replace insecure native plug-ins with secure native sandboxed extensions and applications. They have also made this portable by employing a modified LLVM AOT compiler.

See More Resources:

Free eBook: AngularJS Programming Cookbook
Responsive Web Design with AngularJS
Firechat – Open-source real-time chat, built on Firebase
Firepad – Open source collaborative code and text editing

Build My Site

Creating and Compiling a Hello World Application with Go

Creating and compiling a hello world application provides you with in-depth training on Developer. Taught by David Gassner as part of the Up and Running with Go developer series.

What is Go? Go is a next-generation, open-source programming language created by Google for building systems, web, and other applications. This course is designed to help developers get started with Go, covering its core language elements and syntax. David Gassner introduces tools and skills used in a Go workflow—including Go Playground, an online tool that takes Go development off the desktop. He also covers basic programming tasks: managing values, using math operators, storing values as complex types, and managing program flow. Plus, learn how to structure Go code for maximum readability and performance, read and write files, and make simple web requests.

Topics include:

  • Installing Go tools
  • Creating and compiling a Go workspace
  • Exploring variables, constants, and types
  • Storing ordered and unordered values
  • Grouping related values in structs
  • Programming conditional logic and loops
  • Defining and calling functions
  • Handling errors
  • Working with files
  • Creating a simple HTTP server

Language Tools in Go

Go includes the same sort of debugging, testing, and code-vetting tools as many language distributions. The Go distribution includes, among other tools,


  • go build, which builds Go binaries using only information in the source files themselves, no separate makefiles
  • go test, for unit testing and microbenchmarks
  • go fmt, for formatting code
  • go get, for retrieving and installing remote packages
  • go vet, a static analyzer looking for potential errors in code
  • go run, a shortcut for building and executing code
  • godoc, for displaying documentation or serving it via HTTP
  • gorename, for renaming variables, functions, and so on in a type-safe way
  • go generate, a standard way to invoke code generators

Here is a Hello world program in Go:

package main

import "fmt"

func main() {
fmt.Println("Hello, World")

Run or edit this example online.

It also includes profiling and debugging support, runtime instrumentation (to, for example, track garbage collection pauses), and a race condition tester.

Conventions and Code Style

The Go authors and community put substantial effort into molding the style and design of Go programs:

  • Indentation, spacing, and other surface-level details of code are automatically standardized by the go fmt tool. golint does additional style checks automatically.
  • Tools and libraries distributed with Go suggest standard approaches to things like API documentation (godoc), testing (go test), building (go build), package management (go get), and so on.
  • Syntax rules require things that are optional in other languages, for example by banning cyclic dependencies, unused variables or imports, and implicit type conversions.
  • The omission of certain features (for example, functional-programming shortcuts like map and C++-style try/finally blocks) tends to encourage a particular explicit, concrete, and imperative programming style.
  • Core developers write extensively about Go idioms, style, and philosophy, in the Effective Go document and code review comments reference, presentations, blog posts, and public mailing list messages.

Build My Site

Creating Global Properties and Constants

Android, Windows, and iOS support are all required for a successful app launch. This course, revised for 2015, is one in a series that will demonstrate the similarities and differences between the three platforms via the development of a complete note-taking app. This installment uses Xcode and Apple’s Swift programming language to get the job done. Author Todd Perkins shows you how to set up your development environment, create a new app, and customize the app to support a split-screen view.

Building a Note-Taking App for Android and Building a Note-Taking App for Windows Phone 8 and Windows Store use the same assets. Compare and contrast the steps and discover the similarities and differences between the three platforms. See more: Building a Note-Taking App for iOS 9 with Swift.

Swift Programming Language

Swift is a multi-paradigm, compiled programming language created by Apple Inc. for iOS, OS X, and watchOS development. Swift is designed to work with Apple’s Cocoa and Cocoa Touch frameworks and the large body of existing Objective-C code written for Apple products. Swift is intended to be more resilient to erroneous code (“safer”) than Objective-C, and also more concise. It is built with the LLVM compiler framework included in Xcode 6, and uses the Objective-C runtime, allowing C, Objective-C, C++ and Swift code to run within a single program.

Overview of the various programming paradigms according to Peter Van Roy

Swift was introduced at Apple’s 2014 Worldwide Developers Conference (WWDC), It underwent an upgrade to version 1.2 during 2014, and a more major upgrade to Swift 2 at WWDC 2015. Initially a proprietary language, it was announced that Swift 2 would become open source later that year, supporting iOS, OS X, and Linux.

Types, variables and scoping

Under the Cocoa and Cocoa Touch environments, many common classes were part of the Foundation Kit library. This included the NSString string library (using Unicode), the NSArray and NSDictionary collection classes, and others. Objective-C provided various bits of syntactic sugar to allow some of these objects to be created on-the-fly within the language, but once created the objects were manipulated with object calls. For instance, concatenating two NSStrings required method calls similar to this:

NSString *str = @"hello,";
str = [str stringByAppendingString:@" world"];

In Swift, many of these basic types have been promoted to the language’s core, and can be manipulated directly. For instance, strings are invisibly bridged to NSString (when Foundation is imported) and can now be concatenated with the + operator, allowing greatly simplified syntax; the previous example becoming:

var str = "hello,"
str += " world"

Though omitted in the early betas, Swift supports three access control levels for symbols: public, internal, and private. Unlike many object-oriented languages, these access controls ignore inheritance hierarchies: “private” indicates that a symbol is accessible only in the containing source file, “internal” indicates it is accessible within the containing module, and “public” indicates it is accessible from any module. The decision to omit the traditional “protected” scope met with some controversy.

See more resources:

Error-Handling in Swift-Language
Protocol-oriented Programming in Swift – Apple WWDC 2015
Programming Paradigms for Dummies: What Every Programmer Should Know

Build My Site

Understanding Syntactically Awesome Stylesheets (Sass)

Learn the fundamentals of Syntactically Awesome Stylesheets (Sass), a modern web development language that helps you write CSS better, faster, and with more advanced features. Ray Villalobos shows you the best way to install Sass and work with its main features: variables, nesting, partials, and mixins. Plus, learn how to use SassScript to create complex functions from Sass lists and control statements. See more: Sass Essential Training.

Topics include:

  • Working with variables
  • Nesting styles
  • Creating mixins
  • Conditional statements and loops in SassScript
  • Extending your mixins
  • Working with lists and maps

What Syntactically Awesome Stylesheets (Sass) Is

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called “the indented syntax”, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, “SCSS”, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved. Sass is simply syntactic sugar for CSS.


The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There’s also a Java implementation called JSass. Additionally, Vaadin has a Java implementation of Sass. The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extension Firebug.


CSS does not support mixins. Any repeated code must be repeated in each location. A mixin is a section of code that contains any valid Sass code. Whenever a mixin is called, the result of translating the mixin is inserted at the calling location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  td, th {padding: 2px}

#data {
  @include table-base;

Would compile to:

#data th {
  text-align: center;
  font-weight: bold;
#data td, #data th {
  padding: 2px;

See more resources:

Sass Basics
Module: Sass::Script::Functions
Getting started with SASS

Build My Site

Building a Note-Taking App for Android | Customizing the appearance of list items

Android, Windows, and iOS support are all required for a successful product. This course, revised for 2015, is one in a series that will demonstrate the platforms’ similarities and differences via the development of a complete note-taking app. This installment uses Android Studio to get the job done. Author David Gassner shows you how to create a new project in Android Studio, customize its material design themes, and create a data management layer that allows users to create, read, update, and delete notes. He also demonstrates how to build a rich user interface, create activities (aka screens), and enable action icons to control navigation.

Building a Note-Taking App for iOS 8 and Building a Note-Taking App for Windows Phone 8 and Windows Store use the same assets to develop a similar app. Compare and contrast the steps and discover the similarities and differences between the three platforms. See more about this course: Building a Note-Taking App for Android.

Topics include:

  • Understanding Android UI and data management patterns
  • Creating an Android Studio project
  • Customizing material design theme colors
  • Defining an SQLite database structure
  • Managing data with ContentProvider and Loader classes
  • Retrieving and displaying data
  • Customizing data display with a CursorAdapter
  • Creating, updating, and deleting notes
  • Preparing the app for deployment

Material Design

Material Design (codenamed Quantum Paper) is a design language developed by Google. Expanding upon the “card” motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that, “unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.” Google states that their new design language is based on paper and ink.

Some typical Material Design UI components

Material Design can be used in Android version 2.1 and up via the v7 appcompat library, which is used on virtually all Android devices that were made after 2009. Material Design will gradually be extended throughout Google’s array of web and mobile products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.

Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference. As of 2015, most of Google’s mobile applications for Android have applied the new design language, including Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, all of the Google Play-branded applications, and to a smaller extent the Chrome browser and Google Keep. The desktop web interfaces of Google Drive, Docs, Sheets, Slides and Inbox have incorporated it as well.


The canonical implementation of Material Design for web application user interfaces is called polymer paper elements. It consists of the Polymer library, a shim that provides a Web Components API for browsers that do not implement the standard natively, and the so-called “paper elements collection”.

See more resources:

Material Design Resources and Inspiration
Material Design Lite – A Giant Library of Web Components
Lessons Learned From Analyzing Material Design Components

Build My Site

Building the Node.js Server App

Socket technology is a natural fit for presentation and chat applications. This course helps you use Socket IO in combination with powerful JavaScript libraries to develop an interactive polling application that processes data in real time, allowing presenters to interact with audience members and graph their responses. Alex Banks shows each step in the process, starting with setting up the node environment and express app for development. You’ll then create and connect sockets for real-time data sharing and set up routing and interface elements with React.js, refactoring those components for ES6 integration. This setup will allow you to program functionality for running presentations, joining presentations, asking and answering questions, and graphing the results of the poll. See more: Building a Polling App with Socket IO and React.js.

Topics include:

  • Setting up the environment
  • Connecting sockets
  • Handling disconnects
  • Setting up the React.js router
  • Passing state to child components as properties
  • Joining the presentation
  • Starting and running the presentation
  • Asking and answering questions
  • Graphing results
  • Upgrading to ES6


Node.js allows the creation of web servers and networking tools using JavaScript and a collection of “modules” that handle various core functionality. Modules handle file system I/O, networking (HTTP, TCP, UDP, DNS, or TLS/SSL), binary data (buffers), cryptography functions, data streams, and other core functions. Node’s modules use an API designed to reduce the complexity of writing server applications.

Frameworks can be used to accelerate the development of applications, and common frameworks are Express.js, Socket.IO and Connect. Node.js applications can run on Microsoft Windows, Unix, NonStop and Mac OS X servers. Node.js applications can alternatively be written with CoffeeScript (an alternative form of JavaScript), Dart or Microsoft TypeScript (strongly typed forms of JavaScript), or any language that can compile to JavaScript.

Smashing Node.js: JavaScript Everywhere–Free Sample Chapters


Node.js is primarily used to build network programs such as web servers, making it similar to PHP and Python. The biggest difference between PHP and Node.js is that PHP is a blocking language, where commands execute only after the previous command has completed, while Node.js is a non-blocking language where commands execute in parallel, and use callbacks to signal completion.

Node.js implements event-driven programming for web applications in JavaScript. Developers can create highly scalable servers without using threading, by using a simplified model of event-driven programming that uses callbacks to signal the completion of a task. Concurrency is difficult in many server-side programming languages, and often leads to poor performance. Node.js is designed to use the scripting language JavaScript for Unix network programming.

Thousands of open-source libraries have been built for Node.js, most of which are hosted on the npm website. Its developer community has two main mailing lists and the IRC channel #node.js on freenode.

See more resources:

private npm is here
Node.js – A Simple Tutorial With Example
node.js domains make my app predictably fixable

Build My Site

Debugging the Web: JavaScript

Using a debugger provides deeper insights into your code, telling you not just when things don’t work but also why. Best of all, the tools are easy to learn and often built right into your web browser. In this course, Joe Chellman looks at how to find and fix issues in JavaScript projects using a debugger, the tool of the trade. He reviews the different software available and introduces core debugging techniques, such as inspecting variables and stepping through functions. In the last half of the course, Joe debugs four types of real-world JavaScript scenarios (a jQuery plugin, WordPress theme, mobile site, and AngularJS project) and touches on how incorporating test-driven development practices into your debugging process can increase your productivity and the strength of your code. See more: Debugging the Web: JavaScript.

Topics include:

  • Getting the browsers and plugins
  • Leveraging the Console API
  • Using breakpoints
  • Using step functions
  • Watching variables
  • Debugging jQuery, WordPress, mobile sites, and more

Debugging Tools

A debugger or debugging tool is a computer program that is used to test and debug other programs (the “target” program). Within JavaScript, access to a debugger becomes invaluable when developing large, non-trivial programs. Because there can be implementation differences between the various browsers (particularly within the Document Object Model), it is useful to have access to a debugger for each of the browsers that a Web application targets.

Script debuggers are integrated within Internet Explorer, Firefox, Safari, Google Chrome, Opera and Node.js.


In addition to the native Internet Explorer Developer Tools, three debuggers are available for Internet Explorer: Microsoft Visual Studio is the richest of the three, closely followed by Microsoft Script Editor (a component of Microsoft Office), and finally the free Microsoft Script Debugger that is far more basic than the other two. The free Microsoft Visual Web Developer Express provides a limited version of the JavaScript debugging functionality in Microsoft Visual Studio. Internet Explorer has included developer tools since version 8 (reached by pressing the F12 key).

In comparison to Internet Explorer, Firefox has a more comprehensive set of developer tools, which include a debugger as well. Old versions of Firefox without these tools used a Firefox addon called Firebug, or the older Venkman debugger. Also, WebKit’s Web Inspector includes a JavaScript debugger, which is used in Safari. A modified version called Blink DevTools is used in Google Chrome. Node.js has node-inspector, an interactive debugger that integrates with the Blink DevTools, available in Google Chrome. Last but not least, Opera includes a set of tools called Dragonfly.

In addition to the native computer software, there are online JavaScript IDEs, debugging aids are themselves written in JavaScript and built to run on the Web. An example is the program JSLint, developed by Douglas Crockford who has written extensively on the language. JSLint scans JavaScript code for conformance to a set of standards and guidelines. Many libraries for JavaScript, such as three.js, provide links to demonstration code that can be edited by users. They are also used as a pedagogical tool by institutions such as Khan Academy to allow students to experience writing code in an environment where they can see the output of their programs, without needing any setup beyond a web browser.

See more resources:

Eloquent JavaScript by Marijn Haverbeke — a free, Creative Commons–licensed eBook
Douglas Crockford Lectures on JavaScript
Codeacademy’s JavaScript Track

Build My Site

What is Flexbox?

The CSS Flexible Box Layout module (aka Flexbox) provides a simple solution to many of the design and layout problems web designers and developers have faced since the advent of CSS. Now that the module is becoming ready for the main stage, it’s time to look at what we can do with it.

This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see. See more: Advanced Responsive Layouts with CSS Flexbox. For beginners see: CSS: Flexbox First Look.

Topics include:

  • Creating Flexbox-powered menus
  • Building a responsive card layout
  • Marking up and styling the holy grail layout
  • Changing displays
  • Showing and hiding the sidebar
  • Animating content

CSS Flex Box Layout

CSS Flex Box Layout is the latest layout model coming to CSS3. It is in the W3C’s Candidate Recommendation (CR) stage. The new flex layout allows elements within a container to be arranged in a way fitting to the screen or device that it is being viewed on. Unlike the block layout mode, the flex layout lacks the functionality of columns and floats. It does, however, allow more flexibility in the layout of the content within the container.



One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to be constrained within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than those, for example, of the block and inline display types, which are generally uni-directional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.

Browser Compatibility


Designate a flex box

Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:

display: flex;


display: inline-flex;

By setting the display to one of the two values above, an element becomes a flex container and its children flex items. Setting the display to flex makes the container a block-level element, while setting the display to inline-flex makes the container an inline-level element.

See More Resources:

Using CSS flexible boxes
A Complete Guide to Flexbox

Build My Site

Creating a React Component

About this course: Up and Running with React.js

A new JavaScript framework has arrived: React.js. React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. Here Eve Porcello will help you learn React.js while guiding you through the process of building the interface for a bulletin board app. She reviews components, properties, and states, as well as the foundational parent/child relationships within React.js. Eve also describes the life cycle of components and how developers can trigger creation, lifetime, and teardown events. The course wraps with a chapter dedicated to building a more complete app with React.js and companion tools CommonJS, Browserify, and Reactify. See more: Up and Running with React.js

Topics include:

  • What is React.js?
  • Introducing JSX
  • Creating a React component
  • Handling events
  • Using states
  • Defining parent/child relationships
  • Adding child elements
  • Mounting and updating components
  • Creating a React.js app


React: a JavaScript library

React, sometimes styled React.js or ReactJS, is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

React is intended to help developers build large applications that use data that changes over time. Its goal is to be simple, declarative and composable. React only handles the user interface in an app; it is considered to only be the view in the model–view–controller (MVC) software pattern, and can be used in conjunction with other JavaScript libraries or larger MVC frameworks such as AngularJS. It can also be used with React-based add-ons that take care of the non-UI parts of building a web application.

According to JavaScript analytics service, Libscore, React is currently being used on the homepages of Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, and others.

How to define a component, rendering, events, properties and state

1. var BreadcrumbsDemo = React.createClass({
2.  getContent: function(path) {
3. return path[path.length - 1];
4. },
5. getInitialState: function() {
6.   return {
7.    path: this.props.path
8.    };
9.  },
10.  onPathChange: function(value) {
11.    this.setState({
12.      path: value
13.    });
14.  },
15.  reset: function() {
16.   this.setState({
17.      path: this.props.path
18.    });
19.  },
20.  render: function() {
21.    return (
22.      <div>
23.        <div id="breadcrumb-container">
24.          <Breadcrumbs path={this.state.path} maxEntries="5" 
25.            onChange={this.onPathChange}/>
26.        </div>
27.        <div id="content">{this.getContent(this.state.path)}</div>
28.        <button id="resetButton" onClick=   {this.reset}>Reset</button>
29.      </div>
30.    )
31.  }
32.  });
34. var fullPath = ['element1', 'element2', 'element3',     'element4',
35. 'element5', 'element6', 'element7'];
37. React.render(
38.  <BreadcrumbsDemo path={fullPath}/>,
39.  document.querySelector('#container')
40.  );

The most important part of a component definition is method render in lines 20-31 where the component declaratibely defines how it should be rendered. This can include other components like Breadcrumbs in line 24 and familiar HTML elements like div in line 27.

We can also parameterize the rendition with the component data which can come from two sources: component state and component properties. See more: Web Components and Friends: React.js, Angular.js, Polymer

See more resources:

The React.js Way: Getting Started Tutorial
React.js: Super-fast Single Page Web Applications
React.js Tutorial Part 3

Build My Site

Responsive SVG Images: Adding classes and styles for symbols

When you need more control over the imagery in your websites and interactive projects, scalable vector graphics are a great place to turn. SVG images are resolution-independent, which means they look great at any size, and they can be manipulated with CSS. This installment of Design the Web with Chris Converse explores the design possibilities offered by combining SVG graphics with CSS media queries. Start watching to learn how to create your own responsive SVG images. See more: Design the Web: Responsive SVG Images.


Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support.



Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path. Paths have a compact coding. For example M (for ‘move to’) precedes initial numeric x and ycoordinates and L (line to) precedes a point to which a line should be drawn. Further command letters (C, S, Q, T and A) precede data that is used to draw various Bézier and elliptical curves. Z is used to close a path. In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.

Basic shapes

Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.


SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. “Markers” are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.


Colors can be applied to all visible SVG elements, either directly or via ‘fill’, ‘stroke,’ and other properties. Colors are specified in the same way as in CSS2, i.e. using names like black or blue, in hexadecimal such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).

Clipping, masking and compositing

Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both inside and outside regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.


SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface events such as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.


SVG images can contain hyperlinks to other documents, using XLink. Through the use of the <view> element or a fragment identifier, URLs can link to SVG files that change the visible area of the document. This allows for creating specific view states that are used to zoom in/out of a specific area or to limit the view to a specific element. This is helpful when creating sprites. XLink support in combination with the <use> element also allow linking to and re-using internal and external elements. This allows to do more with less markup and makes for cleaner code.











This code will produce the shapes shown in the image (excluding the grid):

<svg xmlns="" version="1.1">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />

See more resources:

How to Use SVG Patterns
Create an SVG Animation using CSS and JavaScript

Build My Site